complete

app.py

@@ -129,16 +129,15 @@ def chart():
 
 
 # Show Ticker's Title and News's Title
-@app.route('/info', methods=['GET', 'POST'])
-def ticker_title():
-    print("app.py : /info Start ")
-
+@app.route('/info_and_newsNER', methods=['GET', 'POST'])
+def news_info_ner():
     # Javascript 에서 받은 메시지
     ticker = request.args.get('ticker')
     date = request.args.get('date')
     title = request.args.get('title')
     andSymbolInTitle = request.args.get('andSymbolInTitle')
 
+    print(ticker, date, title, andSymbolInTitle)
 
     # Title 에서 '&'로 표시되어 있는데 따로 구별해야 된다.
     # andSymbolInTitle 에서 가져온 '&' 위치 index를 title과 합쳐준다.
@@ -168,14 +167,61 @@ def ticker_title():
     else:
         url = url[0]
 
-    example_embed1 = ticker
-    example_embed2 = "Date: %s" % (date)
-    example_embed3 = "Title: %s" % (title)
-    example_embed4 = url
 
-    return '''
-    newsInit(example_embed1, example_embed2, example_embed3, example_embed4)
-    '''
+
+    #######################################################
+
+    # 뉴스 데이터 위치 찾기 ( in directory )
+    dir = os.path.join('./news', ticker, date, title+'.txt')
+    f = open(dir, 'r')
+    news_data = f.read()
+
+
+    # NER
+    nlp = spacy.load("en_core_web_sm")
+    doc = nlp(news_data) # News Data Analysis
+
+
+    # 필요없는 용어들 버리기
+    print("=====================================================================")
+
+    ents = {'text': [], 'start_char': [], 'end_char': [], 'label_': []}
+    for ent in doc.ents:
+        # print(ent.text, ent.start_char, ent.end_char, ent.label_)
+
+        # 버리는 용어들
+        if ent.label_ == 'DATE':
+            continue
+        if ent.label_ == 'TIME':
+            continue
+        if ent.label_ == 'CARDINAL':
+            continue
+        if ent.label_ == 'MONEY':
+            continue
+        if ent.label_ == 'PERCENT':
+            continue
+        if ent.label_ == 'ORDINAL':
+            continue
+        if ent.label_ == 'PRODUCT':
+            continue
+            
+
+        print(ent.text, ent.start_char, ent.end_char, ent.label_)
+
+        ents['text'].append(ent.text)
+        ents['start_char'].append(ent.start_char)
+        ents['end_char'].append(ent.end_char)
+        ents['label_'].append(ent.label_)
+
+    print("=====================================================================")
+
+    ents['news'] = news_data
+
+    # ents = {'text': [], 'start_char': [], 'end_char': [], 'label_': [], 'news': []}
+
+    print("ents : ", ents)
+
+    return jsonify(ticker=ticker, date=date, title=title, url=url, ents=ents)
     # return render_template('news.html', embed1=example_embed1, embed2=example_embed2, embed3=example_embed3, embed4=example_embed4)
 
 

static/css/cal.css

