Update app.py

app.py

@@ -7,17 +7,20 @@ import gradio as gr
 import pandas as pd
 import matplotlib.pyplot as plt
 
-# === grafanalib: 定義 Dashboard 結構（不負責畫圖） ===
-# 注意：grafanalib 只產生 Grafana JSON；我們會把 JSON 顯示出來，並用 Matplotlib 實際畫圖
+# === grafanalib: 只用來「定義」Grafana Dashboard JSON 結構 ===
+# 注意：實際畫圖在 Space 端用 Matplotlib 完成
 from grafanalib.core import (
-    Dashboard, Graph, Row, Target, YAxis, YAxes, TimeRange  # ⬅️ 加入 TimeRange
+    Dashboard, Graph, Row, Target, YAxis, YAxes, Time
 )
 
 TAIPEI = tz.gettz("Asia/Taipei")
 
 
-def make_demo_dataframe():
-    """產生示範資料（1 小時，1 分鐘 1 點），欄位：time, amplitude, count"""
+# -----------------------------
+# Demo / Data loading
+# -----------------------------
+def make_demo_dataframe() -> pd.DataFrame:
+    """產生示範資料（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)]
@@ -27,7 +30,7 @@ def make_demo_dataframe():
 
 
 def load_csv(file: gr.File | None) -> pd.DataFrame:
-    """支援使用者上傳 CSV，要求至少包含 time 欄位；其他欄位可自訂"""
+    """支援上傳 CSV（需含時間欄：time/timestamp/datetime/date），自動轉 tz=Asia/Taipei。"""
     if file is None:
         return make_demo_dataframe()
 
@@ -39,38 +42,58 @@ 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
 
 
+# -----------------------------
+# grafanalib JSON builder
+# -----------------------------
 def build_grafanalib_dashboard(series_columns: list[str]) -> dict:
     """
-    用 grafanalib 定義一個簡單 Dashboard：
-    - Row 1：Time Series（Graph）展示第一個數值欄
-    - Row 2：Event Count（Graph）展示第二個數值欄（如有）
-    注意：Target 只是示意；實際取數由我們在 Gradio 端處理。
+    產生 Grafana Dashboard JSON：
+      - Panel 1：Line（第一個數值欄位）
+      - Panel 2：Bar（第二個數值欄位；若不存在則忽略）
+      - Panel 3：Line（第一個數值欄位的 5 點 rolling mean）
     """
-    targets = [Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0])]
-    panels = [
+    panels = []
+
+    # Panel 1: 第一個欄位（折線）
+    panels.append(
         Graph(
             title=f"Time Series - {series_columns[0]}",
             dataSource="(example)",
-            targets=targets,
+            targets=[Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0])],
+            # 折線圖
+            lines=True,
+            bars=False,
+            points=False,
             yAxes=YAxes(
-                left=YAxis(format="short"),   # 用 Grafana 內建單位 key；避免不支援的 "none"
+                left=YAxis(format="short"),
                 right=YAxis(format="short"),
             ),
         )
-    ]
+    )
 
+    # Panel 2: 第二個欄位（柱狀）- 若有第二個欄位
     if len(series_columns) > 1:
         panels.append(
             Graph(
-                title=f"Event Count - {series_columns[1]}",
+                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"),
@@ -78,22 +101,45 @@ def build_grafanalib_dashboard(series_columns: list[str]) -> dict:
             )
         )
 
+    # Panel 3: 第一個欄位 Rolling Mean（折線）
+    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"),
+            ),
+        )
+    )
+
     dash = Dashboard(
         title="Seismology Demo Dashboard (grafanalib + Gradio)",
         rows=[Row(panels=panels)],
         timezone="browser",
-        time=TimeRange("now-1h", "now"),  # ⬅️ 正確做法：用 TimeRange 取代 time_from/time_to
+        time=Time("now-1h", "now"),
     )
     return dash.to_json_data()
 
 
+# -----------------------------
+# Matplotlib rendering
+# -----------------------------
 def render_matplotlib(df: pd.DataFrame, value_cols: list[str]):
     """
-    用 Matplotlib 依據 df 實際畫圖，對應 grafanalib 定義的欄位。
-    回傳多個 matplotlib Figure 物件（給 gr.Gallery 使用）
+    依據 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]}")
@@ -103,97 +149,132 @@ def render_matplotlib(df: pd.DataFrame, value_cols: list[str]):
     plt.tight_layout()
     figs.append(fig1)
 
