Spaces:
Sleeping
Sleeping
| # app.py | |
| import json | |
| import re | |
| import tempfile | |
| from datetime import datetime, timedelta | |
| from dateutil import tz | |
| import logging | |
| import gradio as gr | |
| import pandas as pd | |
| import matplotlib.pyplot as plt | |
| import numpy as np | |
| import matplotlib.dates as mdates | |
| import folium | |
| from matplotlib import cm | |
| import branca.colormap as bcm | |
| import folium.plugins as plugins | |
| from matplotlib.patches import Wedge, Rectangle, FancyArrowPatch | |
| # -------- grafanalib(可選;未安裝則降級) -------- | |
| try: | |
| from grafanalib.core import ( | |
| Dashboard, Graph, Row, Target, YAxis, YAxes, Time, BarGauge | |
| ) | |
| GRAFANA_AVAILABLE = True | |
| except Exception: | |
| GRAFANA_AVAILABLE = False | |
| # 日誌 | |
| logging.basicConfig(level=logging.DEBUG) | |
| logger = logging.getLogger(__name__) | |
| TAIPEI = tz.gettz("Asia/Taipei") | |
| # ----------------------------- | |
| # Google Drive 連結處理 | |
| # ----------------------------- | |
| DRIVE_PRESETS = [ | |
| "https://drive.google.com/file/d/15yZ4QicICKZCnX6vjcD9JNXjnJmMFJD4/view?usp=drivesdk", | |
| "https://drive.google.com/file/d/1dqazYh_YzNNMbkUpgLRKSE9Y3ioPhtFu/view?usp=drivesdk", | |
| "https://drive.google.com/file/d/1A23f4q8DXHpoRIN5UQsDd6eM8jJ_Ruf8/view?usp=drivesdk", | |
| ] | |
| def normalize_drive_url(url: str) -> str: | |
| if not isinstance(url, str) or not url.strip(): | |
| raise ValueError("請提供有效的 Google 連結") | |
| url = url.strip() | |
| m = re.search(r"https://docs\.google\.com/spreadsheets/d/([a-zA-Z0-9-_]+)", url) | |
| if m: | |
| sheet_id = m.group(1) | |
| return f"https://docs.google.com/spreadsheets/d/{sheet_id}/export?format=csv" | |
| m = re.search(r"https://drive\.google\.com/file/d/([a-zA-Z0-9-_]+)/", url) | |
| if m: | |
| file_id = m.group(1) | |
| return f"https://drive.google.com/uc?export=download&id={file_id}" | |
| return url | |
| # ----------------------------- | |
| # Demo / Data loading with dynamic update | |
| # ----------------------------- | |
| def make_demo_dataframe(last_time=None) -> tuple[pd.DataFrame, datetime]: | |
| if last_time is None: | |
| last_time = datetime.now(tz=TAIPEI) - timedelta(minutes=60) | |
| else: | |
| last_time = last_time + timedelta(minutes=1) | |
| times = [last_time + timedelta(minutes=i) for i in range(61)] | |
| amp = np.random.rand(len(times)) | |
| cnt = np.random.randint(0, 11, size=len(times)) | |
| lats = np.random.uniform(21.8, 25.3, size=len(times)) | |
| lons = np.random.uniform(120.0, 122.0, size=len(times)) | |
| df = pd.DataFrame({"time": times, "amplitude": amp, "count": cnt, "lat": lats, "lon": lons}) | |
| df["pid"] = np.arange(len(df)) | |
| logger.debug(f"Generated new data with last_time: {last_time}") | |
| return df, last_time | |
| def _finalize_time(df: pd.DataFrame) -> pd.DataFrame: | |
| time_col = next((c for c in ["time", "timestamp", "datetime", "date"] if c in df.columns), None) | |
| if time_col is None: | |
| raise ValueError("資料需包含時間欄位(time/timestamp/datetime/date 其一)") | |
| df[time_col] = pd.to_datetime(df[time_col], errors="coerce") | |
| if df[time_col].isna().all(): | |
| raise ValueError("時間欄位解析失敗,請確認格式") | |
| df = df.rename(columns={time_col: "time"}) | |
| try: | |
| if df["time"].dt.tz is None: | |
| df["time"] = df["time"].dt.tz_localize(TAIPEI) | |
| else: | |
| df["time"] = df["time"].dt.tz_convert(TAIPEI) | |
| except Exception: | |
| def _to_tpe(t): | |
| if t.tzinfo is None: | |
| return t.tz_localize(TAIPEI) | |
| return t.tz_convert(TAIPEI) | |
| df["time"] = df["time"].apply(_to_tpe) | |
| return df.sort_values("time").reset_index(drop=True) | |
| def load_csv(file: gr.File | None) -> pd.DataFrame: | |
| try: | |
| df = pd.read_csv(file.name) | |
| return _finalize_time(df) | |
| except Exception as e: | |
| raise ValueError(f"CSV 載入失敗:{str(e)}") | |
| def load_drive_csv(sheet_or_file_url: str) -> pd.DataFrame: | |
| try: | |
| url = normalize_drive_url(sheet_or_file_url) | |
| df = pd.read_csv(url) | |
| return _finalize_time(df) | |
| except Exception as e: | |
| raise ValueError(f"Google 連結載入失敗:{str(e)}") | |
| def load_data(source: str, file: gr.File | None = None, sheet_url: str = "", last_time=None) -> tuple[pd.DataFrame, datetime | None]: | |
| if source == "drive": | |
| if not sheet_url: | |
| raise ValueError("請選擇 Google 連結") | |
| return load_drive_csv(sheet_url), None | |
| elif source == "upload": | |
| if file is None: | |
| raise ValueError("請上傳 CSV 檔") | |
| return load_csv(file), None | |
| else: | |
| return make_demo_dataframe(last_time) | |
| # ----------------------------- | |
| # 資料過濾(時區安全) | |
| # ----------------------------- | |
| def _to_taipei(dt_like): | |
| ts = pd.to_datetime(dt_like, errors="coerce") | |
| if pd.isna(ts): | |
| return None | |
| if ts.tzinfo is None: | |
| return ts.tz_localize(TAIPEI) | |
| return ts.tz_convert(TAIPEI) | |
| def filter_data(df: pd.DataFrame, start_time: str, end_time: str) -> pd.DataFrame: | |
| if start_time: | |
| st = _to_taipei(start_time) | |
| if st is not None: | |
| df = df[df["time"] >= st] | |
| if end_time: | |
| et = _to_taipei(end_time) | |
| if et is not None: | |
| df = df[df["time"] <= et] | |
| return df | |
| # ----------------------------- | |
| # grafanalib JSON(可降級) | |
| # ----------------------------- | |
| def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolling_window: int) -> dict: | |
| if not GRAFANA_AVAILABLE: | |
| return { | |
| "error": "grafanalib 未安裝。如需啟用,請在 requirements.txt 加入:grafanalib", | |
| "series": series_columns, | |
| "dual_axis": bool(dual_axis), | |
| "rolling_window": int(rolling_window), | |
| } | |
| panels = [ | |
| Graph( | |
| title=f"{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")) | |
| ), | |
| ] | |
| if len(series_columns) > 1: | |
| targets = [Target(expr=f"{series_columns[1]}", legendFormat=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, bars = True, True | |
| title = f"{series_columns[1]} (bar) + {series_columns[0]} (line)" | |
| panels.append( | |
| Graph( | |
| title=title, | |
| dataSource="(example)", | |
| targets=targets, | |
| lines=lines, bars=bars, points=False, | |
| yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short")) | |
| ) | |
| ) | |
| panels.extend([ | |
| Graph( | |
| 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}")], | |
| lines=True, bars=False, points=False, | |
| yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short")) | |
| ), | |
| BarGauge( | |
| title=f"Latest {series_columns[0]}", | |
| dataSource="(example)", | |
| targets=[Target(expr=f"last({series_columns[0]})", legendFormat=series_columns[0])] | |
| ), | |
| ]) | |
| return Dashboard( | |
| title="Grafana-like Demo (grafanalib + Gradio)", | |
| rows=[Row(panels=panels)], | |
| timezone="browser", | |
| time=Time("now-1h", "now") | |
| ).to_json_data() | |
| # ----------------------------- | |
| # 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 _normalize_times(series: pd.Series) -> pd.Series: | |
| s = series.copy() | |
| try: | |
| if s.dt.tz is not None: | |
| s = s.dt.tz_convert("UTC").dt.tz_localize(None) | |
| except Exception: | |
| s = pd.to_datetime(s, errors="coerce").dt.tz_convert("UTC").dt.tz_localize(None) | |
| return s | |
| def render_line(df, col): | |
| times = _normalize_times(df["time"]) | |
| fig, ax = plt.subplots(figsize=(6, 3)) | |
| ax.plot(times, df[col], linewidth=1.6) | |
| ax.set_title(col, fontsize=12, pad=8) | |
| ax.set_xlabel("Time") | |
| ax.set_ylabel(col) | |
| _style_time_axis(ax) | |
| fig.tight_layout() | |
| return fig | |
| def render_bar_or_dual(df, second_col, first_col, dual_axis): | |
| times = _normalize_times(df["time"]) | |
| if len(times) >= 2: | |
| delta_sec = pd.to_timedelta(times.diff(), errors="coerce").dt.total_seconds().median() | |
| if pd.isna(delta_sec) or delta_sec <= 0: | |
| delta_sec = 60.0 | |
| else: | |
| delta_sec = 60.0 | |
| width_days = max(10.0, float(delta_sec) * 0.8) / 86400.0 | |
| x = mdates.date2num(times.dt.to_pydatetime().tolist()) | |
| fig, ax = plt.subplots(figsize=(6, 3)) | |
| ax.bar(x, df[second_col], width=width_days, align="center", label=second_col) | |
| title = f"{second_col} (bar)" | |
| if dual_axis: | |
| ax2 = ax.twinx() | |
| ax2.plot(times, df[first_col], linewidth=1.6, label=f"{first_col} (line)") | |
| 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") | |
| else: | |
| ax.legend(loc="upper left") | |
| ax.set_title(title, fontsize=12, pad=8) | |
| _style_time_axis(ax) | |
| fig.tight_layout() | |
| return fig | |
| def render_rolling(df, col, window=5): | |
| times = _normalize_times(df["time"]) | |
| 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, ax = plt.subplots(figsize=(6, 3)) | |
| ax.plot(times, df[roll_col], linewidth=1.6) | |
| ax.set_title(f"{col} rolling({window})", fontsize=12, pad=8) | |
| ax.set_xlabel("Time") | |
| ax.set_ylabel(roll_col) | |
| _style_time_axis(ax) | |
| fig.tight_layout() | |
| return fig, df | |
| # ----------------------------- | |
| # Gauge | |
| # ----------------------------- | |
| def degree_range(n): | |
| start = np.linspace(0, 180, n + 1, endpoint=True)[0:-1] | |
| end = np.linspace(0, 180, n + 1, endpoint=True)[1:] | |
| mid_points = start + ((end - start) / 2.) | |
| return np.c_[start, end], mid_points | |
| def rot_text(ang): | |
| rotation = np.degrees(np.radians(ang) * np.pi / np.pi - np.radians(90)) | |
| return rotation | |
| def render_gauge(df, col): | |
| if df.empty: | |
| value = 0.0 | |
| min_val, max_val = 0.0, 1.0 | |
| else: | |
| value = float(df[col].iloc[-1]) | |
| min_val, max_val = float(df[col].min()), float(df[col].max()) | |
| normalized = (value - min_val) / (max_val - min_val + 1e-9) if max_val > min_val else 0.0 | |
| labels = ['LOW', 'MEDIUM', 'HIGH'] | |
| N = len(labels) | |
| colors = ['#007A00', '#FFCC00', '#ED1C24'] | |
| arrow = 1 if normalized < 0.33 else 2 if normalized < 0.66 else 3 | |
| fig, ax = plt.subplots(figsize=(5, 3.5)) | |
| ang_range, mid_points = degree_range(N) | |
| labels = labels[::-1] | |
| patches = [Wedge((0., 0.), .4, *ang, facecolor='w', lw=2) for ang in ang_range] + \ | |
| [Wedge((0., 0.), .4, *ang, width=0.10, facecolor=c, lw=2, alpha=0.5) for ang, c in zip(ang_range, colors)] | |
| for p in patches: | |
| ax.add_patch(p) | |
| for mid, lab in zip(mid_points, labels): | |
| ax.text(0.35 * np.cos(np.radians(mid)), 0.35 * np.sin(np.radians(mid)), | |
| lab, ha='center', va='center', fontsize=12, fontweight='bold', rotation=rot_text(mid)) | |
| ax.add_patch(Rectangle((-0.4, -0.1), 0.8, 0.1, facecolor='w', lw=2)) | |
| ax.text(0, -0.05, f"Latest {col}: {value:.2f}", ha='center', va='center', fontsize=12, fontweight='bold') | |
| pos = mid_points[abs(arrow - N)] | |
| ax.arrow(0, 0, 0.225 * np.cos(np.radians(pos)), 0.225 * np.sin(np.radians(pos)), | |
| width=0.04, head_width=0.09, head_length=0.1, fc='k', ec='k') | |
| ax.add_patch(FancyArrowPatch((0, 0), (0.01 * np.cos(np.radians(pos)), 0.01 * np.sin(np.radians(pos))), | |
| mutation_scale=10, fc='k', ec='k')) | |
| ax.set_frame_on(False) | |
| ax.set_xticks([]) | |
| ax.set_yticks([]) | |
| ax.axis('equal') | |
| plt.tight_layout() | |
| return fig | |
| # ----------------------------- | |
| # Folium map | |
| # ----------------------------- | |
| def _to_hex_color(value: float, cmap=cm.viridis) -> str: | |
| rgba = cmap(value) | |
| return "#{:02x}{:02x}{:02x}".format(int(rgba[0]*255), int(rgba[1]*255), int(rgba[2]*255)) | |
| def render_map_folium(df: pd.DataFrame, value_col: str = "amplitude", size_col: str = "count", | |
| cmap_name: str = "viridis", tiles: str = "OpenStreetMap", show_heatmap: bool = False) -> str: | |
| if df.empty: | |
| return "<p>無資料可顯示地圖</p>" | |
| center_lat, center_lon = df["lat"].mean(), df["lon"].mean() | |
| m = folium.Map(location=[center_lat, center_lon], zoom_start=7, tiles=tiles) | |
| vmin, vmax = float(df[value_col].min()), float(df[value_col].max()) | |
| cmap = getattr(cm, cmap_name) | |
| colormap = bcm.LinearColormap([_to_hex_color(i, cmap) for i in np.linspace(0, 1, 128)], vmin=vmin, vmax=vmax) | |
| colormap.caption = f"{value_col} (color scale)" | |
| colormap.add_to(m) | |
| if show_heatmap: | |
| heat_data = [[row["lat"], row["lon"], row[value_col]] for _, row in df.iterrows()] | |
| plugins.HeatMap(heat_data, radius=15, blur=10).add_to(m) | |
| else: | |
| for _, row in df.iterrows(): | |
| norm_val = (row[value_col] - vmin) / (vmax - vmin + 1e-9) if vmax > vmin else 0.0 | |
| popup_html = ( | |
| f"<b>#ID:</b> {int(row['pid'])}" | |
| f"<br><b>time:</b> {pd.to_datetime(row['time']).strftime('%Y-%m-%d %H:%M:%S')}" | |
| f"<br><b>{value_col}:</b> {row[value_col]:.4f}" | |
| f"<br><b>{size_col}:</b> {int(row[size_col]) if size_col in row else ''}" | |
| f"<br><b>lat/lon:</b> {row['lat']:.5f}, {row['lon']:.5f}" | |
| ) | |
| folium.CircleMarker( | |
| location=[row["lat"], row["lon"]], | |
| radius=(int(row[size_col]) if size_col in row else 3) + 3, | |
| color="black", weight=1, fill=True, fill_opacity=0.7, | |
| fill_color=_to_hex_color(norm_val, cmap), | |
| popup=folium.Popup(popup_html, max_width=300) | |
| ).add_to(m) | |
| return m._repr_html_() | |
| # ----------------------------- | |
| # 點位詳情 helpers | |
| # ----------------------------- | |
| def make_point_choices(df: pd.DataFrame) -> list[str]: | |
| choices = [] | |
| for _, r in df.iterrows(): | |
| amp = r.get('amplitude', np.nan) | |
| cnt = r.get('count', np.nan) | |
| amp_str = f"{amp:.3f}" if pd.notna(amp) else "NA" | |
| cnt_str = f"{int(cnt)}" if pd.notna(cnt) else "NA" | |
| choices.append(f"#{int(r['pid'])} | {pd.to_datetime(r['time']).strftime('%H:%M:%S')} | amp={amp_str} cnt={cnt_str}") | |
| return choices | |
| def pick_detail(df: pd.DataFrame, choice: str) -> pd.DataFrame: | |
| if not choice: | |
| return pd.DataFrame() | |
| try: | |
| pid = int(choice.split("|")[0].strip().lstrip("#")) | |
| return df[df["pid"] == pid].reset_index(drop=True) | |
| except Exception: | |
| return pd.DataFrame() | |
| # ----------------------------- | |
| # Main pipeline | |
| # ----------------------------- | |
| def pipeline(source, file, sheet_url, series_choice, dual_axis, rolling_window, | |
| cmap_choice, tiles_choice, start_time, end_time, show_heatmap, last_time=None): | |
| try: | |
| df, new_last_time = load_data(source, file, sheet_url, last_time) | |
| df = filter_data(df, start_time, end_time) | |
| numeric_cols = [c for c in df.columns | |
| if c not in ["time", "lat", "lon", "pid"] and pd.api.types.is_numeric_dtype(df[c])] | |
| chosen = [c for c in (series_choice or numeric_cols[:2]) if c in numeric_cols] or numeric_cols[:2] or [] | |
| if not chosen: | |
| raise ValueError("無有效數值欄位可視覺化") | |
| 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) | |
| with tempfile.NamedTemporaryFile(delete=False, suffix=".json", mode="w", encoding="utf-8") as f: | |
| f.write(dash_json_str) | |
| json_path = f.name | |
| fig1 = render_line(df, chosen[0]) | |
| fig2 = render_bar_or_dual(df, chosen[1], chosen[0], bool(dual_axis)) if len(chosen) > 1 else plt.figure() | |
| fig3, df_with_roll = render_rolling(df.copy(), chosen[0], int(rolling_window)) | |
| fig4 = render_gauge(df, chosen[0]) | |
| size_col = chosen[1] if len(chosen) > 1 else ("count" if "count" in df.columns else chosen[0]) | |
| map_html = render_map_folium(df, value_col=chosen[0], size_col=size_col, | |
| cmap_name=cmap_choice, tiles=tiles_choice, show_heatmap=bool(show_heatmap)) | |
| point_choices = [] if show_heatmap else make_point_choices(df) | |
| default_choice = None if show_heatmap else (point_choices[0] if point_choices else None) | |
| detail_df = pick_detail(df, default_choice) if default_choice else pd.DataFrame() | |
| demo_df = make_demo_dataframe()[0] | |
| with tempfile.NamedTemporaryFile(delete=False, suffix=".csv", mode="w", encoding="utf-8") as f: | |
| demo_df.to_csv(f, index=False) | |
| demo_csv_path = f.name | |
| # 新增:資料概況 | |
| info = f"資料筆數:**{len(df)}** .時間範圍:**{df['time'].min().strftime('%Y-%m-%d %H:%M:%S')} ~ {df['time'].max().strftime('%Y-%m-%d %H:%M:%S')}**(台北時區)" | |
| # 熱圖模式下停用點位下拉選單 | |
| point_selector_update = gr.update( | |
| choices=point_choices, | |
| value=default_choice, | |
| interactive=not bool(show_heatmap), | |
| label="選擇點位(*熱圖模式停用*)" if show_heatmap else "選擇點位" | |
| ) | |
| return ( | |
| fig1, fig2, fig3, fig4, | |
| map_html, | |
| dash_json_str, json_path, | |
| df_with_roll, demo_csv_path, | |
| point_selector_update, | |
| detail_df, | |
| "", # error | |
| new_last_time, | |
| info # data summary | |
| ) | |
| except Exception as e: | |
| logger.error(f"Pipeline error: {str(e)}") | |
| return ( | |
| None, None, None, None, | |
| "<p>錯誤:無資料顯示</p>", | |
| "", None, | |
| pd.DataFrame(), None, | |
| gr.update(choices=[], value=None, interactive=False), | |
| pd.DataFrame(), | |
| str(e), | |
| last_time, | |
| "(無資料)" | |
| ) | |
| def update_detail(df: pd.DataFrame, choice: str): | |
| return pick_detail(df, choice) | |
| # ----------------------------- | |
| # UI | |
| # ----------------------------- | |
| with gr.Blocks(theme=gr.themes.Soft()) as demo: | |
| gr.Markdown("## 動態時間序列 - Grafana-like Demo + Folium Map") | |
| last_time_state = gr.State(value=None) | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| source_radio = gr.Radio(["upload", "drive", "demo"], label="資料來源", value="demo") | |
| file_in = gr.File(label="上傳 CSV", file_types=[".csv"]) | |
| preset_dd = gr.Dropdown(label="Google 預設來源", choices=DRIVE_PRESETS, value=DRIVE_PRESETS[0]) | |
| with gr.Row(): | |
| start_time_in = gr.Textbox(label="開始時間", placeholder="2023-01-01 00:00:00") | |
| end_time_in = gr.Textbox(label="結束時間", placeholder="2023-12-31 23:59:59") | |
| with gr.Column(scale=1): | |
| series_multiselect = gr.CheckboxGroup(label="數值欄位", choices=[]) | |
| dual_axis_chk = gr.Checkbox(label="第二面板雙軸", value=False) | |
| rolling_dd = gr.Dropdown(label="Rolling window", choices=["3", "5", "10", "20"], value="5") | |
| cmap_dd = gr.Dropdown(label="地圖配色", choices=["viridis", "plasma", "inferno", "magma", "cividis", "coolwarm"], value="viridis") | |
| tiles_dd = gr.Dropdown(label="地圖底圖", choices=["OpenStreetMap", "Stamen Terrain", "Stamen Toner", "CartoDB positron", "CartoDB dark_matter"], value="OpenStreetMap") | |
| heatmap_chk = gr.Checkbox(label="顯示熱圖", value=False) | |
| with gr.Row(): | |
| run_btn = gr.Button("產生 Dashboard", scale=1) | |
| update_btn = gr.Button("手動更新數據", scale=1, elem_id="update_btn") | |
| interval = gr.Slider(5, 60, value=10, step=5, label="自動更新間隔 (秒)", elem_id="interval_slider") | |
| error_msg = gr.Markdown(value="", label="錯誤訊息", visible=True) | |
| with gr.Tabs(): | |
| with gr.Tab("圖表"): | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| plot1 = gr.Plot(label="1:Line") | |
| with gr.Column(scale=1): | |
| plot2 = gr.Plot(label="2:Bar / Dual Axis") | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| plot3 = gr.Plot(label="3:Rolling Mean") | |
| with gr.Column(scale=1): | |
| plot4 = gr.Plot(label="4:Gauge") | |
| with gr.Tab("地圖"): | |
| map_out = gr.HTML(label="5:Geo Map") | |
| with gr.Tab("JSON & 檔案"): | |
| json_box = gr.Code(label="grafanalib Dashboard JSON", language="json") | |
| json_file = gr.File(label="下載 dashboard.json") | |
| demo_csv_file = gr.File(label="下載示範資料 demo.csv") | |
| with gr.Tab("資料預覽"): | |
| df_view = gr.Dataframe(label="資料預覽") | |
| data_info = gr.Markdown("") # 新增:資料概況 | |
| with gr.Tab("點位詳情"): | |
| gr.Markdown("### 點位詳情") | |
| point_selector = gr.Dropdown(label="選擇點位", choices=[], value=None) | |
| detail_view = gr.Dataframe(label="選取點詳細資料") | |
| # 欄位探測 | |
| def probe_columns(source, file, preset_url, start_time, end_time): | |
| sheet_url = preset_url if source == "drive" else "" | |
| try: | |
| df, _ = load_data(source, file, sheet_url) | |
| df = filter_data(df, start_time, end_time) | |
| numeric_cols = [c for c in df.columns | |
| if c not in ["time", "lat", "lon", "pid"] and pd.api.types.is_numeric_dtype(df[c])] | |
| return gr.update(choices=numeric_cols, value=numeric_cols[:2]), df, "" | |
| except Exception as e: | |
| return gr.update(choices=[], value=[]), pd.DataFrame(), str(e) | |
| source_radio.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg]) | |
| file_in.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg]) | |
| preset_dd.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg]) | |
| start_time_in.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg]) | |
| end_time_in.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg]) | |
| # 初次載入:改用 demo(避免 Drive 權限問題造成「無資料」) | |
| demo.load( | |
| fn=lambda: pipeline("demo", None, "", [], False, "5", | |
| "viridis", "OpenStreetMap", "", "", False, None), | |
| outputs=[ | |
| plot1, plot2, plot3, plot4, | |
| map_out, | |
| json_box, json_file, | |
| df_view, demo_csv_file, | |
| point_selector, detail_view, | |
| error_msg, | |
| last_time_state, | |
| data_info | |
| ] | |
| ) | |
| # 產生與更新 | |
| run_btn.click( | |
| fn=pipeline, | |
| inputs=[source_radio, file_in, preset_dd, series_multiselect, dual_axis_chk, rolling_dd, | |
| cmap_dd, tiles_dd, start_time_in, end_time_in, heatmap_chk, last_time_state], | |
| outputs=[plot1, plot2, plot3, plot4, | |
| map_out, json_box, json_file, | |
| df_view, demo_csv_file, | |
| point_selector, detail_view, | |
| error_msg, | |
| last_time_state, | |
| data_info] | |
| ) | |
| update_btn.click( | |
| fn=pipeline, | |
| inputs=[source_radio, file_in, preset_dd, series_multiselect, dual_axis_chk, rolling_dd, | |
| cmap_dd, tiles_dd, start_time_in, end_time_in, heatmap_chk, last_time_state], | |
| outputs=[plot1, plot2, plot3, plot4, | |
| map_out, json_box, json_file, | |
| df_view, demo_csv_file, | |
| point_selector, detail_view, | |
| error_msg, | |
| last_time_state, | |
| data_info] | |
| ) | |
| # 點位詳情 | |
| point_selector.change(fn=update_detail, inputs=[df_view, point_selector], outputs=[detail_view]) | |
| # 自動更新(以 elem_id 綁定,避免 aria-label 變動) | |
| gr.HTML(""" | |
| <script> | |
| (function () { | |
| function getSliderEl() { | |
| const container = document.getElementById("interval_slider"); | |
| if (!container) return null; | |
| return container.querySelector('input[type="range"]'); | |
| } | |
| function getUpdateBtn() { | |
| const container = document.getElementById("update_btn"); | |
| if (!container) return null; | |
| return container.querySelector("button") || container; | |
| } | |
| let timer = null; | |
| function start() { | |
| const slider = getSliderEl(); | |
| const btn = getUpdateBtn(); | |
| if (!slider || !btn) { setTimeout(start, 800); return; } | |
| const setTimer = () => { | |
| if (timer) clearInterval(timer); | |
| timer = setInterval(() => btn.click(), parseInt(slider.value) * 1000); | |
| }; | |
| setTimer(); | |
| slider.addEventListener("input", setTimer); | |
| } | |
| start(); | |
| })(); | |
| </script> | |
| """) | |
| if __name__ == "__main__": | |
| demo.launch() |