fix(dashboard): split trends into 3 pages + fix chart dimensions

Dashboard was a single page — 30+ widgets + tiny charts competing for
space. Trends were invisible or very small (width/height both "0"
meant "inherit from group" which gave near-zero chart area).

Split into 3 dashboard pages:
  1. Control — Process Demand, Station Controls, MGC/Basin status,
     per-pump panels (unchanged, just moved off trend groups)
  2. Trends — 10 min — rolling 10-minute flow + power charts with
     width=12 (full group), height=8 (tall charts), 300 max points
  3. Trends — 1 hour — same layout with 60-minute window, 1800 points

All 3 pages auto-nav via the FlowFuse sidebar. Same data feed: the
per-pump trend_split function now wires to 4 charts (2 outputs × 2
pages) instead of 2.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

examples/pumpingstation-3pumps-dashboard/build_flow.py

@@ -165,15 +165,31 @@ def dashboard_scaffold():
             "groupGap": "12px", "groupBorderRadius": "6px", "widgetGap": "8px",
         },
     }
-    page = {
-        "id": "ui_page_ps_demo", "type": "ui-page",
-        "name": "Pumping Station — 3 Pumps", "ui": "ui_base_ps_demo",
+    page_control = {
+        "id": "ui_page_control", "type": "ui-page",
+        "name": "Control", "ui": "ui_base_ps_demo",
         "path": "/pumping-station-demo", "icon": "water_pump",
         "layout": "grid", "theme": "ui_theme_ps_demo",
         "breakpoints": [{"name": "Default", "px": "0", "cols": "12"}],
         "order": 1, "className": "",
     }
-    return [base, theme, page]
+    page_short = {
+        "id": "ui_page_short_trends", "type": "ui-page",
+        "name": "Trends — 10 min", "ui": "ui_base_ps_demo",
+        "path": "/pumping-station-demo/trends-short", "icon": "show_chart",
+        "layout": "grid", "theme": "ui_theme_ps_demo",
+        "breakpoints": [{"name": "Default", "px": "0", "cols": "12"}],
+        "order": 2, "className": "",
+    }
+    page_long = {
+        "id": "ui_page_long_trends", "type": "ui-page",
+        "name": "Trends — 1 hour", "ui": "ui_base_ps_demo",
+        "path": "/pumping-station-demo/trends-long", "icon": "timeline",
+        "layout": "grid", "theme": "ui_theme_ps_demo",
+        "breakpoints": [{"name": "Default", "px": "0", "cols": "12"}],
+        "order": 3, "className": "",
+    }
+    return [base, theme, page_control, page_short, page_long]
 
 
 def ui_group(group_id, name, page_id, width=6, order=1):
@@ -241,19 +257,33 @@ def ui_switch(node_id, tab, x, y, group, name, label, on_value, off_value,
     }
 
 
-def ui_chart(node_id, tab, x, y, group, name, label, ymin=None, ymax=None):
+def ui_chart(node_id, tab, x, y, group, name, label,
+             width="12", height="6",
+             remove_older="10", remove_older_unit="60",
+             remove_older_points="200",
+             ymin=None, ymax=None, order=1):
+    """
+    FlowFuse ui-chart. Dimensions are in grid units:
+      width="12"  = full group width
+      height="6"  = about 300 px tall
+    `remove_older` + `remove_older_unit` define the rolling window
+    (e.g. "10" + "60" = 10 minutes). `remove_older_points` caps points
+    per series.
+    """
     return {
         "id": node_id, "type": "ui-chart", "z": tab, "group": group,
-        "name": name, "label": label, "order": 1, "chartType": "line",
+        "name": name, "label": label, "order": order, "chartType": "line",
         "category": "topic", "categoryType": "msg",
         "xAxisLabel": "", "xAxisType": "time", "xAxisTimeFormat": "auto",
         "yAxisLabel": "", "ymin": "" if ymin is None else str(ymin),
         "ymax": "" if ymax is None else str(ymax),
         "action": "append", "pointShape": "circle", "pointRadius": 2,
-        "showLegend": True, "removeOlder": "10", "removeOlderUnit": "60",
-        "removeOlderPoints": "200", "colors": [], "textColor": [],
-        "textColorDefault": True,
-        "width": "0", "height": "0", "className": "",
+        "showLegend": True,
+        "removeOlder": str(remove_older),
+        "removeOlderUnit": str(remove_older_unit),
+        "removeOlderPoints": str(remove_older_points),
+        "colors": [], "textColor": [], "textColorDefault": True,
+        "width": str(width), "height": str(height), "className": "",
         "x": x, "y": y,
         "wires": [[]],
     }
@@ -615,13 +645,19 @@ def build_ui_tab():
 
     # Dashboard scaffold (page + theme + base) + groups
     nodes += dashboard_scaffold()
-    PG = "ui_page_ps_demo"
+    PG = "ui_page_control"    # control page is the main page
     g_demand   = "ui_grp_demand"
     g_station  = "ui_grp_station"
     g_pump_a   = "ui_grp_pump_a"
     g_pump_b   = "ui_grp_pump_b"
     g_pump_c   = "ui_grp_pump_c"
-    g_trend    = "ui_grp_trend"
+    # Trend groups live on separate pages, not the control page.
+    PG_SHORT = "ui_page_short_trends"
+    PG_LONG  = "ui_page_long_trends"
+    g_trend_short_flow  = "ui_grp_trend_short_flow"
+    g_trend_short_power = "ui_grp_trend_short_power"
+    g_trend_long_flow   = "ui_grp_trend_long_flow"
+    g_trend_long_power  = "ui_grp_trend_long_power"
     g_mgc      = "ui_grp_mgc"
     g_ps       = "ui_grp_ps"
     nodes += [
@@ -632,7 +668,11 @@ def build_ui_tab():
         ui_group(g_pump_a,  "4a. Pump A",         PG, width=4,  order=5),
         ui_group(g_pump_b,  "4b. Pump B",         PG, width=4,  order=6),
         ui_group(g_pump_c,  "4c. Pump C",         PG, width=4,  order=7),
-        ui_group(g_trend,   "5. Trends",          PG, width=12, order=8),
+        # Trends on separate pages
+        ui_group(g_trend_short_flow,  "Flow (10 min)",  PG_SHORT, width=12, order=1),
+        ui_group(g_trend_short_power, "Power (10 min)", PG_SHORT, width=12, order=2),
+        ui_group(g_trend_long_flow,   "Flow (1 hour)",  PG_LONG,  width=12, order=1),
+        ui_group(g_trend_long_power,  "Power (1 hour)", PG_LONG,  width=12, order=2),
     ]
 
     nodes.append(comment("c_ui_title", TAB_UI, LANE_X[2], 20,
@@ -874,9 +914,8 @@ def build_ui_tab():
             target_in_ids=[f"lin_seq_{pump}"]
         ))
 
-        # Trend feeder — TWO outputs so flow goes to flow chart, power to
-        # power chart. Previous bug: single output → both charts saw both
-        # series and trends were unreadable.
+        # Trend feeder — 2 outputs (flow / power), each wired to BOTH
+        # the short-term and long-term chart on their respective pages.
         nodes.append(function_node(
             f"trend_split_{pump}", TAB_UI, LANE_X[3], y_p + 80,
             f"trend split ({label})",
@@ -887,22 +926,54 @@ def build_ui_tab():
             "{ topic: '" + label + "', payload: Number(p.powerNum) } : null;\n"
             "return [flowMsg, powerMsg];",
             outputs=2,
-            wires=[["trend_chart_flow"], ["trend_chart_power"]]
+            wires=[
+                ["trend_short_flow", "trend_long_flow"],
+                ["trend_short_power", "trend_long_power"],
+            ]
         ))
 
-    # Trend charts (shared across all 3 pumps)
+    # ===== Trend charts — two pages, two charts per page =====
+    # Short-term (10 min rolling window) and long-term (1 hour).
+    # Same data feed; different removeOlder settings.
     y_charts = y_pumps_start + len(PUMPS) * SECTION_GAP * 2 + 80
     nodes.append(comment("c_ui_trends", TAB_UI, LANE_X[2], y_charts,
-        "── Trends (shared by all pumps) ──",
-        "Each chart accepts msg.topic as the series name (categoryType=msg)."
+        "── Trend charts ── (feed to 4 charts on 2 pages)",
+        "Short-term (10 min) and long-term (1 h) trends share the same feed.\n"
+        "Each chart on its own page."
+    ))
+    # Short-term (10 min)
+    nodes.append(ui_chart(
+        "trend_short_flow",  TAB_UI, LANE_X[3], y_charts + 40,
+        g_trend_short_flow,
+        "Flow per pump — 10 min", "Flow per pump (m³/h)",
+        width="12", height="8",
+        remove_older="10", remove_older_unit="60", remove_older_points="300",
+        order=1,
     ))
     nodes.append(ui_chart(
-        "trend_chart_flow",  TAB_UI, LANE_X[3], y_charts + 40, g_trend,
-        "Flow per pump (m³/h)",  "Flow per pump"
+        "trend_short_power", TAB_UI, LANE_X[3], y_charts + 120,
+        g_trend_short_power,
+        "Power per pump — 10 min", "Power per pump (kW)",
+        width="12", height="8",
+        remove_older="10", remove_older_unit="60", remove_older_points="300",
+        order=1,
+    ))
+    # Long-term (1 hour)
+    nodes.append(ui_chart(
+        "trend_long_flow",   TAB_UI, LANE_X[3], y_charts + 200,
+        g_trend_long_flow,
+        "Flow per pump — 1 hour", "Flow per pump (m³/h)",
+        width="12", height="8",
+        remove_older="60", remove_older_unit="60", remove_older_points="1800",
+        order=1,
     ))
     nodes.append(ui_chart(
-        "trend_chart_power", TAB_UI, LANE_X[3], y_charts + 100, g_trend,
-        "Power per pump (kW)", "Power per pump"
+        "trend_long_power",  TAB_UI, LANE_X[3], y_charts + 280,
+        g_trend_long_power,
+        "Power per pump — 1 hour", "Power per pump (kW)",
+        width="12", height="8",
+        remove_older="60", remove_older_unit="60", remove_older_points="1800",
+        order=1,
     ))
 
     return nodes