Upload 14 files

modules/compare_stock_prices.py

@@ -1,5 +1,4 @@
 import io
-import base64
 import matplotlib.pyplot as plt
 import FinanceDataReader as fdr
 import pandas as pd
@@ -7,24 +6,18 @@ from concurrent.futures import ThreadPoolExecutor, as_completed
 
 def get_stock_prices(stock_code, days):
     try:
-        # 주식 데이터를 가져옴
         df = fdr.DataReader(stock_code)
         end_date = pd.to_datetime('today')
-        # 영업일 기준으로 시작 날짜를 계산
         start_date = pd.date_range(end=end_date, periods=days, freq='B')[0]
-        # 지정된 기간 동안의 주식 종가 데이터를 필터링
         df = df[(df.index >= start_date) & (df.index <= end_date)]
         return df['Close']
     except Exception as e:
-        # 데이터 가져오기 실패 시 에러 메시지 출력
         print(f"Failed to fetch data for {stock_code}: {e}")
         return None
 
 def compare_stock_prices(stock_codes, days):
-    # 주식 그래프 생성을 위한 병렬 처리
     stock_prices = {}
     with ThreadPoolExecutor(max_workers=10) as executor:
-        # 각 주식 코드에 대해 get_stock_prices 함수를 비동기로 실행
         futures = {executor.submit(get_stock_prices, stock_code.strip(), int(days)): stock_code.strip() for stock_code in stock_codes.split(',')}
         for future in as_completed(futures):
             stock_code = futures[future]
@@ -33,39 +26,64 @@ def compare_stock_prices(stock_codes, days):
                 if prices is not None:
                     stock_prices[stock_code] = prices
             except Exception as e:
-                # 데이터 가져오기 실패 시 에러 메시지 출력
                 print(f"Failed to fetch data for {stock_code}: {e}")
 
-    # Matplotlib의 기본 설정을 사용하여 백엔드를 설정
     plt.switch_backend('agg')
+    plt.style.use('tableau-colorblind10')  # 테마 변경
 
-    # 각 주식에 대한 그래프를 그림
-    fig, ax = plt.subplots(figsize=(10, 6))
+    fig, ax = plt.subplots(figsize=(8, 4.5))
     for stock_code, prices in stock_prices.items():
-        # 첫 번째 데이터 포인트를 기준으로 상대적 가격 계산
         relative_prices = prices / prices.iloc[0]
-        # 주식 가격을 그래프에 그림
-        ax.plot(prices.index, relative_prices, label=stock_code.upper())  # 주식 코드를 대문자로 표시
+        ax.plot(prices.index, relative_prices, label=stock_code.upper())
     
-    # 위와 오른쪽 테두리 없애기
     ax.spines['top'].set_visible(False)
     ax.spines['right'].set_visible(False)
     
     ax.set_xlabel('Date')
     ax.set_ylabel('Relative Price (Normalized to 1)')
-    # ax.set_title(f'Relative Stock Prices Over the Last {days} Days')
     ax.legend()
     plt.tight_layout()
 
-    # 그래프를 HTML로 변환하여 반환
-    html_graph = io.BytesIO()
-    plt.savefig(html_graph, format='png', dpi=300)
-    html_graph.seek(0)
-    graph_encoded = base64.b64encode(html_graph.getvalue()).decode()
-    graph_html = f'<h3>Relative Stock Prices Over the Last {days} Days</h3><img src="data:image/png;base64,{graph_encoded}"/>'
-    plt.close()  # 리소스 정리
+    svg_graph = io.StringIO()
+    plt.savefig(svg_graph, format='svg')
+    svg_graph.seek(0)
+    svg_data = svg_graph.getvalue()
+    plt.close()
+
+    svg_data = svg_data.replace('<svg ', '<svg width="100%" height="100%" ')
+    svg_data = svg_data.replace('</svg>', '''
+    <defs>
+        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" style="stop-color:rgb(173,216,230);stop-opacity:1" />
+            <stop offset="100%" style="stop-color:rgb(0,191,255);stop-opacity:1" />
+        </linearGradient>
+        <filter id="dropshadow" height="130%">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
+            <feOffset dx="2" dy="2" result="offsetblur"/>
+            <feMerge> 
+                <feMergeNode/>
+                <feMergeNode in="SourceGraphic"/> 
+            </feMerge>
+        </filter>
+    </defs>
+    <style>
+        @keyframes lineAnimation {
+            from {
+                stroke-dasharray: 0, 1000;
+            }
+            to {
+                stroke-dasharray: 1000, 0;
+            }
+        }
+        path {
+            animation: lineAnimation 1s linear forwards;
+        }
+    </style>
+    </svg>''')
+
+    # Replace line color with gradient, add shadow filter, and apply animation
+    svg_data = svg_data.replace('stroke="#1f77b4"', 'stroke="url(#grad1)" filter="url(#dropshadow)"')
 
