Update app.py

app.py

@@ -6,9 +6,9 @@ from dateutil import tz
 import gradio as gr
 import pandas as pd
 import matplotlib.pyplot as plt
-import numpy as np  # 隨機示範資料
+import numpy as np
+import matplotlib.dates as mdates  # 時間軸格式化
 
-# grafanalib：用來「定義」Grafana Dashboard JSON（不在這裡畫圖）
 from grafanalib.core import (
     Dashboard, Graph, Row, Target, YAxis, YAxes, Time
 )
@@ -20,34 +20,29 @@ 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 = np.random.rand(len(times))              # 0~1 浮點數
-    cnt = np.random.randint(0, 11, size=len(times))  # 0~10 整數
-    df = pd.DataFrame({"time": times, "amplitude": amp, "count": cnt})
-    return df
+    amp = np.random.rand(len(times))                      # 0~1 浮點數
+    cnt = np.random.randint(0, 11, size=len(times))       # 0~10 整數
+    return pd.DataFrame({"time": times, "amplitude": amp, "count": cnt})
 
 
 def load_csv(file: gr.File | None) -> pd.DataFrame:
-    """讀 CSV（需含時間欄）；若未上傳則回傳隨機示範資料。"""
+    """讀 CSV（需含時間欄）；若未上傳則回傳隨機示範資料並排序、統一時區。"""
     if file is None:
         df = make_demo_dataframe()
     else:
         df = pd.read_csv(file.name)
-        time_col_candidates = ["time", "timestamp", "datetime", "date"]
-        time_col = next((c for c in time_col_candidates if c in df.columns), None)
+        time_col = next((c for c in ["time", "timestamp", "datetime", "date"] if c in df.columns), None)
         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)
-
-        # 統一時區
+        df = df.rename(columns={time_col: "time"})
         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)
-
     return df.sort_values("time").reset_index(drop=True)
 
 
@@ -55,18 +50,11 @@ def load_csv(file: gr.File | None) -> pd.DataFrame:
 # grafanalib JSON builder
 # -----------------------------
 def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolling_window: int) -> dict:
-    """
-    產生 Grafana Dashboard JSON：
-      - Panel 1：Line（第一個數值欄位）
-      - Panel 2：Bar 或 Mixed（若 dual_axis=True 則同面板加上第一欄折線）
-      - Panel 3：Line（第一個數值欄位的 rolling mean）
-    """
     panels = []
 
-    # Panel 1：折線
     panels.append(
         Graph(
-            title=f"Time Series - {series_columns[0]}",
+            title=f"{series_columns[0]}",
             dataSource="(example)",
             targets=[Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0])],
             lines=True, bars=False, points=False,
@@ -74,19 +62,13 @@ def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolli
         )
     )
 
-    # Panel 2：柱狀（若有第二欄）；dual_axis=True 時，同面板加入第一欄折線
     if len(series_columns) > 1:
         targets = [Target(expr=f"{series_columns[1]}", legendFormat=series_columns[1])]
-        lines = False
-        bars = True
-        title = f"Event Count (Bar) - {series_columns[1]}"
-
+        lines, bars, title = False, True, f"{series_columns[1]} (bar)"
         if dual_axis:
             targets.append(Target(expr=f"{series_columns[0]}", legendFormat=f"{series_columns[0]} (line)"))
-            lines = True
-            bars = True
-            title = f"Bar+Line (Mixed) - {series_columns[1]} / {series_columns[0]}"
-
+            lines, bars = True, True
+            title = f"{series_columns[1]} (bar) + {series_columns[0]} (line)"
         panels.append(
             Graph(
                 title=title,
@@ -97,10 +79,9 @@ def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolli
             )
         )
 
-    # Panel 3：Rolling Mean（第一欄）
     panels.append(
         Graph(
-            title=f"Rolling Mean ({rolling_window}) - {series_columns[0]}",
+            title=f"{series_columns[0]} rolling({rolling_window})",
             dataSource="(example)",
             targets=[Target(expr=f"{series_columns[0]}_rolling{rolling_window}",
                             legendFormat=f"{series_columns[0]}_rolling{rolling_window}")],
@@ -109,52 +90,72 @@ def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolli
         )
     )
 
-    dash = Dashboard(
-        title="Seismology Demo Dashboard (grafanalib + Gradio)",
+    return Dashboard(
+        title="Grafana-like Demo (grafanalib + Gradio)",
         rows=[Row(panels=panels)],
         timezone="browser",
         time=Time("now-1h", "now"),
-    )
-    return dash.to_json_data()
+    ).to_json_data()
 
 
 # -----------------------------
-# Matplotlib rendering
+# Matplotlib helpers（統一外觀）
 # -----------------------------