@@ -0,0 +1,135 @@
+/*
+    [ CSS 기본 문법 ]
+    AND 연산자 : 선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그의 스타일을 적용
+    OR 연산자 : 두 선택자 중 하나라도 만족시 적용되는 조건 (쉼표를 통해 두 선택자 중 하나라도 만족시 적용)
+
+
+    ".a .b .c" : a클래스 내부의 b클래스 내부의 c클래스 요소에만 스타일 적용
+    ".a.b.c" : 클래스 속성 내에 a, b, c 모두 설정된 모든 요소들을 선택
+    ".a, .b, .c" : 일치하는 모든 요스들을 선택
+*/
+
+
+.sec_cal {
+    width: 360px; /* 속성의 요소 너비 */
+    margin: 0 auto;
+    font-family: "NotoSansR";
+}
+
+/* ".a .b .c" : a클래스 내부의 b클래스 내부의 c클래스 요소에만 스타일 적용 */
+.sec_cal .cal_nav {
+    display: flex;
+    justify-content: center; /* 가로 축을 기준으로 좌우에 대한 정렬 */
+    align-items: center; /* 세로 축을 기준으로 정렬 위아래에 대한 정렬 */
+    font-weight: 700; /* 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시 */
+    font-size: 48px; /* 폰트(font)의 크기를 지정 */
+    line-height: 78px; /* Sets the height of a line box (줄간격) */
+}
+
+.sec_cal .cal_nav .year-month {
+    width: 300px; /* 속성의 요소 너비 */
+    text-align: center;
+    line-height: 1;
+}
+
+.sec_cal .cal_nav .nav {
+    display: flex;
+    border: 1px solid #333333;
+    border-radius: 5px;
+}
+
+.sec_cal .cal_nav .go-prev,
+.sec_cal .cal_nav .go-next {
+    display: block;
+    width: 50px; /* 속성의 요소 너비 */
+    height: 78px;
+    font-size: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sec_cal .cal_nav .go-prev::before,
+.sec_cal .cal_nav .go-next::before {
+    content: "";
+    display: block;
+    width: 20px; /* 속성의 요소 너비 */
+    height: 20px;
+    border: 3px solid #000;
+    border-width: 3px 3px 0 0;
+    transition: border 0.1s;
+}
+
+.sec_cal .cal_nav .go-prev:hover::before,
+.sec_cal .cal_nav .go-next:hover::before {
+    border-color: #ed2a61;
+}
+
+.sec_cal .cal_nav .go-prev::before {
+    transform: rotate(-135deg);
+}
+
+.sec_cal .cal_nav .go-next::before {
+    transform: rotate(45deg);
+}
+
+.sec_cal .cal_wrap {
+    padding-top: 40px;
+    position: relative;
+    margin: 0 auto;
+}
+
+.sec_cal .cal_wrap .days {
+    display: flex;
+    margin-bottom: 20px; /* 요소 하단의 margin 하단의 영역을 설정 (여유 공간 설정) */
+    padding-bottom: 20px; /* 요소의 바닥에서 패딩 영역의 높이를 설정 */
+    border-bottom: 1px solid #ddd;
+}
+
+.sec_cal .cal_wrap::after {
+    top: 368px;
+}
+
+.sec_cal .cal_wrap .day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(100% / 7); /* 속성의 요소 너비 */
+    text-align: left;
+    color: #999;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 5px;
+}
+
+
+/* <div class="day current today">1</div> */
+.current.today {
+    /* background: rgb(3, 179, 65); */
+    background: rgb(242 242 242);
+}
+
+.sec_cal .cal_wrap .dates {
+    display: flex;
+    flex-flow: wrap;
+    height: 290px;
+}
+
+/* Pseduo-Classes ( 그 중에서 Structural pseudo-classes ) */
+.sec_cal .cal_wrap .day:nth-child(7n -1) {
+    color: #3c6ffa;
+}
+
+/* Pseduo-Classes ( 그 중에서 Structural pseudo-classes ) */
+.sec_cal .cal_wrap .day:nth-child(7n) {
+    color: #ed2a61;
+}
+
+.sec_cal .cal_wrap .day.disable {
+    color: #ddd;
+}
+
+
+
+
+

static/css/style.css

@@ -10,123 +10,256 @@
 */
 
 
-.sec_cal {
-    width: 360px; /* 속성의 요소 너비 */
+/* Stocks 관련 */
+
+/* .sec_cal { */
+#nasdaq-table-container .stocks_wrap {
+    width: 580px; /* 속성의 요소 너비 */
     margin: 0 auto;
     font-family: "NotoSansR";
 }
 
-/* ".a .b .c" : a클래스 내부의 b클래스 내부의 c클래스 요소에만 스타일 적용 */
-.sec_cal .cal_nav {
-    display: flex;
-    justify-content: center; /* 가로 축을 기준으로 좌우에 대한 정렬 */
-    align-items: center; /* 세로 축을 기준으로 정렬 위아래에 대한 정렬 */
-    font-weight: 700; /* 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시 */
-    font-size: 48px; /* 폰트(font)의 크기를 지정 */
-    line-height: 78px; /* Sets the height of a line box (줄간격) */
-}
 
-.sec_cal .cal_nav .year-month {
-    width: 300px; /* 속성의 요소 너비 */
-    text-align: center;
-    line-height: 1;
+/* .sec_cal .cal_wrap { */
+#nasdaq-table-container .stocks_wrap {
+    padding-top: 40px;
+    position: relative;
+    margin: 0 auto;
 }
 
-.sec_cal .cal_nav .nav {
+
+/* .sec_cal .cal_wrap .days { */
+#nasdaq-table-container .stocks_wrap .stocks_columns {
     display: flex;
-    border: 1px solid #333333;
-    border-radius: 5px;
+    margin-bottom: 20px; /* 요소 하단의 margin 하단의 영역을 설정 */
+    padding-bottom: 20px; /* 요소의 바닥에서 패딩 영역의 높이를 설정 */
+    border-bottom: 1px solid #ddd;
 }
 
