Update app.py

app.py

@@ -1,14 +1,205 @@
+import io
+import json
+from datetime import datetime, timedelta
+from dateutil import tz
+
 import gradio as gr
 import pandas as pd
 import matplotlib.pyplot as plt
 
-def show_chart():
-    df = pd.DataFrame({"time": range(10), "value": [i**0.5 for i in range(10)]})
-    plt.plot(df["time"], df["value"])
-    return plt.gcf()
+# === grafanalib: 定義 Dashboard 結構（不負責畫圖） ===
+# 注意：grafanalib 只產生 Grafana JSON；我們會把 JSON 顯示出來，並用 Matplotlib 實際畫圖
+from grafanalib.core import (
+    Dashboard, Graph, Row, Target, YAxis, YAxes, OPS_FORMAT,
+)
+
+TAIPEI = tz.gettz("Asia/Taipei")
+
+
+def make_demo_dataframe():
+    """產生示範資料（10 分鐘 1 點），欄位：time, amplitude, count"""
+    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)]
+    cnt = [max(0, int(5 + 3 * __import__("math").cos(i / 10.0))) for i in range(61)]
+    df = pd.DataFrame({"time": times, "amplitude": amp, "count": cnt})
+    return df
+
+
+def load_csv(file: gr.File | None) -> pd.DataFrame:
+    """支援使用者上傳 CSV，要求至少包含 time 欄位；其他欄位可自訂"""
+    if file is None:
+        return make_demo_dataframe()
+
+    # 讀 CSV，嘗試自動 parse 日期欄
+    df = pd.read_csv(file.name)
+    # 嘗試找到時間欄位（常見命名）
+    time_col_candidates = ["time", "timestamp", "datetime", "date"]
+    time_col = None
+    for c in time_col_candidates:
+        if c in df.columns:
+            time_col = c
+            break
+    if time_col is None:
+        raise ValueError("CSV 檔需包含時間欄位，例如：time / timestamp / datetime / date")
+
+    df[time_col] = pd.to_datetime(df[time_col])
+    df.rename(columns={time_col: "time"}, inplace=True)
+    # 保證有時區（預設轉為台北）
+    if df["time"].dt.tz is None:
+        df["time"] = df["time"].dt.tz_localize(TAIPEI)
+    return df
+
+
+def build_grafanalib_dashboard(series_columns: list[str]) -> dict:
+    """
+    用 grafanalib 定義一個簡單 Dashboard：
+    - Row 1：Time Series（Graph）展示第一個數值欄
+    - Row 2：Event Count（Graph）展示第二個數值欄（如有）
+    注意：Target 只是示意；實際取數由我們在 Gradio 端處理。
+    """
+    # 目標（在 Grafana 會對應到資料來源查詢；這裡只作為 JSON 示意）
+    targets = [
+        Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0]),
+    ]
+    panels = [
+        Graph(
+            title=f"Time Series - {series_columns[0]}",
+            dataSource="(example)",  # 在真實 Grafana 才會用到
+            targets=targets,
+            yAxes=YAxes(
+                left=YAxis(format=OPS_FORMAT.NONE),
+                right=YAxis(format=OPS_FORMAT.NONE),
+            ),
+        )
+    ]
+
+    if len(series_columns) > 1:
+        panels.append(
+            Graph(
+                title=f"Event Count - {series_columns[1]}",
+                dataSource="(example)",
+                targets=[Target(expr=f"{series_columns[1]}", legendFormat=series_columns[1])],
+                yAxes=YAxes(
+                    left=YAxis(format=OPS_FORMAT.NONE),
+                    right=YAxis(format=OPS_FORMAT.NONE),
+                ),
+            )
+        )
+
+    dash = Dashboard(
+        title="Seismology Demo Dashboard (grafanalib + Gradio)",
+        rows=[Row(panels=panels)],
+        timezone="browser",
+        time_from="now-1h",
+        time_to="now",
+    )
+    return dash.to_json_data()
+
+
+def render_matplotlib(df: pd.DataFrame, value_cols: list[str]):
+    """
+    用 Matplotlib 依據 df 實際畫圖，對應 grafanalib 定義的欄位。
+    回傳多個 matplotlib Figure 物件（給 gr.Gallery / gr.Plot 使用）
+    """
+    figs = []
+
+    # 第一張圖
+    fig1 = plt.figure()
+    plt.plot(df["time"], df[value_cols[0]])
+    plt.title(f"Time Series - {value_cols[0]}")
+    plt.xlabel("Time")
+    plt.ylabel(value_cols[0])
+    plt.xticks(rotation=20)
+    plt.tight_layout()
+    figs.append(fig1)
+
+    # 第二張圖（選配）
+    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.xlabel("Time")
+        plt.ylabel(value_cols[1])
+        plt.xticks(rotation=20)
+        plt.tight_layout()
+        figs.append(fig2)
+
+    return figs
+
+
+def pipeline(file, series_choice):
+    """
+    主要管線：
+    1) 讀 CSV（或用示範資料）
+    2) 決定要展示的欄位
+    3) 用 grafanalib 產出 Dashboard JSON
+    4) 用 Matplotlib 畫圖
+    """
+    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 以外）。")
+
+    # 若使用者有選擇，以選擇優先；否則用前兩個
+    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]
+
+    dash_json = build_grafanalib_dashboard(chosen)
+    figs = render_matplotlib(df, chosen)
+
+    # 輸出 JSON（pretty）
+    dash_json_str = json.dumps(dash_json, ensure_ascii=False, indent=2, default=str)
+
+    # 讓使用者可以下載 JSON
+    json_bytes = io.BytesIO(dash_json_str.encode("utf-8"))
+    json_bytes.name = "dashboard.json"
+
+    return figs, dash_json_str, json_bytes, df
+
+
+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 端實際繪圖的呈現。")
+
+    with gr.Row():
+        file_in = gr.File(label="上傳 CSV（可空，會用示範資料）", file_types=[".csv"])
+        series_multiselect = gr.CheckboxGroup(label="選擇要呈現的數值欄位（不選則自動挑前兩個）", choices=[])
+
+    run_btn = gr.Button("產生 Dashboard 並繪圖")
+
+    with gr.Row():
+        gallery = gr.Gallery(label="圖表預覽（Matplotlib）", height=400)
+    with gr.Row():
+        json_box = gr.Code(label="grafanalib 輸出的 Dashboard JSON（可匯入真正的 Grafana）", language="json")
+    with gr.Row():
+        json_file = gr.File(label="下載 dashboard.json")
+
+    # 顯示 DataFrame（互動檢視）
+    df_view = gr.Dataframe(label="資料預覽（自動偵測 time + 數值欄位）", 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
+
+    file_in.change(
+        probe_columns,
+        inputs=[file_in],
+        outputs=[series_multiselect, df_view],
+    )
 
-with gr.Blocks() as demo:
-    gr.Markdown("### 模擬 Grafana Dashboard")
-    gr.Plot(show_chart)
+    run_btn.click(
+        pipeline,
+        inputs=[file_in, series_multiselect],
+        outputs=[gallery, json_box, json_file, df_view],
+    )
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()