Update app.py

app.py

@@ -7,8 +7,7 @@ import gradio as gr
 import pandas as pd
 import matplotlib.pyplot as plt
 
-# === grafanalib: 只用來「定義」Grafana Dashboard JSON 結構 ===
-# 注意：實際畫圖在 Space 端用 Matplotlib 完成
+# grafanalib：只用來「定義」Grafana Dashboard JSON（不在這裡畫圖）
 from grafanalib.core import (
     Dashboard, Graph, Row, Target, YAxis, YAxes, Time
 )
@@ -20,7 +19,7 @@ TAIPEI = tz.gettz("Asia/Taipei")
 # Demo / Data loading
 # -----------------------------
 def make_demo_dataframe() -> pd.DataFrame:
-    """產生示範資料（1 小時、每分鐘 1 點）"""
+    """產生示範資料（1 小時、每分鐘一點）"""
     t0 = datetime.now(tz=TAIPEI) - timedelta(minutes=60)
     times = [t0 + timedelta(minutes=i) for i in range(61)]
     amp = [0.5 + 0.4 * __import__("math").sin(i / 6.0) for i in range(61)]
@@ -30,7 +29,7 @@ def make_demo_dataframe() -> pd.DataFrame:
 
 
 def load_csv(file: gr.File | None) -> pd.DataFrame:
-    """支援上傳 CSV（需含時間欄：time/timestamp/datetime/date），自動轉 tz=Asia/Taipei。"""
+    """讀 CSV（需含時間欄）；若未上傳則回傳示範資料。統一轉為 Asia/Taipei 時區並依時間排序。"""
     if file is None:
         return make_demo_dataframe()
 
@@ -43,13 +42,12 @@ def load_csv(file: gr.File | None) -> pd.DataFrame:
     df[time_col] = pd.to_datetime(df[time_col])
     df.rename(columns={time_col: "time"}, inplace=True)
 
-    # 轉換 / 補上時區
+    # 統一時區
     if getattr(df["time"].dt, "tz", None) is None:
         df["time"] = df["time"].dt.tz_localize(TAIPEI)
     else:
         df["time"] = df["time"].dt.tz_convert(TAIPEI)
 
-    # 依時間排序，避免畫圖時軸亂序
     df = df.sort_values("time").reset_index(drop=True)
     return df
 
@@ -61,59 +59,42 @@ def build_grafanalib_dashboard(series_columns: list[str]) -> dict:
     """
     產生 Grafana Dashboard JSON：
       - Panel 1：Line（第一個數值欄位）
-      - Panel 2：Bar（第二個數值欄位；若不存在則忽略）
-      - Panel 3：Line（第一個數值欄位的 5 點 rolling mean）
+      - Panel 2：Bar（第二個數值欄位；若不存在則不放）
+      - Panel 3：Line（第一個數值欄位的 5 點 Rolling Mean）
     """
     panels = []
 
-    # Panel 1: 第一個欄位（折線）
+    # Panel 1：折線
     panels.append(
         Graph(
             title=f"Time Series - {series_columns[0]}",
             dataSource="(example)",
             targets=[Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0])],
-            # 折線圖
-            lines=True,
-            bars=False,
-            points=False,
-            yAxes=YAxes(
-                left=YAxis(format="short"),
-                right=YAxis(format="short"),
-            ),
+            lines=True, bars=False, points=False,
+            yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short")),
         )
     )
 
-    # Panel 2: 第二個欄位（柱狀）- 若有第二個欄位
+    # Panel 2：柱狀（若有第二欄）
     if len(series_columns) > 1:
         panels.append(
             Graph(
                 title=f"Event Count (Bar) - {series_columns[1]}",
                 dataSource="(example)",
                 targets=[Target(expr=f"{series_columns[1]}", legendFormat=series_columns[1])],
-                # 柱狀圖
-                lines=False,
-                bars=True,
-                points=False,
-                yAxes=YAxes(
-                    left=YAxis(format="short"),
-                    right=YAxis(format="short"),
-                ),
+                lines=False, bars=True, points=False,
+                yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short")),
             )
         )
 
-    # Panel 3: 第一個欄位 Rolling Mean（折線）
+    # Panel 3：Rolling Mean（5 點）
     panels.append(
         Graph(
             title=f"Rolling Mean (5) - {series_columns[0]}",
             dataSource="(example)",
             targets=[Target(expr=f"{series_columns[0]}_rolling5", legendFormat=f"{series_columns[0]}_rolling5")],
-            lines=True,
-            bars=False,
-            points=False,
-            yAxes=YAxes(
-                left=YAxis(format="short"),
-                right=YAxis(format="short"),
-            ),
+            lines=True, bars=False, points=False,
+            yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short")),
         )
     )
 
@@ -127,55 +108,42 @@ def build_grafanalib_dashboard(series_columns: list[str]) -> dict:
 
 
 # -----------------------------
-# Matplotlib rendering
+# Matplotlib rendering（各回傳單一 Figure）
 # -----------------------------