-.sec_cal .cal_nav .go-prev,
-.sec_cal .cal_nav .go-next {
-    display: block;
-    width: 50px; /* 속성의 요소 너비 */
-    height: 78px;
-    font-size: 0;
+
+/* .sec_cal .cal_wrap .day { */
+#nasdaq-table-container .stocks_wrap .stocks_columns .column,
+#nasdaq-table-container .stocks_wrap .stocks .stock {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    width: 50px;
+    text-align: left;
+    color: #999;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 5px; /* rounds the corners of an element's outer border edge. */
 }
 
-.sec_cal .cal_nav .go-prev::before,
-.sec_cal .cal_nav .go-next::before {
-    content: "";
-    display: block;
-    width: 20px; /* 속성의 요소 너비 */
-    height: 20px;
-    border: 3px solid #000;
-    border-width: 3px 3px 0 0;
-    transition: border 0.1s;
-}
 
-.sec_cal .cal_nav .go-prev:hover::before,
-.sec_cal .cal_nav .go-next:hover::before {
-    border-color: #ed2a61;
-}
 
-.sec_cal .cal_nav .go-prev::before {
-    transform: rotate(-135deg);
+
+#nasdaq-table-container .stocks_wrap .stocks_columns .column {
+    font-size: 17px;
+    /* width: 70px; */
+}
+#nasdaq-table-container .stocks_wrap .stocks .stock {
+    font-size: 13px;
+    /* width: 35px; */
 }
 
-.sec_cal .cal_nav .go-next::before {
-    transform: rotate(45deg);
+
+#nasdaq-table-container .name {
+    margin-right: 30px;
+    margin-left: 30px;
+}
+#nasdaq-table-container .sector, .industry{
+    margin-right: 18px;
+    margin-left: 48px;
+}
+#nasdaq-table-container .dff, .open, .close {
+    margin-right: 5px;
+    margin-left: 5px;
 }
 
-.sec_cal .cal_wrap {
-    padding-top: 40px;
-    position: relative;
-    margin: 0 auto;
+#nasdaq-table-container .stocks_wrap .stocks .ticker {
+    color: #04b70d;
+    text-decoration: underline;
+}
+#nasdaq-table-container .stocks_wrap .stocks .up {
+    color: #ed2a61;
+}
+#nasdaq-table-container .stocks_wrap .stocks .down {
+    color: #3c6ffa;
 }
 
-.sec_cal .cal_wrap .days {
+
+
+/* .sec_cal .cal_wrap .dates { */
+#nasdaq-table-container .stocks_wrap .stocks {
     display: flex;
-    margin-bottom: 20px; /* 요소 하단의 margin 하단의 영역을 설정 (여유 공간 설정) */
-    padding-bottom: 20px; /* 요소의 바닥에서 패딩 영역의 높이를 설정 */
-    border-bottom: 1px solid #ddd;
+    flex-flow: wrap;
+    height: 5000px; /* 높이 간격 */
 }
 
-.sec_cal .cal_wrap::after {
-    top: 368px;
+/* h1 태그 부분 */
+#nasdaq-table-container .gohome {
+    text-decoration: none;
 }
 
-.sec_cal .cal_wrap .day {
-    display: flex;
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+    위 : nasdaq-table-container 관련 CSS
+    아래 : chart-container 관련 CSS
+*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* id : "#" */
+#chart-container .myChart-container {
+    /* 속성의 요소 너비를 지정 */
+    width: 60vw;
+
+    /* 속성의 요소의 높이를 지정 */
+    height: 30vh;
+
+    /*
+        [ margin 태그 ]
+        margin-top (상단 여백)
+        margin-right (오른쪽 여백)
+        margin-bottom (아래 여백)
+        margin-left (왼쪽 여백)
+
+        지정값은 px, cm, %로 지정할 수 있다.
+        음수값도 지정 가능(ex. -10px)
+
+        * 4면 한꺼번에 margin 지정하기
+            ex) margin: 5px 7px 3px 0px;
+                (위, 오른쪽, 아래, 왼쪽)
+        * 4면이 모두 같을 때 margin 지정하기
+            ex) margin: 5px;
+        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
+            ex) margin: 5px 10px 0px;
+        * 위&아래, 오른쪽&왼쪽 margin 지정하기
+            ex) margin: 5px 10px;
+        * margin 자동 지정하기
+            ex) margin: auto 0;
+                (위아래 값이 자동, 좌우가 0px)
+            ex) margin-left: auto;
+
+    */
+    margin: 40px auto;
+    padding-bottom: 13%;
+}
+
+#chart-container .table {
+    /* 
+        [ align-items 태그 ]
+        flex-box 요소의 수직 방향 정렬 방식을 설정
+        ex. flex-start, flex-end, center        
+    */
     align-items: center;