+def _style_time_axis(ax):
+    """時間軸：精簡刻度 + 自動格式化，適合手機寬度"""
+    locator = mdates.AutoDateLocator(minticks=3, maxticks=6)
+    formatter = mdates.ConciseDateFormatter(locator)
+    ax.xaxis.set_major_locator(locator)
+    ax.xaxis.set_major_formatter(formatter)
+    ax.tick_params(axis="x", labelrotation=20, labelsize=9)
+    ax.tick_params(axis="y", labelsize=9)
+    ax.grid(True, which="major", alpha=0.25)
+    plt.margins(x=0.02, y=0.05)  # 留一點白邊
+
+
 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(col)
-    plt.xticks(rotation=20)
-    plt.tight_layout()
+    fig, ax = plt.subplots(figsize=(6.5, 3.6))
+    ax.plot(df["time"], df[col], linewidth=1.6)
+    ax.set_title(col, fontsize=12, pad=8)
+    ax.set_xlabel("Time", fontsize=10)
+    ax.set_ylabel(col, fontsize=10)
+    _style_time_axis(ax)
+    fig.tight_layout()
     return fig
 
 
+def _infer_bar_width_days(times: pd.Series) -> float:
+    """依時間間距估算柱寬（單位：天）。避免整片藍牆。"""
+    if len(times) < 2:
+        return 60 / 86400  # 60秒
+    deltas = (times.iloc[1:].values - times.iloc[:-1].values) / np.timedelta64(1, 's')
+    med = np.median(deltas) if len(deltas) else 60
+    return max(10, med * 0.8) / 86400.0  # 取 80% 的中位數，至少 10 秒
+
+
 def render_bar_or_dual(df: pd.DataFrame, second_col: str, first_col: str, dual_axis: bool):
-    fig, ax = plt.subplots()
-    ax.bar(df["time"], df[second_col], label=second_col)
-    ax.set_xlabel("Time")
-    ax.set_ylabel(second_col)
-    title = f"Event Count (Bar) - {second_col}"
+    fig, ax = plt.subplots(figsize=(6.5, 3.6))
+    width = _infer_bar_width_days(df["time"])
+    x = mdates.date2num(df["time"].to_pydatetime())
+    ax.bar(x, df[second_col], width=width, align="center", label=second_col)
+    ax.set_xlabel("Time", fontsize=10)
+    ax.set_ylabel(second_col, fontsize=10)
+    title = f"{second_col} (bar)"
 
     if dual_axis:
         ax2 = ax.twinx()
-        ax2.plot(df["time"], df[first_col], label=f"{first_col} (line)")
-        ax2.set_ylabel(first_col)
-        title = f"Bar+Line (Dual Axis) - {second_col} / {first_col}"
-
-        # 合併圖例
+        ax2.plot(df["time"], df[first_col], linewidth=1.6, label=f"{first_col} (line)")
+        ax2.set_ylabel(first_col, fontsize=10)
+        title = f"{second_col} (bar) + {first_col} (line)"
         h1, l1 = ax.get_legend_handles_labels()
         h2, l2 = ax2.get_legend_handles_labels()
-        ax.legend(h1 + h2, l1 + l2, loc="upper left")
+        ax.legend(h1 + h2, l1 + l2, loc="upper left", fontsize=9)
     else:
-        ax.legend(loc="upper left")
+        ax.legend(loc="upper left", fontsize=9)
 
-    plt.title(title)
-    plt.xticks(rotation=20)
-    plt.tight_layout()
+    ax.set_title(title, fontsize=12, pad=8)
+    _style_time_axis(ax)
+    fig.tight_layout()
     return fig
 
 
@@ -162,13 +163,13 @@ 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()
+    fig, ax = plt.subplots(figsize=(6.5, 3.6))
+    ax.plot(df["time"], df[roll_col], linewidth=1.6)
+    ax.set_title(f"{col} rolling({window})", fontsize=12, pad=8)
+    ax.set_xlabel("Time", fontsize=10)
+    ax.set_ylabel(roll_col, fontsize=10)
+    _style_time_axis(ax)
+    fig.tight_layout()
     return fig, df
 
 
@@ -178,43 +179,32 @@ def render_rolling(df: pd.DataFrame, col: str, window: int = 5):
 def pipeline(file, series_choice, dual_axis, rolling_window):
     """
     1) 讀 CSV（或示範）
-    2) 決定欄位（第一欄做折線+rolling；第二欄做柱狀或雙軸混合）
+    2) 第一欄→折線與 rolling；第二欄→柱狀/雙軸
     3) 產出 grafanalib Dashboard JSON
     4) 回傳三張圖、dashboard.json 路徑、資料表（含 rolling）、demo.csv 路徑
     """
     df = load_csv(file)
-
     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]
+    chosen = [c for c in (series_choice or numeric_cols[:2]) if c in numeric_cols]
     if not chosen:
         chosen = numeric_cols[:2]
 
     # Dashboard JSON
     dash_json = build_grafanalib_dashboard(chosen, bool(dual_axis), int(rolling_window))
     dash_json_str = json.dumps(dash_json, ensure_ascii=False, indent=2, default=str)
