New tab stock ethan (#69)

* Add statsmodels to our environment, closes #68

* Add a new tab named stock including beta, regression and trend plot, closes #68

Author: ethanfang08

environment.yml

@@ -14,6 +14,7 @@ dependencies:
   - jupyterlab=4.2.6 
   - pip=24.3  
   - pyecharts=2.0.8
+  - statsmodels=0.14.4
   - pip:
       - dash_bootstrap_components==1.7.1
       - dash-ag-grid

requirements.txt

@@ -8,4 +8,4 @@ dash_bootstrap_components==1.7.1
 gunicorn==23.0.0
 requests==2.32.3
 dash-ag-grid==31.3.0
-
+statsmodels==0.14.4

src/callbacks.py

@@ -77,6 +77,42 @@ def update_intraday_bar(selected_sectors):
             style={"border": "0", "width": "100%", "height": "350px"}
         )
 
+    # Callback for updating regression graph based on stock and time range selection
+    @app.callback(
+        Output('regression-graph-container', 'children'),
+        [Input('stock-dropdown', 'value'),
+         Input('date-picker-range', 'start_date'),
+         Input('date-picker-range', 'end_date')]
+    )
+    def update_regression_graph(selected_stock, start_date, end_date):
+        """Updates the regession and beta value based on selected stock and date range"""
+        # 调用 render_regression_graph 函数，生成图表
+        regression_fig_html = render_regression_graph(selected_stock, start_date, end_date)
+    
+        # 将生成的图表 HTML 结果嵌入 Iframe 中
+        return html.Iframe(
+            srcDoc=regression_fig_html, style={"border": "0", "width": "100%", "height": "600px"}
+        )
+
+    # Callback for updating trend graph based on stock and time range selection
+    @app.callback(
+        Output('price-trend-graph-container', 'children'),
+        [Input('stock-dropdown', 'value'),
+         Input('date-picker-range', 'start_date'),
+         Input('date-picker-range', 'end_date')]
+    )
+    def update_trend_graph(selected_stock, start_date, end_date):
+        """Updates the trend graph based on selected stock and date range"""
+        # 调用 render_trend_graph 函数，生成图表
+        price_trend_fig_html = render_trend_graph(selected_stock, start_date, end_date)
+    
+        # 将生成的图表 HTML 结果嵌入 Iframe 中
+        return html.Iframe(
+            srcDoc=price_trend_fig_html, style={"border": "0", "width": "100%", "height": "600px"}
+        )
+    
+
+    
 
     # Callback: Update data every n seconds and store it in dcc.Store (requires adding dcc.Store(id="data-store") in the layout)
     @app.callback(

src/layout.py

@@ -2,6 +2,7 @@
 from dash import dcc, html
 from dash_ag_grid import AgGrid
 from src.plotting import *
+from src.qqqm_data import getQQQMHolding
 
 # Modify the update frequency selection dropdown: Change the options to '3 seconds', '10 seconds', and 'No update', 
 # with the default value set to 'No update'
@@ -136,6 +137,27 @@
     ]
 )
 
+# Components for stock analysis
+regression_graph = html.Div(
+    id="regression-graph-container", children=[
+        html.Iframe(
+            srcDoc=render_regression_graph(selected_stock='AAPL', start_date='2024-01-01', end_date='2025-01-01'), 
+            style={"border": "0", "width": "100%", "height": "350px"}
+        )
+    ]
+)
+
+price_trend_graph = html.Div(
+    id="price-trend-graph-container", children=[
+        html.Iframe(
+            srcDoc=render_trend_graph(selected_stock='AAPL', start_date='2024-01-01', end_date='2025-01-01'), 
+            style={"border": "0", "width": "100%", "height": "350px"}
+        )
+    ]
+)
+
+
+
 
 # Filter Form (with ticker and name input)
 filter_form = dbc.Row(
@@ -234,6 +256,13 @@
     n_intervals=0
 )
 