+
+    /* 
+        [ justify-content 태그 ]
+        flex-box 요소의 수평 방향 정렬 방식을 설정
+        ex. flex-start, flex-end, center        
+    */
     justify-content: center;
-    width: calc(100% / 7); /* 속성의 요소 너비 */
-    text-align: left;
-    color: #999;
-    font-size: 12px;
+
+
+    /*
+        [ margin 태그 ]
+        margin-top (상단 여백)
+        margin-right (오른쪽 여백)
+        margin-bottom (아래 여백)
+        margin-left (왼쪽 여백)
+
+        지정값은 px, cm, %로 지정할 수 있다.
+        음수값도 지정 가능(ex. -10px)
+
+        * 4면 한꺼번에 margin 지정하기
+            ex) margin: 5px 7px 3px 0px;
+                (위, 오른쪽, 아래, 왼쪽)
+        * 4면이 모두 같을 때 margin 지정하기
+            ex) margin: 5px;
+        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
+            ex) margin: 5px 10px 0px;
+        * 위&아래, 오른쪽&왼쪽 margin 지정하기
+            ex) margin: 5px 10px;
+        * margin 자동 지정하기
+            ex) margin: auto 0;
+                (위아래 값이 자동, 좌우가 0px)
+            ex) margin-left: auto;
+
+    */
+    margin: 20px auto;
+
+
+    /*
+        [ text-align 태그 ]
+        텍스트의 정렬 방향을 설정
+
+        left: 왼쪽 정렬
+        right: 오른쪽 정렬
+        center: 중앙 정렬
+        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
+    */
     text-align: center;
-    border-radius: 5px;
+
+
+    padding-top: 50px;
 }
 
 
-/* <div class="day current today">1</div> */
-.current.today {
-    /* background: rgb(3, 179, 65); */
-    background: rgb(242 242 242);
+#chart-container .table .title-width {
+    width: 10px;
+    text-align: center;
 }
 
-.sec_cal .cal_wrap .dates {
-    display: flex;
-    flex-flow: wrap;
-    height: 290px;
+
+#chart-container .table .table-title {
+    font-size: 50px;
 }
 
-/* Pseduo-Classes ( 그 중에서 Structural pseudo-classes ) */
-.sec_cal .cal_wrap .day:nth-child(7n -1) {
-    color: #3c6ffa;
+
+
+
+
+
+
+
+/* h1, h2 태그 부분 */
+#chart-container .gohome, .goticker {
+    text-decoration: none;
 }
 
-/* Pseduo-Classes ( 그 중에서 Structural pseudo-classes ) */
-.sec_cal .cal_wrap .day:nth-child(7n) {
+
+#chart-container .table .news-table .news.diff.up {
     color: #ed2a61;
 }
-
-.sec_cal .cal_wrap .day.disable {
-    color: #ddd;
+#chart-container .table .news-table .news.diff.down {
+    color: #3c6ffa;
 }
 
 
@@ -143,27 +276,9 @@
 
 
 
-/* Model 관련 */
 
-/* id : "#" */
-#model {
-    text-align: center;
-}
 
-/* id : "#" */
-#text-input {
-    width: calc(100% / 2); /* 속성의 요소 너비 */
-    height: 78px;
-    word-break: break-all;
-}
 
-.text-output {
-    width: calc(100% / 2); /* 속성의 요소 너비 */
-    min-height: 1.2rem;
-    margin: 1rem;
-    border: 0.5px solid grey;
-    padding: 0.5rem 1rem;
-}
 
 
 
@@ -174,6 +289,10 @@
 
 
 
+/*
+    위 : chart-container 관련 CSS
+    아래 : news-container 관련 CSS
+*/
 
 
 
@@ -182,106 +301,228 @@
 
 
 
