그래프를 출력 관련 about mon2tor

[dozzzang]

prediction_graph 디렉토리의 work&nonwork 디렉토리의 grpah.py를 말씀하시는 것 같습니다.
우선 저는 문제 없이 출력됩니다. 아마 패키지 버전 문제인 것 같은데
pandas 패키지 버전이 1.5.3이 맞는지 확인해주시겠어요?
추가로 궁금한 것이 있는데 37년도까지로 수정해달라고 하셔서 수정하고 merge하였었는데 pull 받아 사용안하시는 점에 이유가 있는지 궁금합니다.
추가로 어제 issue에 올렸던 파일명수정도 pull받아 사용해주시면 좋겠습니다.

[won-hj]

아! 죄송해요 파일명 수정한 부분은 제가 오해한 부분에서 생긴 일이었습니다
22 28 32 36년도 그래프 중 4개 그래프 모두 bokeh를 이용해 출력하는줄알고 수정이 가능한지 여쭌거였는데
알고보니 bokeh는 13~22년도까자의 그래프만 출력하는 것이었고
나머지 22년도 이후 그래프들은 prophet을 이용하는 것이었어요

issue에 올렸던 파일명 수정은.. 이슈내용 모두 pull 했던 것으로 기억하는데 다시 확인해보겠습니다

추이 그래프의 경우 훌륭하게 만들어주셔서 gridplot과는 다르게 구조적으로 plot들을 한꺼번에 합쳐 출력할 수 없는 문제와 pandas 버전을 제외하고는 정말 잘 됐습니다
근데 이게 좀 많이 느리네요....
그리고 pandas 다운그레이드 후 돌려보니 FutureWarning: The behavior of .astype from datetime64[ns] to int32 is deprecated. 라는 경고문이 뜨는 문제가 있네요.... 경고니 문제는 없겠지만 원인이 버전에 따른 deprecated 였습니다........

[won-hj]

recreate prediction을 하고 past graph는 create로 풀받았어나봐요!!!
확인하고 받았습니다!

[won-hj]

past work nonwork graph 같은 경우는 pst graph에서 실행 시
unexpected attribute 'style' to Div, similar attributes are styles, stylesheets or syncable 라는 오류가 뜨네요
혹시 flask로 확인해봐야할까요?

[won-hj]

flaks로 구동시켜도 같은 문제가 생깁니다
render template으로 바로 해야하나 싶은데
이 경우 따로 만드셨던 html 화면이라던지 이런건 없죠??

제가 했던 방법은 jsondump로 먼저 해본 것이었는데
같은 오류가 떴습니다

[won-hj]

아 혹시 컴포넌트를 넘기는 방식으로 되어있나요?
그럼 html단에서 확인해봐야겠네요
의견 먼저 듣겠습니다
제가 너무 멍청하네요 죄송해요 ......

[dozzzang]

past work nonwork graph 같은 경우는 pst graph에서 실행 시 unexpected attribute 'style' to Div, similar attributes are styles, stylesheets or syncable 라는 오류가 뜨네요 혹시 flask로 확인해봐야할까요?

정확히 어떻게 실행했다는 건지 이해가 잘 안갑니다. python past ~~ 시킨 것일까요?

아 혹시 컴포넌트를 넘기는 방식으로 되어있나요? 그럼 html단에서 확인해봐야겠네요 의견 먼저 듣겠습니다 제가 너무 멍청하네요 죄송해요 ......

아니요 전혀 그렇지 않습니다. 제가 설명이 부족했었네요 저도 최근에 알게되었는 거라 Flask 서버 설정(app = Flask(name)같이) -> show()함수는 html을 독립적으로 만들어주니까 show() 대신에 component()를 이용하여 html코드로 변환할 수 있구요 -> python 파일에서 render_template를 이용해 html파일에 넘겨줄 수 있고요 -> html 코드에서 src랑 jinja2 템플릿 이용해서 변환할 수 있어요.

json dump는 제가 한 번도 해보지 못한 방식이라 잘 모르겠네요

[won-hj]

1. python past~~~ 를 해본게 맞습니다