-
-    # 寫入暫存檔給 gr.File
     with tempfile.NamedTemporaryFile(delete=False, suffix=".json", mode="w", encoding="utf-8") as f:
         f.write(dash_json_str)
         json_path = f.name
 
-    # 圖形
+    # Figures
     fig1 = render_line(df, chosen[0])
-    if len(chosen) > 1:
-        fig2 = render_bar_or_dual(df, chosen[1], chosen[0], bool(dual_axis))
-    else:
-        fig2 = plt.figure()
-        plt.text(0.5, 0.5, "第二張圖：未選第二數值欄", ha="center", va="center", fontsize=12)
-        plt.axis("off")
-        plt.tight_layout()
-
+    fig2 = render_bar_or_dual(df, chosen[1], chosen[0], bool(dual_axis)) if len(chosen) > 1 else _placeholder_fig()
     fig3, df_with_roll = render_rolling(df.copy(), chosen[0], window=int(rolling_window))
 
-    # 產生 demo CSV 檔案（每次呼叫都更新內容 → 下載也會不同）
+    # demo.csv（每次都用全新隨機）
     demo_df = make_demo_dataframe()
     with tempfile.NamedTemporaryFile(delete=False, suffix=".csv", mode="w", encoding="utf-8") as f:
         demo_df.to_csv(f, index=False)
@@ -223,11 +213,19 @@ def pipeline(file, series_choice, dual_axis, rolling_window):
     return fig1, fig2, fig3, dash_json_str, json_path, df_with_roll, demo_csv_path
 
 
+def _placeholder_fig():
+    fig, ax = plt.subplots(figsize=(6.5, 3.6))
+    ax.text(0.5, 0.5, "未選第二數值欄", ha="center", va="center", fontsize=12)
+    ax.axis("off")
+    fig.tight_layout()
+    return fig
+
+
 # -----------------------------
 # Regenerate demo helper
 # -----------------------------
 def regenerate_demo(series_choice, dual_axis, rolling_window):
-    """忽略上傳檔案，直接用『全新隨機示範資料』跑一次。"""
+    """忽略上傳檔案，使用全新隨機示範資料。"""
     return pipeline(file=None, series_choice=series_choice, dual_axis=dual_axis, rolling_window=rolling_window)
 
 
@@ -236,14 +234,14 @@ def regenerate_demo(series_choice, dual_axis, rolling_window):
 # -----------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.Markdown(
-        "## grafanalib + Gradio 隨機示範\n"
-        "🔁 你可以點「**重新產生示範資料**」來快速換一批**全新隨機**數據。"
+        "## Grafana-like 隨機示範\n"
+        "為手機優化：精簡時間軸、控制刻度、加上網格與間距。"
     )
 
     with gr.Row():
         file_in = gr.File(label="上傳 CSV（可空，會用隨機示範資料）", file_types=[".csv"])
         series_multiselect = gr.CheckboxGroup(
-            label="數值欄位選擇（第一欄→折線與 Rolling；第二欄→柱狀/雙軸，選配）",
+            label="數值欄位（第一欄→折線/rolling；第二欄→柱狀/雙軸）",
             choices=[]
         )
 
@@ -253,12 +251,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     with gr.Row():
         run_btn = gr.Button("用『上傳/當前資料』產生 Dashboard")
-        regen_btn = gr.Button("🔁 重新產生示範資料（隨機）")  # ← 新增
+        regen_btn = gr.Button("🔁 重新產生示範資料（隨機）")
 
     with gr.Row():
-        plot1 = gr.Plot(label="圖 1：Line")
-        plot2 = gr.Plot(label="圖 2：Bar / Dual Axis")
-        plot3 = gr.Plot(label="圖 3：Rolling Mean")
+        plot1 = gr.Plot(label="1：Line", scale=1)
+    with gr.Row():
+        plot2 = gr.Plot(label="2：Bar / Dual Axis", scale=1)
+    with gr.Row():
+        plot3 = gr.Plot(label="3：Rolling Mean", scale=1)
 
     json_box = gr.Code(label="grafanalib Dashboard JSON", language="json")
     json_file = gr.File(label="下載 dashboard.json")
@@ -269,14 +269,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     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
+        return gr.CheckboxGroup(choices=numeric_cols, value=numeric_cols[:2]), df
 
-    file_in.change(
-        probe_columns,
-        inputs=[file_in],
-        outputs=[series_multiselect, df_view],
-    )
+    file_in.change(probe_columns, inputs=[file_in], outputs=[series_multiselect, df_view])
 
     # 初次載入：以隨機示範資料跑一次並更新欄位清單
     def initial_load():
@@ -284,10 +279,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             file=None, series_choice=[], dual_axis=False, rolling_window="5"
         )
         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 (
             f1, f2, f3, dash_json, json_path, df, demo_csv_path,
-            gr.CheckboxGroup(choices=numeric_cols, value=default_select),
+            gr.CheckboxGroup(choices=numeric_cols, value=numeric_cols[:2]),
             False, "5"
         )