-/* Stocks 관련 */
 
 
-/* .sec_cal { */
-.stocks_wrap {
-    width: 580px; /* 속성의 요소 너비 */
-    margin: 0 auto;
-    font-family: "NotoSansR";
-}
 
 
-/* .sec_cal .cal_wrap { */
-.stocks_wrap {
-    padding-top: 40px;
-    position: relative;
-    margin: 0 auto;
-}
 
 
-/* .sec_cal .cal_wrap .days { */
-.stocks_wrap .stocks_columns {
-    display: flex;
-    margin-bottom: 20px; /* 요소 하단의 margin 하단의 영역을 설정 */
-    padding-bottom: 20px; /* 요소의 바닥에서 패딩 영역의 높이를 설정 */
-    border-bottom: 1px solid #ddd;
-}
 
 
-/* .sec_cal .cal_wrap .day { */
-.stocks_wrap .stocks_columns .column,
-.stocks_wrap .stocks .stock {
-    display: flex;
+
+
+
+
+
+
+
+
+
+
+/* ner 관련 */
+
+#news-container .ner-box {
+    width: calc(92%); /* 속성의 요소 너비를 지정 */
+    height: 500px; /* 속성의 요소의 높이를 지정 */
+
+
+    /* 
+        [ align-items 태그 ]
+        flex-box 요소의 수직 방향 정렬 방식을 설정
+        ex. flex-start, flex-end, center        
+    */
     align-items: center;
+
+    /* 
+        [ justify-content 태그 ]
+        flex-box 요소의 수평 방향 정렬 방식을 설정
+        ex. flex-start, flex-end, center        
+    */
     justify-content: center;
-    width: 50px;
-    text-align: left;
-    color: #999;
-    font-size: 12px;
+
+    /*
+        [ text-align 태그 ]
+        텍스트의 정렬 방향을 설정
+
+        left: 왼쪽 정렬
+        right: 오른쪽 정렬
+        center: 중앙 정렬
+        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
+    */
     text-align: center;
-    border-radius: 5px; /* rounds the corners of an element's outer border edge. */
-}
 
 
+    /*
+        [ margin 태그 ]
+        margin-top (상단 여백)
+        margin-right (오른쪽 여백)
+        margin-bottom (아래 여백)
+        margin-left (왼쪽 여백)
+
+        지정값은 px, cm, %로 지정할 수 있다.
+        음수값도 지정 가능(ex. -10px)
+
+        * 4면 한꺼번에 margin 지정하기
+            ex) margin: 5px 7px 3px 0px;
+                (위, 오른쪽, 아래, 왼쪽)
+        * 4면이 모두 같을 때 margin 지정하기
+            ex) margin: 5px;
+        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
+            ex) margin: 5px 10px 0px;
+        * 위&아래, 오른쪽&왼쪽 margin 지정하기
+            ex) margin: 5px 10px;
+        * margin 자동 지정하기
+            ex) margin: auto 0;
+                (위아래 값이 자동, 좌우가 0px)
+            ex) margin-left: auto;
+
+    */
+    margin: 1rem;
 
 
-.stocks_wrap .stocks_columns .column {
-    font-size: 17px;
-    /* width: 70px; */
+    min-height: 1.2rem;
+    border: 0.5px solid grey;
+    padding: 0.5rem 1rem;
 }
-.stocks_wrap .stocks .stock {
-    font-size: 13px;
-    /* width: 35px; */
+
+
+
+/* NER label_ */
+#news-container .entities .entity_person {
+    background-color: #aa9cfc;
 }
 
+#news-container .entities .entity_org {
+    background-color: #7aecec;
+}
 
-.name {
-    margin-right: 30px;
-    margin-left: 30px;
+#news-container .entities .entity_fac {
+    background-color: #9cc9cc;
 }
-.sector, .industry{
-    margin-right: 18px;
-    margin-left: 48px;
+
+#news-container .entities .entity_gpe {
+    background-color: #feca74;
 }
-.dff, .open, .close {
-    margin-right: 5px;
-    margin-left: 5px;
+
+#news-container .entities .entity_product {
+    background-color: #bfeeb7;
 }
 
-.stocks_wrap .stocks .ticker {
-    color: #04b70d;
-    text-decoration: underline;
+#news-container .entities .none {
+    background-color: transparent;
 }
-.stocks_wrap .stocks .up {
-    color: #ed2a61;
+
+/* 마우스 올렸을 때, 보이게 하는 것 */
+#news-container .entities .show-label {
+    display: none;
 }