+nasdaq100_tickers = getQQQMHolding()
+# 生成下拉菜单选项
+stock_dropdown_options = [
+    {'label': nasdaq100_tickers.iloc[i]['Name'], 'value': nasdaq100_tickers.iloc[i]['Ticker']}
+    for i in range(len(nasdaq100_tickers))
+]
+
 tabs = dbc.Tabs([
     dbc.Tab(
         [
@@ -248,6 +277,39 @@
         ],
         label="Overview"
     ),
+
+    dbc.Tab(
+        [
+            dbc.Row([
+            dbc.Col(
+                dcc.Dropdown(
+                    id='stock-dropdown',
+                    options=stock_dropdown_options,
+                    value='AAPL',  # 默认值
+                    placeholder="Select a stock",  # 提示文本
+                ),
+                width=6,
+            ),
+            dbc.Col(
+                dcc.DatePickerRange(
+                    id='date-picker-range',
+                    start_date=pd.to_datetime('2024-01-01'),
+                    end_date=pd.to_datetime('2025-02-05'),
+                    display_format='YYYY-MM-DD',  # 日期格式
+                    min_date_allowed=pd.to_datetime('2010-01-01'),
+                    max_date_allowed=pd.to_datetime('2025-12-31'),
+                ),
+                width=6,
+            ),
+        ]),
+            dbc.Row([
+                dbc.Col(regression_graph),
+                dbc.Col(price_trend_graph)
+            ], class_name="g-0", style={"marginTop": "20px"}),
+        ],
+        label="Stock"
+    ),
+    
     dbc.Tab(
         [
             search_download_row,

src/plotting.py

@@ -1,10 +1,12 @@
 import pandas as pd
+import numpy as np
 
 from pyecharts.charts import Pie
 import plotly.graph_objects as go
 import plotly.express as px
 from pyecharts import options as opts
 from src.qqqm_data import getQQQMHolding
+from src.xueqiu_data import getUSStockHistoryByDate
 
 def render_pie_chart(selected_sectors=["All"]):
     """
@@ -353,4 +355,68 @@ def render_intraday_contribution_5(selected_sectors=["All"]):
         showlegend=False
     )
 
-    return fig.to_html(full_html=False)
+    return fig.to_html(full_html=False)
+
+def calculate_beta(stock_returns, index_returns):
+    """Calculate the beta value"""
+    covariance = np.cov(stock_returns, index_returns)[0, 1]
+    variance = np.var(index_returns)
+    beta = covariance / variance
+    return beta
+
+
+def fetch_stock_data(selected_stock, start_date, end_date):
+
+    stock_data = getUSStockHistoryByDate(selected_stock, start_date, end_date)
+    stock_data = stock_data[['Timestamp_str', 'percent', 'close']]  # Keep only the desired columns
+    stock_data = stock_data.rename(columns={'Timestamp_str': 'Date', 'percent': 'return', 'close': 'price'})  # Rename columns
+    stock_data['Date'] = pd.to_datetime(stock_data['Date'])  # Parse dates
+    stock_data.set_index('Date', inplace=True)
+    stock_returns = stock_data['return'].dropna() * 100
+        
+    nasdaq_data = getUSStockHistoryByDate('QQQ', start_date, end_date)
+    nasdaq_data = nasdaq_data[['Timestamp_str', 'percent', 'close']]  # Keep only the desired columns
+    nasdaq_data = nasdaq_data.rename(columns={'Timestamp_str': 'Date', 'percent': 'return', 'close': 'price'})  # Rename columns
+    nasdaq_data['Date'] = pd.to_datetime(nasdaq_data['Date'])  # Parse date
+    nasdaq_data.set_index('Date', inplace=True)
+    nasdaq_returns = nasdaq_data['return'].dropna() * 100
+
+    return stock_data, nasdaq_data, stock_returns, nasdaq_returns
+
+def render_regression_graph(selected_stock, start_date, end_date):
+
+    stock_data, nasdaq_data, stock_returns, nasdaq_returns = fetch_stock_data(selected_stock, start_date, end_date)
+
+    beta = calculate_beta(stock_returns, nasdaq_returns)
+
+    regression_fig = px.scatter(
+            x=nasdaq_returns,
+            y=stock_returns,
+            trendline="ols",
+            labels={'x': 'NASDAQ 100 Returns', 'y': f'{selected_stock} Returns'},
+            title=f"Regression Analysis: Beta = {beta:.2f}"
+        )
+
+    return regression_fig.to_html(full_html=False)
+
+def render_trend_graph(selected_stock, start_date, end_date):
+
+    stock_data, nasdaq_data, stock_returns, nasdaq_returns = fetch_stock_data(selected_stock, start_date, end_date)
+    stock_price_normalized = stock_data['price'].dropna() / stock_data['price'].iloc[0]
+    nasdaq_price_normalized = nasdaq_data['price'].dropna() / nasdaq_data['price'].iloc[0]
+    combined_data = pd.DataFrame({
+        'Date': stock_price_normalized.index,  # 日期索引
+        'Stock Price': stock_price_normalized,  # 归一化后的股票价格
+        'NASDAQ Price': nasdaq_price_normalized  # 归一化后的指数价格
+    })
+
+        # 绘制价格走势图
+    price_trend_fig = px.line(
+        combined_data,  # 数据
+        x='Date',  # X 轴：日期
+        y=['Stock Price', 'NASDAQ Price'],  # Y 轴：股票和指数价格
+        labels={'value': 'Normalized Price', 'variable': 'Legend'},  # 标签
+        title=f'{selected_stock} and NASDAQ 100 Price Trend (Normalized)'  # 标题
+    )
+
+    return price_trend_fig.to_html(full_html=False)