-    # 주식 가격 데이터를 HTML 테이블로 변환
     html_table = "<h3>Stock Prices Data</h3><div class='table-container'><table>"
     html_table += "<thead><tr><th>Date</th>"
     for stock_code in stock_prices.keys():
@@ -81,6 +99,7 @@ def compare_stock_prices(stock_codes, days):
 
     html_table += "</tbody></table></div>"
 
+    graph_html = f'<h3>Relative Stock Prices Over the Last {days} Days</h3>{svg_data}'
     return graph_html + html_table
 
 # 예시 사용 방법

modules/retirement_planning.py

@@ -62,7 +62,7 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
         <div>
             <div style="margin-bottom: 1.5rem;">
                 <!-- 은퇴 시점의 총 투자액 표시 -->
-                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Total value at retirement</div>
+                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">SAVINGS at retirement</div>
                 <div style="font-size: 1.5rem; font-weight: bold; color: #1c75bc;">
                     <span style='color: #1678fb'>{investment_at_retirement:,.0f}</span>
                 </div>
@@ -72,7 +72,7 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
         <div>
             <div style="margin-bottom: 1.5rem;">
                 <!-- 은퇴 시점의 연간 및 월간 배당 수익 표시 -->
-                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Dividend income at retirement</div>
+                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">DIVIDEND INCOME at retirement</div>
                     <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{annual_dividend_at_retirement:,.0f}</span> 
                     Annual
                     <p></p>
@@ -88,7 +88,7 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
             <thead>
                 <tr>
                     <th>Age</th>
-                    <th>Total</th>
+                    <th>SAVINGS</th>
                     <th>Annual</th>
                     <th>Monthly</th>
                 </tr>

style.css

@@ -159,63 +159,70 @@
     }
 
 }
-
 /* 기본 테이블 스타일 */
 .table-container {
     max-width: 100%;
     overflow-x: auto;
     border: 1px solid #ddd;
-  }
+}
   
-  .table-container table {
+.table-container table {
     width: 100%;
     border-collapse: collapse;
     table-layout: auto;
-  }
+}
   
-  .table-container th,
-  .table-container td {
+.table-container th,
+.table-container td {
     padding: 8px 16px;
     border: 1px solid #ddd;
     background: #fff;
     /* white-space: nowrap; */
     text-align: left;
     text-transform: uppercase;
-  }
+}
   
-  .table-container thead {
+.table-container thead {
     background: #f9f9f9;
-  }
-  
+}
   
-  .table-container th:first-child,
-  .table-container td:first-child {
+.table-container th:first-child,
+.table-container td:first-child {
     position: sticky;
     left: 0;
     background: #f9f9f9;
     z-index: 2;
-  }
+}
   
-  /* 다크 모드 */
-  @media (prefers-color-scheme: dark) {
+/* 마우스 오버 효과 */
+.table-container tr:hover td {
+    background: #f1f1f1;
+}
+  
+/* 다크 모드 */
+@media (prefers-color-scheme: dark) {
     .table-container {
-      border: 1px solid #444;
+        border: 1px solid #444;
     }
   
     .table-container th,
     .table-container td {
-      border: 1px solid #444;
-      background: #333;
-      color: #ccc;
+        border: 1px solid #444;
+        background: #333;
+        color: #ccc;
     }
   
     .table-container thead {
-      background: #444;
+        background: #444;
     }
 
     .table-container th:first-child,
     .table-container td:first-child {
-      background: #444;
+        background: #444;
     }
-  }
-  
+
+    /* 다크 모드 마우스 오버 효과 */
+    .table-container tr:hover td {
+        background: #555;
+    }
+}