-.stocks_wrap .stocks .down {
-    color: #3c6ffa;
+
+#news-container .entities .entity_person:hover .show-label,
+#news-container .entities .entity_org:hover .show-label,
+#news-container .entities .entity_fac:hover .show-label,
+#news-container .entities .entity_gpe:hover .show-label,
+#news-container .entities .entity_product:hover .show-label {
+    display: block;
 }
 
 
 
-/* .sec_cal .cal_wrap .dates { */
-.stocks_wrap .stocks {
-    display: flex;
-    flex-flow: wrap;
-    height: 5000px; /* 높이 간격 */
+
+
+/* Model 관련 */
+
+/* id : "#" */
+#news-container #model {
+    /*
+        [ text-align 태그 ]
+        텍스트의 정렬 방향을 설정
+
+        left: 왼쪽 정렬
+        right: 오른쪽 정렬
+        center: 중앙 정렬
+        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
+    */
+    text-align: center;
+}
+
+/* id : "#" */
+#news-container #text-input {
+    width: calc(100% / 2); /* 속성의 요소 너비 */
+    height: 78px; /* 속성의 요소의 높이를 지정 */
+    word-break: break-all;
 }
 
 
+#news-container .text-output {
+    width: calc(100% * (2/3)); /* 속성의 요소 너비 */
+    min-height: 10rem;
 
 
 
+    /*
+        [ margin 태그 ]
+        margin-top (상단 여백)
+        margin-right (오른쪽 여백)
+        margin-bottom (아래 여백)
+        margin-left (왼쪽 여백)
 
+        지정값은 px, cm, %로 지정할 수 있다.
+        음수값도 지정 가능(ex. -10px)
 
+        * 4면 한꺼번에 margin 지정하기
+            ex) margin: 5px 7px 3px 0px;
+                (위, 오른쪽, 아래, 왼쪽)
+        * 4면이 모두 같을 때 margin 지정하기
+            ex) margin: 5px;
+        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
+            ex) margin: 5px 10px 0px;
+        * 위&아래, 오른쪽&왼쪽 margin 지정하기
+            ex) margin: 5px 10px;
+        * margin 자동 지정하기
+            ex) margin: auto 0;
+                (위아래 값이 자동, 좌우가 0px)
+            ex) margin-left: auto;
 
+    */
+    margin: 20px auto;
 
+    /* 
+        [ border 태그 ]
+        해당 태그의 테두리를 설정
+        width - style - color
+        border-width - border-style - border-color
 
+        border-width : 테두리의 두께로, 주로 px 단위를 사용
+        border-style : 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재
+        border-color : 테두리의 색상으로, 값은 color 속성의 포맷을 사용
+    */
+    border: 0.5px solid grey;
 
+    /*
+        [ padding 태그 ]
+        지정값은 px, cm, %로 지정할 수 있다.
+        margin은 음수값이 지정 가능하지만 padding은 음수값 지정이 안된다.
+        
+        padding 태그와 비슷한 태그
+        : padding-top, padding-right, padding-bottom, padding-left
+
+        * 4면 한꺼번에 padding 지정하기
+            ex) padding: 5px, 7px, 3px, 0px;
+                (위, 오른쪽, 아래, 왼쪽)
+        * 4면 모두 같을 때 padding 지정하기
+            ex) padding: 5px;
+        * 위, 오른쪽&왼쪽, 아래 padding 지정하기
+            ex) padding: 5px 10px 0px;
+        * 위&아래, 오른쪽&왼쪽 padding 지정하기
+            ex) padding: 5px, 10px;
+
+    */
+    padding: 0.5rem 1rem;
+}
 
-/* h1 태그 부분 */
-.gohome {
+
+
+/* h1, h2 태그 부분 */
+#news-container .gohome, .goticker {
     text-decoration: none;
 }

static/js/index.js