2. show() 대신 component()를 이용하여 html코드를 변환할 수 있다는 말이 이해가 잘 가지 않습니다
   file_html(p) 같은 식으로 해도 해결은 안되던데 혹시 예시같은걸 알려주실 수 있으신가요???
   문서를 봐도 그 방법에 대해서는 잘 모르겠습니다....

[dozzzang]

1. python past~~~ 를 해본게 맞습니다
2. show() 대신 component()를 이용하여 html코드를 변환할 수 있다는 말이 이해가 잘 가지 않습니다
   file_html(p) 같은 식으로 해도 해결은 안되던데 혹시 예시같은걸 알려주실 수 있으신가요???
   문서를 봐도 그 방법에 대해서는 잘 모르겠습니다....

글쎄요 전 1번은 잘 되는데요
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure, output_file
from bokeh.models import ColumnDataSource, HoverTool, Title
from bokeh.palettes import Spectral4
from bokeh.layouts import gridplot
import pandas as pd
import csv

app = Flask(name)

@app.route("/")
def index():
with open('../tool/birth&death_data/2013data.csv') as f:
reader = csv.reader(f)
birth_death_data = []
age_data = []
for row in reader:
if len(row) == 0 or row[0][0] == '#':
continue
if row[0] == '출생아수' or row[0] == '사망자수':
birth_death_data.append(row)
elif row[0] == '생산가능인구(15-64)' or row[0] == '고령인구(65-)':
age_data.append(row)

birth_death_df = pd.DataFrame(birth_death_data, columns=['type', 'value']) 
age_df = pd.DataFrame(age_data, columns=['type', 'value'])

birth_death_source = ColumnDataSource(birth_death_df) 
age_source = ColumnDataSource(age_df)

p1 = figure(y_range=birth_death_df['type'], title="2013년 출생아 수 사망자 수", height=500, width=500)
p1.hbar(y='type', right='value', height=0.3, color=Spectral4[1], source=birth_death_source) 
p1.add_tools(HoverTool(tooltips=[("Type", "@type"), ("Value", "@value")]))

p2 = figure(y_range=age_df['type'], title="2013년 생산가능 인구와 \n고령인구 수(단위 : 백 명)", height=500, width=500)
p2.hbar(y='type', right='value', height=0.3, color=Spectral4[2], source=age_source)
p2.add_tools(HoverTool(tooltips=[("Type", "@type"), ("Value", "@value")]))

layout = gridplot([[p1, p2]])

script, div = components(layout)
return render_template("past_graph1.html", script=script, div=div)

if name == "main":
app.run(debug=True)
뭐 이런식으로 변환할 수 있지 않을까요 script와 div를 나눠서 html에 삽입할 수 있습니다.
html에는
{{ div|safe }}

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-x.x.x.min.js"></script>

{{ script|safe }}
이런식으로 삽입이 될 수 있습니다.

[dozzzang]

정 안되면 그냥 제가 기존에 짰던 코드를 실행하면 html파일이 하나 생성되는데 그 html파일의 코드를 다 긁어와서 웹사이트 html파일에 삽입해도 됩니다.
다만, 이 경우 유지보수가 안되고 보안성이 떨어지는데 사실 저희 프로젝트에서 더 이상 갱신할 일이 없으니 상관은 없지요.
내일까지 안되면 그냥 위의 방식을 채용하고 빨리 끝내도록 합시다.

[won-hj]

컴퍼넌트 바로 넘기는 방식이냐는 것이 예시로 들어주신 부분이었어요 !!!
보니까 html에서 받아오는 부분이 없는데
이게 첫 번째 문제같아요
이거 한번 보겠습니다 !!!!!!!

[won-hj]

코드 확인 해주세요
의심가는 부분은 create_graph 동작에서 style부분 ( , style={"font-family": "Consolas", "font-size": "16px"} ) 을 제거하면

<script>이부분은 안보이는게 맞으니까요..</script>를 제외한 부분에서

와 같이 출력이 됩니다.

그리고 |safe와 같은 필터를 사용하면 출력이 되지 않습니다.

from past_graph import past_work_nonwork_graph as g

df = pd.read_csv('./tool/work&nonwork_data/2013-2022data.csv')
df['Year'] = df['Year'].astype(str) 

