Update app.py

app.py

@@ -236,6 +236,47 @@ def get_pmi_data():
         print(f"無法獲取 PMI 資料: {str(e)}")
         return pd.DataFrame()
 
+def calculate_volume_profile(df, num_bins=50):
+    """
+    計算成交量分佈圖 (Volume Profile) 的數據。
+
+    Args:
+        df (pd.DataFrame): 包含 'High', 'Low', 'Volume' 欄位的 DataFrame。
+        num_bins (int): 分割價格區間的數量。
+
+    Returns:
+        tuple: 包含 (bin_edges, volume_per_bin, price_centers) 的 tuple。
+               bin_edges: 每個區間的邊界。
+               volume_per_bin: 每個區間對應的成交量。
+               price_centers: 每個區間的中心價格。
+    """
+    if df.empty or 'High' not in df.columns or 'Low' not in df.columns or 'Volume' not in df.columns:
+        return None, None, None
+
+    # 建立一個包含所有高低點的陣列，用於確定價格範圍
+    all_prices = np.concatenate([df['High'].values, df['Low'].values])
+    min_price = all_prices.min()
+    max_price = all_prices.max()
+
+    price_for_volume = (df['High'] + df['Low'] + df['Close']) / 3
+    df_vol_profile = df.copy()
+    df_vol_profile['Price_Indicator'] = price_for_volume
+    df_vol_profile['Volume'] = df_vol_profile['Volume'] # 確保 Volume 欄位存在
+
+    # 創建直方圖來計算成交量分佈
+    # `density=False` 確保我們得到的是實際的成交量總和，而不是密度
+    # `bins=num_bins` 設定價格區間的數量
+    # `range` 設定價格的最小值和最大值
+    hist, bin_edges = np.histogram(df_vol_profile['Price_Indicator'], bins=num_bins, range=(min_price, max_price), weights=df_vol_profile['Volume'])
+
+    # 計算每個區間的中心價格
+    price_centers = (bin_edges[:-1] + bin_edges[1:]) / 2
+
+    return bin_edges, hist, price_centers
+
+
+
+
 # 建立 Dash 應用程式
 app = dash.Dash(__name__, suppress_callback_exceptions=True)
 
@@ -344,7 +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([
@@ -1291,6 +1344,67 @@ 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'),