Update app.py

app.py

@@ -374,30 +374,14 @@ app.layout = html.Div([
 
     # 主要圖表區域 - 移除RSI圖表
     html.Div([
-        # 左側：股價走勢圖
+        # 左側：股價走勢圖 (現在包含成交量分佈)
         html.Div([
             html.Div([
                 dcc.Graph(id='price-chart')
             ])
-        ], style={'width': '65%', 'display': 'inline-block', 'vertical-align': 'top'}),
-
-        # 右側：分析資訊面板
-        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)'
-        }),
-
+        ], style={'width': '100%', 'display': 'inline-block', 'vertical-align': 'top'}),
+    ]),
+    
     # 技術指標選擇區域
     html.Div([
         html.H3("📊 進階技術指標分析", style={'margin-bottom': '20px'}),
@@ -744,7 +728,9 @@ def update_stock_info(selected_stock):
         })
     ])
 
-# 更新股價圖表
+# ==============================================================================
+# ===== 修改後的主要圖表回呼函式 (合併股價與成交量分佈) =====
+# ==============================================================================
 @app.callback(
     dash.dependencies.Output('price-chart', 'figure'),
     [dash.dependencies.Input('stock-dropdown', 'value'),
@@ -759,9 +745,19 @@ def update_price_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]
 
+    # --- 1. 建立共享 Y 軸的子圖 ---
+    # 建立一個 1x2 的網格，設定欄位寬度比例，並共享 Y 軸
+    fig = make_subplots(
+        rows=1, cols=2,
+        shared_yaxes=True,
+        column_widths=[0.8, 0.2],  # 左側圖佔80%，右側圖佔20%
+        horizontal_spacing=0.01    # 子圖間的水平間距
+    )
+
+    # --- 2. 在左側子圖 (col=1) 繪製股價圖 ---
     if chart_type == 'candlestick':
         # 根據台股慣例修改顏色
-        fig = go.Figure(data=go.Candlestick(
+        fig.add_trace(go.Candlestick(
             x=data.index,
             open=data['Open'],
             high=data['High'],
@@ -769,58 +765,71 @@ def update_price_chart(selected_stock, period, chart_type):
             close=data['Close'],
             name=stock_name,
             increasing_line_color='red',  # 上漲為紅色
-            decreasing_line_color='green'  # 下跌為綠色
-        ))
+            decreasing_line_color='green' # 下跌為綠色
+        ), row=1, col=1)
     else:
-        fig = px.line(data, y='Close', title=f'{stock_name} 股價走勢')
+        fig.add_trace(px.line(data, y='Close').data[0], row=1, col=1)
 
-    # 添加移動平均線
-    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.add_trace(go.Scatter(
+        x=data.index, y=data['MA5'], mode='lines', 
+        name='MA5', line=dict(color='orange')
+    ), row=1, col=1)
+    fig.add_trace(go.Scatter(
+        x=data.index, y=data['MA20'], mode='lines', 
+        name='MA20', line=dict(color='blue')
+    ), row=1, col=1)
+    
+    # --- 3. 在右側子圖 (col=2) 繪製成交量分佈圖 ---
+    # 計算 Volume Profile 數據
+    bin_edges, volume_per_bin, price_centers = calculate_volume_profile(data, num_bins=50)
+
+    if volume_per_bin is not None:
+        # 繪製水平長條圖
+        fig.add_trace(go.Bar(
+            orientation='h',
+            y=price_centers,
+            x=volume_per_bin,
+            name='Volume Profile',
+            text=[f'{vol/1000:.0f}k' for vol in volume_per_bin], # 顯示成交量
+            textposition='auto',
+            marker=dict(
+                color='rgba(173, 216, 230, 0.6)',
+                line=dict(color='rgba(30, 144, 255, 0.8)', width=1)
+            )
+        ), row=1, col=2)
 
+    # --- 4. 更新整體圖表佈局 ---
     fig.update_layout(
-        title=f'{stock_name} 股價走勢',
-        xaxis_title='日期',
-        yaxis_title='價格 (TWD)',
-        height=400
-    )
-
-    return fig
-
-# 更新RSI圖表（保持兼容性）
-@app.callback(
-    dash.dependencies.Output('rsi-chart', 'figure'),
-    [dash.dependencies.Input('stock-dropdown', 'value'),
-     dash.dependencies.Input('period-dropdown', 'value')]
-)
-def update_rsi_chart(selected_stock, period):
-    data = get_stock_data(selected_stock, period)
-    if data.empty:
-        return {}
-
-    data = calculate_technical_indicators(data)
-
-    fig = go.Figure()
-    fig.add_trace(go.Scatter(x=data.index, y=data['RSI'], mode='lines', name='RSI', line=dict(color='purple', width=2)))
-    # 根據台股慣例修改顏色
-    fig.add_hline(y=70, line_dash="dash", line_color="green", annotation_text="超買線(70)")
-    fig.add_hline(y=30, line_dash="dash", line_color="red", annotation_text="超賣線(30)")
-    fig.add_hline(y=50, line_dash="dot", line_color="gray", annotation_text="中線(50)")
-
-    # 添加超買超賣區域背景
-    fig.add_hrect(y0=70, y1=100, fillcolor="green", opacity=0.1, annotation_text="超買區")
-    fig.add_hrect(y0=0, y1=30, fillcolor="red", opacity=0.1, annotation_text="超賣區")
+        title_text=f'{stock_name} 股價走勢與成交量分佈',
+        height=500,
+        showlegend=True,
+        
+        # 左側子圖的座標軸設定
+        xaxis1=dict(
+            title='日期',
+            type='date',
+            rangeslider_visible=False # 隱藏範圍滑桿，避免干擾佈局
+        ),
+        yaxis1=dict(
+            title='價格 (TWD)'
+        ),
 
-    fig.update_layout(
-        title='RSI 相對強弱指標',
-        xaxis_title='日期',
-        yaxis_title='RSI',
-        height=400,
-        yaxis=dict(range=[0, 100])
+        # 右側子圖的座標軸設定
+        xaxis2=dict(
+            title='成交量',
+            showticklabels=True # 顯示刻度
+        ),
+        yaxis2=dict(
+            showticklabels=False # 因為共享Y軸，所以隱藏右側的Y軸標籤
+        ),
+        
+        bargap=0.05 # 長條圖間的間隙
     )
 
     return fig
 
+
 # 新增：進階技術指標圖表
 @app.callback(
     dash.dependencies.Output('advanced-technical-chart', 'figure'),
@@ -1026,8 +1035,19 @@ def update_volume_chart(selected_stock, period):
 
     stock_name = [name for name, symbol in TAIWAN_STOCKS.items() if symbol == selected_stock][0]
 
-    fig = px.bar(data, y='Volume', title=f'{stock_name} 成交量')
+    # 根據漲跌決定顏色 (台股慣例)
+    colors = ['red' if data['Close'].iloc[i] > data['Open'].iloc[i] else 'green' for i in range(len(data))]
+    
+    fig = go.Figure()
+    fig.add_trace(go.Bar(
+        x=data.index,
+        y=data['Volume'],
+        marker_color=colors,
+        name='成交量'
+    ))
+
     fig.update_layout(
+        title=f'{stock_name} 成交量',
         xaxis_title='日期',
         yaxis_title='成交量',
         height=300
@@ -1361,67 +1381,6 @@ 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'),