columns_titles_colors = [
    ('work_percent', '생산인구(%):15-64세', Spectral4[1]),
    ('nonwork_percent', '고령인구(%):65세 이상', Spectral4[2]),
]

description = '*대한민국 전체 인구가 100%라고 가정했을 때 비율<br>*지방 중소도시 : 50만 이하의 인구<br>*생산인구 1%당 약 16만명 감소 생산인구로만 구성된 약 1개 중소도시 삭제<br>*고령인구 1%당 약 73만명 증가 고령인구로만 구성된 약 1개 중소도시 생성'

layout = g.create_graph(df, columns_titles_colors, description)

script, div = components(layout), components(g.create_graph(df, columns_titles_colors, description))
return render_template('example.html',script=script, div=div, test='testwnwcomp')

####################
<\br>
{{ div }}
<\br>
<script>
{{ script }}

혹시 다른 부분이 있거나 짐작가시는 부분이 있으신가요??

[won-hj]

그리고 보케 버전이랑
진자는 설치 안해도 되는거로 아는데 혹시 설치해야한다면 몇 버전으로 해야하는지 궁금합니다

왜 안될까요?? 뭘 잘못했을까요

[won-hj]

show()함수 잊고있어서 다시 해보니까 이건 나오네요....
근데 이걸가지고는 렌더를 어떻게 할진 아직 감을 못잡고있습니다..

[dozzzang]

으으으으으음 잠시만요 flask에서 구동하신 것은 맞죠?
일단 templates랑 static이랑 구분해서 html 수정부터 해야겠습니다. 수정하고 나서 fixweb branch를 pull받고 다시 해보시겠어요?
수정되면 알려드리겠습니다.

[won-hj]

<div id="e954cb82-eece-4fa9-baeb-f6cafa95a32a" data-root-id="p1122" style="display: contents;"></div>