-def render_matplotlib(df: pd.DataFrame, value_cols: list[str]):
-    """
-    依據 df 實際畫圖：
-      - 圖1：第一個欄位（折線）
-      - 圖2：第二個欄位（柱狀；若不存在則略過）
-      - 圖3：第一個欄位的 5 點 rolling mean（折線）
-    回傳 List[Figure]，給 gr.Gallery 顯示。
-    """
-    figs = []
-
-    # 圖1：折線（第一欄）
-    fig1 = plt.figure()
-    plt.plot(df["time"], df[value_cols[0]])
-    plt.title(f"Time Series - {value_cols[0]}")
+def render_line(df: pd.DataFrame, col: str):
+    fig = plt.figure()
+    plt.plot(df["time"], df[col])
+    plt.title(f"Time Series - {col}")
     plt.xlabel("Time")
-    plt.ylabel(value_cols[0])
+    plt.ylabel(col)
     plt.xticks(rotation=20)
     plt.tight_layout()
-    figs.append(fig1)
-
-    # 圖2：柱狀（第二欄，若存在）
-    if len(value_cols) > 1:
-        fig2 = plt.figure()
-        # 使用條狀圖
-        plt.bar(df["time"], df[value_cols[1]])
-        plt.title(f"Event Count (Bar) - {value_cols[1]}")
-        plt.xlabel("Time")
-        plt.ylabel(value_cols[1])
-        plt.xticks(rotation=20)
-        plt.tight_layout()
-        figs.append(fig2)
+    return fig
 
-    # 圖3：Rolling Mean（對第一欄做 5 點移動平均）
-    rolling_col = f"{value_cols[0]}_rolling5"
-    if rolling_col not in df.columns:
-        df[rolling_col] = df[value_cols[0]].rolling(window=5, min_periods=1, center=False).mean()
 
-    fig3 = plt.figure()
-    plt.plot(df["time"], df[rolling_col])
-    plt.title(f"Rolling Mean (5) - {value_cols[0]}")
+def render_bar(df: pd.DataFrame, col: str):
+    fig = plt.figure()
+    plt.bar(df["time"], df[col])
+    plt.title(f"Event Count (Bar) - {col}")
     plt.xlabel("Time")
-    plt.ylabel(rolling_col)
+    plt.ylabel(col)
     plt.xticks(rotation=20)
     plt.tight_layout()
-    figs.append(fig3)
+    return fig
+
 
-    return figs, df  # 回傳 df 讓上游可帶出 rolling 欄位
+def render_rolling(df: pd.DataFrame, col: str, window: int = 5):
+    roll_col = f"{col}_rolling{window}"
+    if roll_col not in df.columns:
+        df[roll_col] = df[col].rolling(window=window, min_periods=1).mean()
+    fig = plt.figure()
+    plt.plot(df["time"], df[roll_col])
+    plt.title(f"Rolling Mean ({window}) - {col}")
+    plt.xlabel("Time")
+    plt.ylabel(roll_col)
+    plt.xticks(rotation=20)
+    plt.tight_layout()
+    return fig, df
 
 
 # -----------------------------
@@ -183,90 +151,93 @@ def render_matplotlib(df: pd.DataFrame, value_cols: list[str]):
 # -----------------------------
 def pipeline(file, series_choice):
     """
-    主要流程：
-      1) 讀 CSV（或示範資料）
-      2) 選擇要展示的欄位（第一欄必定存在；第二欄選配）
-      3) 建立 grafanalib Dashboard JSON（含第三個 rolling 面板）
-      4) Matplotlib 繪圖（第2圖為柱狀；第3圖為 rolling mean）
+    流程：
+      1) 讀 CSV（或示範）
+      2) 決定欄位（第一欄做折線 + rolling；第二欄做柱狀（可選））
+      3) 產出 grafanalib Dashboard JSON
+      4) 回傳三張圖（gr.Plot 能吃 Matplotlib Figure）
     """
     df = load_csv(file)
 
-    # 取得數值欄位（排除 time）
+    # 數值欄位
     numeric_cols = [c for c in df.columns if c != "time" and pd.api.types.is_numeric_dtype(df[c])]
     if not numeric_cols:
         raise ValueError("未找到可繪圖的數值欄位。請提供至少一個數值欄位（除了 time 以外）。")
 
-    # 使用者選擇優先；否則預設取前兩個
     chosen = series_choice or numeric_cols[:2]
     chosen = [c for c in chosen if c in numeric_cols]
     if not chosen:
         chosen = numeric_cols[:2]
 
-    # 建 JSON（第三面板會參照 f"{chosen[0]}_rolling5"）
+    # Dashboard JSON
     dash_json = build_grafanalib_dashboard(chosen)
