RnD/EVOLV
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): split trends into 3 pages + fix chart dimensions
Some checks failed
CI / lint-and-test (push) Has been cancelled
Details

Browse Source 
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>
This commit is contained in:
znetsixe
2026-04-14 07:46:51 +02:00
parent 64944aa9d8
commit e280d87e6a
2 changed files with 289 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
examples/pumpingstation-3pumps-dashboard/flow.json
View File

@@ -1126,9 +1126,9 @@
}
},
{
"id": "ui_page_ps_demo",
"id": "ui_page_control",
"type": "ui-page",
"name": "Pumping Station \u2014 3 Pumps",
"name": "Control",
"ui": "ui_base_ps_demo",
"path": "/pumping-station-demo",
"icon": "water_pump",
@@ -1144,11 +1144,49 @@
"order": 1,
"className": ""
},
{
"id": "ui_page_short_trends",
"type": "ui-page",
"name": "Trends \u2014 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": ""
},
{
"id": "ui_page_long_trends",
"type": "ui-page",
"name": "Trends \u2014 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": ""
},
{
"id": "ui_grp_demand",
"type": "ui-group",
"name": "1. Process Demand",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "12",
"height": "1",
"order": 1,
@@ -1162,7 +1200,7 @@
"id": "ui_grp_station",
"type": "ui-group",
"name": "2. Station Controls",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "12",
"height": "1",
"order": 2,
@@ -1176,7 +1214,7 @@
"id": "ui_grp_mgc",
"type": "ui-group",
"name": "3a. MGC Status",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "6",
"height": "1",
"order": 3,
@@ -1190,7 +1228,7 @@
"id": "ui_grp_ps",
"type": "ui-group",
"name": "3b. Basin Status",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "6",
"height": "1",
"order": 4,
@@ -1204,7 +1242,7 @@
"id": "ui_grp_pump_a",
"type": "ui-group",
"name": "4a. Pump A",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "4",
"height": "1",
"order": 5,
@@ -1218,7 +1256,7 @@
"id": "ui_grp_pump_b",
"type": "ui-group",
"name": "4b. Pump B",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "4",
"height": "1",
"order": 6,
@@ -1232,7 +1270,7 @@
"id": "ui_grp_pump_c",
"type": "ui-group",
"name": "4c. Pump C",
"page": "ui_page_ps_demo",
"page": "ui_page_control",
"width": "4",
"height": "1",
"order": 7,
@@ -1243,13 +1281,55 @@
"visible": true
},
{
"id": "ui_grp_trend",
"id": "ui_grp_trend_short_flow",
"type": "ui-group",
"name": "5. Trends",
"page": "ui_page_ps_demo",
"name": "Flow (10 min)",
"page": "ui_page_short_trends",
"width": "12",
"height": "1",
"order": 8,
"order": 1,
"showTitle": true,
"className": "",
"groupType": "default",
"disabled": false,
"visible": true
},
{
"id": "ui_grp_trend_short_power",
"type": "ui-group",
"name": "Power (10 min)",
"page": "ui_page_short_trends",
"width": "12",
"height": "1",
"order": 2,
"showTitle": true,
"className": "",
"groupType": "default",
"disabled": false,
"visible": true
},
{
"id": "ui_grp_trend_long_flow",
"type": "ui-group",
"name": "Flow (1 hour)",
"page": "ui_page_long_trends",
"width": "12",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"groupType": "default",
"disabled": false,
"visible": true
},
{
"id": "ui_grp_trend_long_power",
"type": "ui-group",
"name": "Power (1 hour)",
"page": "ui_page_long_trends",
"width": "12",
"height": "1",
"order": 2,
"showTitle": true,
"className": "",
"groupType": "default",
@@ -2198,10 +2278,12 @@
"y": 1080,
"wires": [
[
"trend_chart_flow"
"trend_short_flow",
"trend_long_flow"
],
[
"trend_chart_power"
"trend_short_power",
"trend_long_power"
]
]
},
@@ -2548,10 +2630,12 @@
"y": 1480,
"wires": [
[
"trend_chart_flow"
"trend_short_flow",
"trend_long_flow"
],
[
"trend_chart_power"
"trend_short_power",
"trend_long_power"
]
]
},
@@ -2898,10 +2982,12 @@
"y": 1880,
"wires": [
[
"trend_chart_flow"
"trend_short_flow",
"trend_long_flow"
],
[
"trend_chart_power"
"trend_short_power",
"trend_long_power"
]
]
},
@@ -2909,19 +2995,19 @@
"id": "c_ui_trends",
"type": "comment",
"z": "tab_ui",
"name": "\u2500\u2500 Trends (shared by all pumps) \u2500\u2500",
"info": "Each chart accepts msg.topic as the series name (categoryType=msg).",
"name": "\u2500\u2500 Trend charts \u2500\u2500 (feed to 4 charts on 2 pages)",
"info": "Short-term (10 min) and long-term (1 h) trends share the same feed.\nEach chart on its own page.",
"x": 640,
"y": 2280,
"wires": []
},
{
"id": "trend_chart_flow",
"id": "trend_short_flow",
"type": "ui-chart",
"z": "tab_ui",
"group": "ui_grp_trend",
"name": "Flow per pump (m\u00b3/h)",
"label": "Flow per pump",
"group": "ui_grp_trend_short_flow",
"name": "Flow per pump \u2014 10 min",
"label": "Flow per pump (m\u00b3/h)",
"order": 1,
"chartType": "line",
"category": "topic",
@@ -2938,12 +3024,12 @@
"showLegend": true,
"removeOlder": "10",
"removeOlderUnit": "60",
"removeOlderPoints": "200",
"removeOlderPoints": "300",
"colors": [],
"textColor": [],
"textColorDefault": true,
"width": "0",
"height": "0",
"width": "12",
"height": "8",
"className": "",
"x": 900,
"y": 2320,
@@ -2952,12 +3038,12 @@
]
},
{
"id": "trend_chart_power",
"id": "trend_short_power",
"type": "ui-chart",
"z": "tab_ui",
"group": "ui_grp_trend",
"name": "Power per pump (kW)",
"label": "Power per pump",
"group": "ui_grp_trend_short_power",
"name": "Power per pump \u2014 10 min",
"label": "Power per pump (kW)",
"order": 1,
"chartType": "line",
"category": "topic",
@@ -2974,15 +3060,87 @@
"showLegend": true,
"removeOlder": "10",
"removeOlderUnit": "60",
"removeOlderPoints": "200",
"removeOlderPoints": "300",
"colors": [],
"textColor": [],
"textColorDefault": true,
"width": "0",
"height": "0",
"width": "12",
"height": "8",
"className": "",
"x": 900,
"y": 2380,
"y": 2400,
"wires": [
[]
]
},
{
"id": "trend_long_flow",
"type": "ui-chart",
"z": "tab_ui",
"group": "ui_grp_trend_long_flow",
"name": "Flow per pump \u2014 1 hour",
"label": "Flow per pump (m\u00b3/h)",
"order": 1,
"chartType": "line",
"category": "topic",
"categoryType": "msg",
"xAxisLabel": "",
"xAxisType": "time",
"xAxisTimeFormat": "auto",
"yAxisLabel": "",
"ymin": "",
"ymax": "",
"action": "append",
"pointShape": "circle",
"pointRadius": 2,
"showLegend": true,
"removeOlder": "60",
"removeOlderUnit": "60",
"removeOlderPoints": "1800",
"colors": [],
"textColor": [],
"textColorDefault": true,
"width": "12",
"height": "8",
"className": "",
"x": 900,
"y": 2480,
"wires": [
[]
]
},
{
"id": "trend_long_power",
"type": "ui-chart",
"z": "tab_ui",
"group": "ui_grp_trend_long_power",
"name": "Power per pump \u2014 1 hour",
"label": "Power per pump (kW)",
"order": 1,
"chartType": "line",
"category": "topic",
"categoryType": "msg",
"xAxisLabel": "",
"xAxisType": "time",
"xAxisTimeFormat": "auto",
"yAxisLabel": "",
"ymin": "",
"ymax": "",
"action": "append",
"pointShape": "circle",
"pointRadius": 2,
"showLegend": true,
"removeOlder": "60",
"removeOlderUnit": "60",
"removeOlderPoints": "1800",
"colors": [],
"textColor": [],
"textColorDefault": true,
"width": "12",
"height": "8",
"className": "",
"x": 900,
"y": 2560,
"wires": [
[]
]