Update app.py

app.py

@@ -374,7 +374,7 @@ app.layout = html.Div([
 
     # 主要圖表區域 - 移除RSI圖表
     html.Div([
-        # 左側：股價走勢圖與成交量分佈圖合併
+        # 左側：股價走勢圖
         html.Div([
             html.Div([
                 dcc.Graph(id='price-chart')
@@ -385,8 +385,19 @@ app.layout = html.Div([
         html.Div([
             html.Div(id='analysis-panel')
         ], style={'width': '33%', 'display': 'inline-block', 'margin-left': '2%', 'vertical-align': 'top'})
-    ]),
-    
+        ]),
+         # 新增：成交量分佈圖 (Volume Profile)
+        html.Div([
+            html.H3("📊 成交量分佈圖 (Volume Profile)"),
+            dcc.Graph(id='volume-profile-chart')
+        ], style={
+            'margin-top': '30px',
+            'padding': '20px',
+            'background': 'white',
+            'border-radius': '10px',
+            'box-shadow': '0 2px 10px rgba(0,0,0,0.1)'
+        }),
+
     # 技術指標選擇區域
     html.Div([
         html.H3("📊 進階技術指標分析", style={'margin-bottom': '20px'}),
@@ -730,14 +741,14 @@ def update_stock_info(selected_stock):
         })
     ])
 
-# 更新股價圖表 (新版：結合成交量分佈圖)
+# 更新股價圖表
 @app.callback(
     dash.dependencies.Output('price-chart', 'figure'),
     [dash.dependencies.Input('stock-dropdown', 'value'),
      dash.dependencies.Input('period-dropdown', 'value'),
      dash.dependencies.Input('chart-type', 'value')]
 )
-def update_combined_chart(selected_stock, period, chart_type):
+def update_price_chart(selected_stock, period, chart_type):
     data = get_stock_data(selected_stock, period)
     if data.empty:
         return {}
@@ -745,70 +756,29 @@ def update_combined_chart(selected_stock, period, chart_type):
     data = calculate_technical_indicators(data)
     stock_name = [name for name, symbol in TAIWAN_STOCKS.items() if symbol == selected_stock][0]
 
-    # 創建主圖，帶有雙 Y 軸
-    fig = make_subplots(specs=[[{"secondary_y": True}]])
-
-    # 1. 價格走勢圖 (主 Y 軸)
     if chart_type == 'candlestick':
-        fig.add_trace(go.Candlestick(
+        fig = go.Figure(data=go.Candlestick(
             x=data.index,
             open=data['Open'],
             high=data['High'],
             low=data['Low'],
             close=data['Close'],
             name=stock_name
-        ), secondary_y=False)
+        ))
     else:
-        fig.add_trace(go.Scatter(x=data.index, y=data['Close'], mode='lines', name=stock_name), secondary_y=False)
+        fig = px.line(data, y='Close', title=f'{stock_name} 股價走勢')
 
     # 添加移動平均線
-    fig.add_trace(go.Scatter(x=data.index, y=data['MA5'], mode='lines', name='MA5', line=dict(color='orange')), secondary_y=False)
-    fig.add_trace(go.Scatter(x=data.index, y=data['MA20'], mode='lines', name='MA20', line=dict(color='blue')), secondary_y=False)
-    
-    # 2. 成交量分佈圖 (輔助 Y 軸)
-    bin_edges, volume_per_bin, price_centers = calculate_volume_profile(data, num_bins=50)
-    
-    if bin_edges is not None:
-        fig.add_trace(go.Bar(
-            y=price_centers,
-            x=volume_per_bin,
-            name='成交量分佈',
-            orientation='h', # 水平長條圖
-            marker_color='rgba(173, 216, 230, 0.4)', # 半透明顏色
-            hoverinfo='y+x'
-        ), secondary_y=True)
-
-        # 獲取最高成交量的價格區間 (Point of Control, POC)
-        if len(volume_per_bin) > 0:
-            poc_volume = np.max(volume_per_bin)
-            poc_index = np.argmax(volume_per_bin)
-            poc_price = price_centers[poc_index]
-
-            # 在 POC 價格線上添加一條線
-            fig.add_hline(y=poc_price, line_dash="dash", line_color="red",
-                          annotation_text=f"POC: ${poc_price:.2f}",
-                          annotation_position="top right")
-
-    # 更新布局
+    fig.add_trace(go.Scatter(x=data.index, y=data['MA5'], mode='lines', name='MA5', line=dict(color='orange')))
+    fig.add_trace(go.Scatter(x=data.index, y=data['MA20'], mode='lines', name='MA20', line=dict(color='blue')))
+
     fig.update_layout(
-        title=f'{stock_name} 股價與成交量分佈',
+        title=f'{stock_name} 股價走勢',
         xaxis_title='日期',
         yaxis_title='價格 (TWD)',
-        height=500,
-        yaxis2=dict(
-            title="成交量分佈",
-            overlaying="y", # 疊加在主 Y 軸上
-            side="right",
-            range=[data['Low'].min(), data['High'].max()], # 確保 Y 軸範圍與價格圖一致
-            showgrid=False
-        ),
-        legend=dict(x=0, y=1, traceorder="normal"),
-        hovermode="x unified"
+        height=400
     )
-    
-    # 將成交量分佈圖的 y 軸反轉，讓價格從高到低
-    fig.update_yaxes(autorange='reversed', secondary_y=True)
-    
+
     return fig
 
 # 更新RSI圖表（保持兼容性）
@@ -1373,8 +1343,71 @@ def update_pmi_chart(selected_stock):
 
     return fig
 
+
+@app.callback(
+    dash.dependencies.Output('volume-profile-chart', 'figure'),
+    [dash.dependencies.Input('stock-dropdown', 'value'),
+     dash.dependencies.Input('period-dropdown', 'value')]
+)
+def update_volume_profile_chart(selected_stock, period):
+    data = get_stock_data(selected_stock, period)
+    if data.empty:
+        return {}
+
+    stock_name = [name for name, symbol in TAIWAN_STOCKS.items() if symbol == selected_stock][0]
+
+    # 計算 Volume Profile
+    bin_edges, volume_per_bin, price_centers = calculate_volume_profile(data, num_bins=50) # 您可以調整 num_bins
+
+    if bin_edges is None or volume_per_bin is None:
+        return {}
+
+    # 創建 Volume Profile 圖 (通常是水平長條圖)
+    # 我們將其繪製為一個水平的長條圖，成交量在 X 軸，價格在 Y 軸
+    fig = go.Figure(go.Bar(
+        orientation='h', # 設定為水平長條圖
+        y=price_centers,
+        x=volume_per_bin,
+        name='Volume Profile',
+        marker=dict(
+            color='rgba(173, 216, 230, 0.6)', # 淡藍色
+            line=dict(color='rgba(30, 144, 255, 0.8)', width=1) # 邊框線
+        ),
+        # 顯示具體的成交量數字
+        text=[f'{vol:.0f}' for vol in volume_per_bin],
+        textposition='outside', # 將文字顯示在長條圖外面
+        hoverinfo='y+text' # hover 時顯示 Y 軸 (價格) 和 text (成交量)
+    ))
+
+    # 獲取最高成交量的價格區間 (Point of Control, POC)
+    if len(volume_per_bin) > 0:
+        poc_volume = np.max(volume_per_bin)
+        poc_index = np.argmax(volume_per_bin)
+        poc_price = price_centers[poc_index]
+
+        # 在 POC 價格線上添加一條垂直線
+        fig.add_vline(x=poc_volume, line_dash="dash", line_color="red",
+                      annotation_text=f"POC: ${poc_price:.2f} ({poc_volume:.0f})",
+                      annotation_position="top right")
+
+    # 更新圖表佈局
+    fig.update_layout(
+        title=f'{stock_name} 成交量分佈圖 (Volume Profile)',
+        xaxis_title='成交量',
+        yaxis_title='價格 (TWD)',
+        height=450,
+        yaxis=dict(autorange='reversed'), # 讓價格從高到低排列
+        bargap=0, # 讓長條圖緊密排列
+        plot_bgcolor='rgba(0,0,0,0)', # 透明背景
+        hoverlabel=dict(bgcolor="white", font_size=12, font_family="Rockwell")
+    )
+
+    return fig    
+
+# 新增：多檔股票比較
 @app.callback(
-    dash.dependencies.Output('comparison-chart', 'figure'),
+    [dash.dependencies.Output('comparison-chart', 'figure'),
+     dash.dependencies.Output('comparison-table', 'children')],
     [dash.dependencies.Input('comparison-stocks', 'value'),
      dash.dependencies.Input('comparison-period', 'value')]
 )