+    # 圖2：柱狀（第二欄，若存在）
     if len(value_cols) > 1:
         fig2 = plt.figure()
-        plt.plot(df["time"], df[value_cols[1]])
-        plt.title(f"Event Count - {value_cols[1]}")
+        # 使用條狀圖
+        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 figs
+    # 圖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]}")
+    plt.xlabel("Time")
+    plt.ylabel(rolling_col)
+    plt.xticks(rotation=20)
+    plt.tight_layout()
+    figs.append(fig3)
 
+    return figs, df  # 回傳 df 讓上游可帶出 rolling 欄位
+
+
+# -----------------------------
+# Main pipeline
+# -----------------------------
 def pipeline(file, series_choice):
     """
-    主要管線：
-    1) 讀 CSV（或用示範資料）
-    2) 決定要展示的欄位
-    3) 用 grafanalib 產出 Dashboard JSON
-    4) 用 Matplotlib 畫圖
+    主要流程：
+      1) 讀 CSV（或示範資料）
+      2) 選擇要展示的欄位（第一欄必定存在；第二欄選配）
+      3) 建立 grafanalib Dashboard JSON（含第三個 rolling 面板）
+      4) Matplotlib 繪圖（第2圖為柱狀；第3圖為 rolling mean）
     """
     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("未找到可繪圖的數值欄位。請在 CSV 中提供至少一個數值欄位（除了 time 以外）。")
+        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"）
     dash_json = build_grafanalib_dashboard(chosen)
-    figs = render_matplotlib(df, chosen)
 
-    dash_json_str = json.dumps(dash_json, ensure_ascii=False, indent=2, default=str)
+    # 畫圖（第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
+    return figs, dash_json_str, json_bytes, df_with_rolling
 
 
+# -----------------------------
+# UI
+# -----------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# grafanalib 生成 Dashboard + Gradio 呈現\n"
-                "上傳 CSV（需含 `time` 欄）或用示範資料，選擇要畫的數值欄位。\n\n"
-                "**說明**：grafanalib 產生 Grafana 的 Dashboard JSON；下方 Matplotlib 圖是 Space 端實際呈現。")
+    gr.Markdown(
+        "# grafanalib 生成 Dashboard + Gradio 呈現\n"
+        "- 第一個面板：折線（第一個數值欄）\n"
+        "- 第二個面板：柱狀（第二個數值欄，若有）\n"
+        "- 第三個面板：第一個欄位的 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="選擇要呈現的數值欄位（不選則自動挑前兩���）", choices=[])
+        series_multiselect = gr.CheckboxGroup(
+            label="選擇要呈現的數值欄位（第一個欄位用於折線&rolling；第二個欄位用於柱狀，選配）",
+            choices=[]
+        )
 
     run_btn = gr.Button("產生 Dashboard 並繪圖")
 
     with gr.Row():
-        gallery = gr.Gallery(label="圖表預覽（Matplotlib）", height=400)
+        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")
+        json_box = gr.Code(label="grafanalib Dashboard JSON（可匯入真正的 Grafana）", language="json")
+
     with gr.Row():
         json_file = gr.File(label="下載 dashboard.json")
 
-    df_view = gr.Dataframe(label="資料預覽（自動偵測 time + 數值欄位）", wrap=True)
+    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])]
-        return gr.CheckboxGroup(choices=numeric_cols), df
+        # 預設勾選前兩個（若只有一個，就只勾一個）
+        default_select = numeric_cols[:2]
+        return gr.CheckboxGroup(choices=numeric_cols, value=default_select), df
 
+    # 初次載入：以 Demo 資料跑一次
     def initial_load():
-        """在 App 載入時，用示範資料跑一次完整流程"""
         figs, 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])]
-        chosen = numeric_cols[:2]
-        return figs, dash_json, json_file_obj, df, gr.CheckboxGroup(choices=numeric_cols, value=chosen)
+        default_select = numeric_cols[:2]
+        return figs, dash_json, json_file_obj, df, gr.CheckboxGroup(choices=numeric_cols, value=default_select)
 
-    # 頁面載入：直接顯示範例圖與 JSON
     demo.load(
         initial_load,
         inputs=None,
         outputs=[gallery, json_box, json_file, df_view, series_multiselect]
     )
 
-    # 上傳新檔：更新欄位清單與表格預覽
     file_in.change(
         probe_columns,
         inputs=[file_in],
         outputs=[series_multiselect, df_view],
     )
 
-    # 產生與繪圖
     run_btn.click(
         pipeline,
         inputs=[file_in, series_multiselect],