@@ -137,9 +137,6 @@ function chartInit(ticker) {
 
     // Javascript -> Flask (Python) -> Javascript
     let [chart_data, news_articles] = sendAjax_sync_about_chartData_and_newsArticles("/chart", {"ticker": ticker}, "json", handle_two_return);
-    // console.log(chart_data, news_articles);
-    // console.log(chart_data);
-    // console.log(Object.keys(chart_data.Close));
 
 
     // x축과 data 설정
@@ -178,8 +175,8 @@ function chartInit(ticker) {
     // Javascript를 이용해 HTML에 동적으로 태그 추가
 
     // a 태그 onclick 적용
-    execution_function = String('javascript:chartInit(\''.concat(ticker, '\');'));
-    const goTicker = document.querySelector('.goticker');
+    var execution_function = `javascript:chartInit('${ticker}')`;
+    const goTicker = document.querySelector('#chart-container .goticker');
     goTicker.setAttribute('href', execution_function);
 
     //////////////////////////////////////////////////////////////////
@@ -235,15 +232,23 @@ function chartInit(ticker) {
     }
     // console.log(key_list);
 
+
+
+
+
+
+    var link_list_idx = 0;
+
     // List 안의 value를 뽑을 때, (Python) => for item in list:
     Object.keys(sorted_news).forEach(key => {
-        var idx = key_list.indexOf(String(key));
+        var date_idx_in_key_list = key_list.indexOf(String(key));
+        // console.log(key, key_list, date_idx_in_key_list);
 
-        if (idx != -1) { var diff = ((open_list[idx]-close_list[idx-1])/(open_list[idx]) * 100.0).toFixed(2); }
+        if (date_idx_in_key_list != -1) { var diff = ((open_list[date_idx_in_key_list]-close_list[date_idx_in_key_list-1])/(open_list[date_idx_in_key_list]) * 100.0).toFixed(2); }
         else { var diff = '.'; }
 
         if (diff == '.') {
-            var diff_html = '<th class="news diff">' + diff + '</th>';
+            var diff_html = '<th class="news diff">0.0 %</th>';
         }
         else if (diff > 0) {
             var diff_html = '<th class="news diff up">+' + diff + ' %</th>';
@@ -251,12 +256,11 @@ function chartInit(ticker) {
         else {
             var diff_html = '<th class="news diff down">' + diff + ' %</th>';
         }
-        var html = '<tr align="center" bgcolor="white"><th>+</th><th>' + key + '</th>' + diff_html + '<td style="text-align: left;">';
+        var html = `<tr align="center" bgcolor="white"><th>+</th><th>${key}</th>${diff_html}<td style="text-align: left;">`;
 
         for (var i = 0; i < sorted_news[key].length; i++) {
             var title = sorted_news[key][i].substring(0, sorted_news[key][i].length-4);
             var sendTitle = title; // Javascript -> Python 보내기 위한 title
-            console.log("title : ", title);
 
             
             // title에서 & 표시가 있을 수 있음.
@@ -274,26 +278,43 @@ function chartInit(ticker) {
                 // console.log(sendTitle);
                 andSymbolInTitle.push(idx + andSymbolInTitle.length);
             }
-            // console.log("title : ", title);
-            // console.log("sendTitle : ", sendTitle);
-            // console.log("andSymbolInTitle : ", andSymbolInTitle);
 
-            var link = String('"/info?ticker='.concat(ticker, '&date=', key, '&title=', sendTitle, '&andSymbolInTitle=', andSymbolInTitle, '"'));
+
+            var link = String(`/info_and_newsNER?ticker=${ticker}&date=${key}&title=${sendTitle}&andSymbolInTitle=${andSymbolInTitle}`);
             // console.log(link);
-            
-            var execution_function = String(`javascript:newsInit(\'${ticker}\',\'${key}\',\'${sendTitle}\',\'${andSymbolInTitle}\');`);
+            linkList.push(link);
+
+            var execution_function = String(`javascript:getData(linkList[${link_list_idx}]);`);
             // console.log("execution_function : ", execution_function);
-            html = html + '<a href=' + link + '>' + title + '</a><br>';
+            html = html + '<a href="' + execution_function + '">' + title + '</a><br>';
+            link_list_idx = link_list_idx + 1;
         }
         html = html + '</td>';
-
         news_table.innerHTML = news_table.innerHTML + html;
     });
 }
 
 
 
+linkList = [];
+async function getData(link) {
+    try {
+        console.log("link : ", link);
 
+        await $.getJSON(link, function(data)
+        {
+            console.log("ticker : ", data.ticker);
+            console.log("date : ", data.date);
+            console.log("title : ", data.title);
+            console.log("url : ", data.url);
+            console.log("ents : ", data.ents);
+    
+            newsInit(data.ticker, data.date, data.title, data.url, data.ents);
+        });
+    } catch (error) {
+        console.log("Error : ", error);
+    }
+}
 
 
 
@@ -311,23 +332,16 @@ function chartInit(ticker) {
  * 
  * 
  */
-function newsInit(ticker1, date1, title1, andSymbolInTitle1) {
-    console.log("newsInit start");
+function newsInit(ticker, date, title, url, ents) {
+    console.log("newsInit start !!!");
     // HTML 수정
     $("#nasdaq-table-container").hide();
     $("#chart-container").hide();
     $("#news-container").show();
 
-    spaceIndex_inTitle = andSymbolInTitle1.split(',');
-    var list_length = spaceIndex_inTitle.length;
-    for (var i=0; i<list_length; i++) {
-        title1 = title1.substring(0, i) + ' ' + title1.substring(i, title1.length);
-    }
-
-    console.log(ticker1);
-    console.log(date1);
-    console.log(title1);
-    console.log(andSymbolInTitle1);
+    console.log(ticker);
+    console.log(date);
+    console.log(title);
 
 
 
@@ -335,29 +349,34 @@ function newsInit(ticker1, date1, title1, andSymbolInTitle1) {
     
     // Javascript를 이용해 HTML에 동적으로 태그 추가
 
+    document.querySelector('#news-container .goticker .tickerName').textContent = "Ticker : " + ticker;
+    document.querySelector('#news-container .titleDate').textContent = "Date : " + date;
+    document.querySelector('#news-container .titleName').textContent = "Article : " + title;
+    document.querySelector('#news-container .newsURL .input-News-URL').textContent = "URL : " + url;
 
 
     // a 태그 onclick 적용
-    execution_function = String('javascript:chartInit(\''.concat(ticker, '\');'));
-    const goTicker = document.querySelector('.goticker');
+    var execution_function = `javascript:chartInit('${ticker}')`;
+    const goTicker = document.querySelector('#news-container .goticker');
+    console.log(goTicker);
     goTicker.setAttribute('href', execution_function);
 
 
     // a 태그에 URL 적용
-    const addURL = document.querySelector('.NewsURL .input-News-URL');
+    const addURL = document.querySelector('.newsURL .input-News-URL');
     addURL.setAttribute('href', url);
 
 
     // 모델에서 질문 예시 Ticker에 알맞게 작성하기
-    const example_value = document.querySelector('#model .text-form #text-input');
+    const model_input_example = document.querySelector('#model .text-form #text-input');
     example = "Why did " + ticker + "'s stock go down?";
-    example_value.setAttribute('value', example);
+    model_input_example.setAttribute('value', example);
 
 
     //////////////////////////////////////////////////////////////////////
     // NER 관련
 
-    ents = sendAjax_sync('/ner', {'ticker': ticker, 'date': date, 'title': title}, dataType="json", handle=handle_one_return);
+    // ents = sendAjax_sync('/ner', {'ticker': ticker, 'date': date, 'title': title}, dataType="json", handle=handle_one_return);
     // ents = {'text': [], 'start_char': [], 'end_char': [], 'label_': [], 'news': []}
     console.log(ents);
 

static/js/utils.js

@@ -42,11 +42,8 @@ function sendAjax(url, data, handle) {
  */
 function sendAjax_sync(url, data, dataType, handle) {
     /*
-        jQuery.ajax(url, [, settings])
-
+        jQuery.ajax(url, [, settings]) => Synchronous ( 동기식 : 코드 순서대로 진행 )
         jQuery.getJSON => Asynchronous (비동기식)
-        
-        Synchronous => 동기식 : 코드 순서대로 진행
     */
     var search_var;
     $.ajax(url=url, settings={data: data, dataType: dataType, async: false,

templates/index.html

@@ -138,10 +138,10 @@
         <!-- block = show, none = hide -->
         <div id="news-container" style="display: block">
             <h1><a class="gohome" style="text-decoration: none;" href="/">Stock News Summaries AI</a></h1>
-            <a class="goticker" style="text-decoration: none;"><h2 class="tickerName">{{embed1}}</h2></a>
-            <h3 class="titleDate">{{embed2}}</h2>
-            <h3 class="titleName">{{embed3}}</h2>
-            <h3 class="NewsURL">URL: <a class="input-News-URL" target=”_blank”>{{embed4}}</a></h2>
+            <a class="goticker" style="text-decoration: none;"><h2 class="tickerName"></h2></a>
+            <h3 class="titleDate"></h2>
+            <h3 class="titleName"></h2>
+            <h3 class="newsURL"><a class="input-News-URL" target=”_blank”></a></h2>
 
             <!-- named entity recognition (NER) -->
             <figure style="margin-bottom: 6rem">