<script type="text/javascript">
      (function() {
            const fn = function() {
                  Bokeh.safely(function() {
                        (function(root) {
                              function embed_document(root) {
                                    const docs_json = '{"44eac314-1f24-49fb-a2c3-f01a052dcf85":{"version":"3.1.0","title":"Bokeh Application","defs":[],"roots":[{"type":"object","name":"Column","id":"p1343","attributes":{"children":[{"type":"object","name":"Row","id":"p1341","attributes":{"children":[{"type":"object","name":"GridPlot","id":"p1338","attributes":{"rows":null,"cols":null,"toolbar":{"type":"object","name":"Toolbar","id":"p1337","attributes":{"tools":[{"type":"object","name":"HoverTool","id":"p1266","attributes":{"renderers":"auto","tooltips":[["Year","@Year"],["\\uc0dd\\uc0b0\\uc778\\uad6c(%):15-64\\uc138","@work_percent"]]}},{"type":"object","name":"HoverTool","id":"p1309","attributes":{"renderers":"auto","tooltips":[["Year","@Year"],["\\uace0\\ub839\\uc778\\uad6c(%):65\\uc138 \\uc774\\uc0c1","@nonwork_percent"]]}}]}},"children":[[{"type":"object","name":"Figure","id":"p1225","attributes":{"width":400,"height":400,"x_range":{"type":"object","name":"FactorRange","id":"p1235","attributes":{"factors":["2013","2014","2015","2016","2017","2018","2019","2020","2021","2022"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1227"},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1239"},"y_scale":{"type":"object","name":"LinearScale","id":"p1241"},"title":{"type":"object","name":"Title","id":"p1228","attributes":{"text":"\\uc0dd\\uc0b0\\uc778\\uad6c(%):15-64\\uc138","text_font":"Consolas","text_font_size":"15pt","align":"center"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1263","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1222","attributes":{"selected":{"type":"object","name":"Selection","id":"p1223","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1224"},"data":{"type":"map","entries":[["index",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAEAAAACAAAAAwAAAAQAAAAFAAAABgAAAAcAAAAIAAAACQAAAA=="},"shape":[10],"dtype":"int32","order":"little"}],["Year",{"type":"ndarray","array":["2013","2014","2015","2016","2017","2018","2019","2020","2021","2022"],"shape":[10],"dtype":"object","order":"little"}],["work_percent",{"type":"ndarray","array":{"type":"bytes","data":"mpmZmZlZUkCamZmZmVlSQJqZmZmZWVJAmpmZmZlZUkDNzMzMzExSQJqZmZmZOVJAzczMzMwsUkBmZmZmZgZSQGZmZmZm5lFAAAAAAADAUUA="},"shape":[10],"dtype":"float64","order":"little"}],["nonwork_percent",{"type":"ndarray","array":{"type":"bytes","data":"zczMzMzMJ0DNzMzMzMwoQJqZmZmZmSlAZmZmZmZmKkCamZmZmZkrQJqZmZmZmSxAzczMzMzMLUBmZmZmZmYvQJqZmZmZmTBAAAAAAACAMUA="},"shape":[10],"dtype":"float64","order":"little"}],["work_demo",{"type":"ndarray","array":{"type":"bytes","data":"dQ4AAI0OAACgDgAArw4AAK0OAACyDgAAsg4AAJkOAAB2DgAAUw4AAA=="},"shape":[10],"dtype":"int32","order":"little"}],["nonwork_demo",{"type":"ndarray","array":{"type":"bytes","data":"WgIAAHMCAACOAgAAowIAAMICAADgAgAAAAMAAC8DAABZAwAAhQMAAA=="},"shape":[10],"dtype":"int32","order":"little"}]]}}},"view":{"type":"object","name":"CDSView","id":"p1264","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1265"}}},"glyph":{"type":"object","name":"Line","id":"p1260","attributes":{"x":{"type":"field","field":"Year"},"y":{"type":"field","field":"work_percent"},"line_color":"#abdda4","line_width":5}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1261","attributes":{"x":{"type":"field","field":"Year"},"y":{"type":"field","field":"work_percent"},"line_color":"#abdda4","line_alpha":0.1,"line_width":5}},"muted_glyph":{"type":"object","name":"Line","id":"p1262","attributes":{"x":{"type":"field","field":"Year"},"y":{"type":"field","field":"work_percent"},"line_color":"#abdda4","line_alpha":0.2,"line_width":5}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1231","attributes":{"tools":[{"id":"p1266"}]}},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1249","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1251","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1252"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1250"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1243","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1245"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1246"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1244"}}}],"center":[{"type":"object","name":"Grid","id":"p1248","attributes":{"axis":{"id":"p1243"}}},{"type":"object","name":"Grid","id":"p1255","attributes":{"dimension":1,"axis":{"id":"p1249"}}}]}},0,0],[{"type":"object","name":"Figure","id":"p1268","attributes":{"width":400,"height":400,"x_range":{"type":"object","name":"FactorRange","id":"p1278","attributes":{"factors":["2013","2014","2015","2016","2017","2018","2019","2020","2021","2022"]}},"y_range":{"type":"object","name":"DataRange1d","id":"p1270"},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1282"},"y_scale":{"type":"object","name":"LinearScale","id":"p1284"},"title":{"type":"object","name":"Title","id":"p1271","attributes":{"text":"\\uace0\\ub839\\uc778\\uad6c(%):65\\uc138 \\uc774\\uc0c1","text_font":"Consolas","text_font_size":"15pt","align":"center"}},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1306","attributes":{"data_source":{"id":"p1222"},"view":{"type":"object","name":"CDSView","id":"p1307","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1308"}}},"glyph":{"type":"object","name":"Line","id":"p1303","attributes":{"x":{"type":"field","field":"Year"},"y":{"type":"field","field":"nonwork_percent"},"line_color":"#fdae61","line_width":5}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1304","attributes":{"x":{"type":"field","field":"Year"},"y":{"type":"field","field":"nonwork_percent"},"line_color":"#fdae61","line_alpha":0.1,"line_width":5}},"muted_glyph":{"type":"object","name":"Line","id":"p1305","attributes":{"x":{"type":"field","field":"Year"},"y":{"type":"field","field":"nonwork_percent"},"line_color":"#fdae61","line_alpha":0.2,"line_width":5}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1274","attributes":{"tools":[{"id":"p1309"}]}},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1292","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1294","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1295"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1293"}}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1286","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1288"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1289"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1287"}}}],"center":[{"type":"object","name":"Grid","id":"p1291","attributes":{"axis":{"id":"p1286"}}},{"type":"object","name":"Grid","id":"p1298","attributes":{"dimension":1,"axis":{"id":"p1292"}}}]}},0,1]]}}]}},{"type":"object","name":"Row","id":"p1342","attributes":{"children":[{"type":"object","name":"Div","id":"p1340","attributes":{"width":800,"height":100,"text":"*\\ub300\\ud55c\\ubbfc\\uad6d \\uc804\\uccb4 \\uc778\\uad6c\\uac00 100%\\ub77c\\uace0 \\uac00\\uc815\\ud588\\uc744 \\ub54c \\ube44\\uc728&lt;br&gt;*\\uc9c0\\ubc29 \\uc911\\uc18c\\ub3c4\\uc2dc : 50\\ub9cc \\uc774\\ud558\\uc758 \\uc778\\uad6c&lt;br&gt;*\\uc0dd\\uc0b0\\uc778\\uad6c 1%\\ub2f9 \\uc57d 16\\ub9cc\\uba85 \\uac10\\uc18c \\uc0dd\\uc0b0\\uc778\\uad6c\\ub85c\\ub9cc \\uad6c\\uc131\\ub41c \\uc57d 1\\uac1c \\uc911\\uc18c\\ub3c4\\uc2dc \\uc0ad\\uc81c&lt;br&gt;*\\uace0\\ub839\\uc778\\uad6c 1%\\ub2f9 \\uc57d 73\\ub9cc\\uba85 \\uc99d\\uac00 \\uace0\\ub839\\uc778\\uad6c\\ub85c\\ub9cc \\uad6c\\uc131\\ub41c \\uc57d 1\\uac1c \\uc911\\uc18c\\ub3c4\\uc2dc \\uc0dd\\uc131"}}]}}]}}],"callbacks":{"type":"map"}}}';
                                    const render_items = [{"docid":"44eac314-1f24-49fb-a2c3-f01a052dcf85","roots":{"p1343":"4a38d4f5-ce42-496c-97f0-6982f8709dbe"},"root_ids":["p1343"]}];
                                    root.Bokeh.embed.embed_items(docs_json, render_items);
                              }
                              if (root.Bokeh !== undefined) {
                                    embed_document(root);
                              } else {
                                    let attempts = 0;
                                    const timer = setInterval(function(root) {
                                          if (root.Bokeh !== undefined) {
                                                clearInterval(timer);
                                                embed_document(root);
                                          } else {
                                                attempts++;
                                                if (attempts > 100) {
                                                      clearInterval(timer);
                                                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                                                }
                                          }
                                      }, 10, root)
                                  }
                          })(window);
                    });
              };
              if (document.readyState != "loading") fn();
                    else document.addEventListener("DOMContentLoaded", fn);
              }
        )();

</script>

[won-hj]

index.html의 GO 부분에서
onclick="goToPrediction()" 의 함수에 대한 내용이 없어서 어떠한 동작을 하진 않은 것 같아요
동작 확인해보고, get post로 값이 전달 되는지 확인했는데
pastgraph1,2로 테스트했고 post나 get으로 하나씩 할 땐 잘 되는데 둘 다 넣으려 하면 잘 안되네요

또 prediction 아깐 됐는데 지금 안되는지 모르겠어요

근데 무엇보다 나이 입력하는게 미래를 예측하는건줄 모르고 이상한거만 했네요 또.....

[dozzzang]

index.html의 GO 부분에서 onclick="goToPrediction()" 의 함수에 대한 내용이 없어서 어떠한 동작을 하진 않은 것 같아요 동작 확인해보고, get post로 값이 전달 되는지 확인했는데 pastgraph1,2로 테스트했고 post나 get으로 하나씩 할 땐 잘 되는데 둘 다 넣으려 하면 잘 안되네요

또 prediction 아깐 됐는데 지금 안되는지 모르겠어요

근데 무엇보다 나이 입력하는게 미래를 예측하는건줄 모르고 이상한거만 했네요 또.....

수정 완료했습니다.