-
-    # 畫圖（第2圖為柱狀；第3圖為 rolling）
-    figs, df_with_rolling = render_matplotlib(df.copy(), chosen)
-
-    # JSON 輸出與下載檔
     dash_json_str = json.dumps(dash_json, ensure_ascii=False, indent=2, default=str)
     json_bytes = io.BytesIO(dash_json_str.encode("utf-8"))
     json_bytes.name = "dashboard.json"
 
-    return figs, dash_json_str, json_bytes, df_with_rolling
+    # Figures
+    fig1 = render_line(df, chosen[0])
+    fig2 = render_bar(df, chosen[1]) if len(chosen) > 1 else None
+    fig3, df_with_roll = render_rolling(df.copy(), chosen[0], window=5)
+
+    # 若沒有第二欄，給一張簡單 placeholder（避免輸出 None 造成型別不符）
+    if fig2 is None:
+        fig2 = plt.figure()
+        plt.text(0.5, 0.5, "第二張圖：未選第二數值欄", ha="center", va="center", fontsize=12)
+        plt.axis("off")
+        plt.tight_layout()
+
+    return fig1, fig2, fig3, dash_json_str, json_bytes, df_with_roll
 
 
 # -----------------------------
-# UI
+# UI（使用三個 gr.Plot 取代 Gallery）
 # -----------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.Markdown(
         "# grafanalib 生成 Dashboard + Gradio 呈現\n"
-        "- 第一個面板：折線（第一個數值欄）\n"
-        "- 第二個面板：柱狀（第二個數值欄，若有）\n"
-        "- 第三個面板：第一個欄位的 5 點移動平均（折線）\n\n"
+        "- 圖1：折線（第一個數值欄）\n"
+        "- 圖2：柱狀（第二個數值欄；若未選則顯示提示）\n"
+        "- 圖3：第一個欄位的 5 點移動平均（折線）\n\n"
         "**說明**：grafanalib 產生可匯入 Grafana 的 Dashboard JSON；下方 Matplotlib 圖為 Space 端即時呈現。"
     )
 
     with gr.Row():
         file_in = gr.File(label="上傳 CSV（可空，會用示範資料）", file_types=[".csv"])
         series_multiselect = gr.CheckboxGroup(
-            label="選擇要呈現的數值欄位（第一個欄位用於折線&rolling；第二個欄位用於柱狀，選配）",
+            label="選擇要呈現的數值欄位（第一欄→折線與 Rolling；第二欄→柱狀，選配）",
             choices=[]
         )
 
     run_btn = gr.Button("產生 Dashboard 並繪圖")
 
     with gr.Row():
-        gallery = gr.Gallery(label="圖表預覽（1:Line, 2:Bar, 3:Rolling Line）", height=420)
-
-    with gr.Row():
-        json_box = gr.Code(label="grafanalib Dashboard JSON（可匯入真正的 Grafana）", language="json")
-
-    with gr.Row():
-        json_file = gr.File(label="下載 dashboard.json")
+        plot1 = gr.Plot(label="圖 1：Line")
+        plot2 = gr.Plot(label="圖 2：Bar")
+        plot3 = gr.Plot(label="圖 3：Rolling Mean")
 
+    json_box = gr.Code(label="grafanalib Dashboard JSON（可匯入真正的 Grafana）", language="json")
+    json_file = gr.File(label="下載 dashboard.json")
     df_view = gr.Dataframe(label="資料預覽（包含 rolling 欄位）", wrap=True)
 
     # 依檔案動態更新欄位選單與表格
     def probe_columns(file):
         df = load_csv(file)
         numeric_cols = [c for c in df.columns if c != "time" and pd.api.types.is_numeric_dtype(df[c])]
-        # 預設勾選前兩個（若只有一個，就只勾一個）
         default_select = numeric_cols[:2]
         return gr.CheckboxGroup(choices=numeric_cols, value=default_select), df
 
     # 初次載入：以 Demo 資料跑一次
     def initial_load():
-        figs, dash_json, json_file_obj, df = pipeline(file=None, series_choice=[])
+        f1, f2, f3, dash_json, json_file_obj, df = pipeline(file=None, series_choice=[])
         numeric_cols = [c for c in df.columns if c != "time" and pd.api.types.is_numeric_dtype(df[c])]
         default_select = numeric_cols[:2]
-        return figs, dash_json, json_file_obj, df, gr.CheckboxGroup(choices=numeric_cols, value=default_select)
+        return f1, f2, f3, dash_json, json_file_obj, df, gr.CheckboxGroup(choices=numeric_cols, value=default_select)
 
     demo.load(
         initial_load,
         inputs=None,
-        outputs=[gallery, json_box, json_file, df_view, series_multiselect]
+        outputs=[plot1, plot2, plot3, json_box, json_file, df_view, series_multiselect],
     )
 
     file_in.change(
@@ -278,7 +249,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     run_btn.click(
         pipeline,
         inputs=[file_in, series_multiselect],
-        outputs=[gallery, json_box, json_file, df_view],
+        outputs=[plot1, plot2, plot3, json_box, json_file, df_view],
     )
 
 if __name__ == "__main__":