fix(charts): add all required FlowFuse ui-chart properties + document in rule set
Some checks failed
CI / lint-and-test (push) Has been cancelled

Charts rendered blank because the helper was missing 15+ required
FlowFuse properties. The critical three:
  - interpolation: "linear" (no line drawn without it)
  - yAxisProperty: "payload" + yAxisPropertyType: "msg" (chart didn't
    know which msg field to plot)
  - xAxisPropertyType: "timestamp" (chart didn't know the x source)

Also: width/height must be numbers not strings, colors/textColor/
gridColor arrays must be present, and stackSeries/bins/xAxisFormat/
xAxisFormatType all need explicit values.

Fixed the ui_chart helper to include every property from the working
rotatingMachine/examples/03-Dashboard.json charts. Added the full
required-property template + gotcha list to the flow-layout rule set
(Section 4) so this class of bug is caught by reference on the next
chart build.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-04-14 08:04:43 +02:00
parent 06d81169e8
commit bc8138c3dc
3 changed files with 235 additions and 53 deletions

View File

@@ -3102,26 +3102,52 @@
"label": "Flow per pump (m\u00b3/h)",
"order": 1,
"chartType": "line",
"interpolation": "linear",
"category": "topic",
"categoryType": "msg",
"xAxisLabel": "",
"xAxisType": "time",
"xAxisTimeFormat": "auto",
"xAxisProperty": "",
"xAxisPropertyType": "timestamp",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"xmin": "",
"xmax": "",
"yAxisLabel": "",
"yAxisProperty": "payload",
"yAxisPropertyType": "msg",
"ymin": "",
"ymax": "",
"action": "append",
"pointShape": "circle",
"pointRadius": 2,
"showLegend": true,
"removeOlder": "10",
"removeOlderUnit": "60",
"removeOlderPoints": "300",
"colors": [],
"textColor": [],
"action": "append",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"bins": 10,
"colors": [
"#0095FF",
"#FF0000",
"#FF7F0E",
"#2CA02C",
"#A347E1",
"#D62728",
"#FF9896",
"#9467BD",
"#C5B0D5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"width": "12",
"height": "8",
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 12,
"height": 8,
"className": "",
"x": 900,
"y": 2320,
@@ -3138,26 +3164,52 @@
"label": "Power per pump (kW)",
"order": 1,
"chartType": "line",
"interpolation": "linear",
"category": "topic",
"categoryType": "msg",
"xAxisLabel": "",
"xAxisType": "time",
"xAxisTimeFormat": "auto",
"xAxisProperty": "",
"xAxisPropertyType": "timestamp",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"xmin": "",
"xmax": "",
"yAxisLabel": "",
"yAxisProperty": "payload",
"yAxisPropertyType": "msg",
"ymin": "",
"ymax": "",
"action": "append",
"pointShape": "circle",
"pointRadius": 2,
"showLegend": true,
"removeOlder": "10",
"removeOlderUnit": "60",
"removeOlderPoints": "300",
"colors": [],
"textColor": [],
"action": "append",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"bins": 10,
"colors": [
"#0095FF",
"#FF0000",
"#FF7F0E",
"#2CA02C",
"#A347E1",
"#D62728",
"#FF9896",
"#9467BD",
"#C5B0D5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"width": "12",
"height": "8",
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 12,
"height": 8,
"className": "",
"x": 900,
"y": 2400,
@@ -3174,26 +3226,52 @@
"label": "Flow per pump (m\u00b3/h)",
"order": 1,
"chartType": "line",
"interpolation": "linear",
"category": "topic",
"categoryType": "msg",
"xAxisLabel": "",
"xAxisType": "time",
"xAxisTimeFormat": "auto",
"xAxisProperty": "",
"xAxisPropertyType": "timestamp",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"xmin": "",
"xmax": "",
"yAxisLabel": "",
"yAxisProperty": "payload",
"yAxisPropertyType": "msg",
"ymin": "",
"ymax": "",
"action": "append",
"pointShape": "circle",
"pointRadius": 2,
"showLegend": true,
"removeOlder": "60",
"removeOlderUnit": "60",
"removeOlderPoints": "1800",
"colors": [],
"textColor": [],
"action": "append",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"bins": 10,
"colors": [
"#0095FF",
"#FF0000",
"#FF7F0E",
"#2CA02C",
"#A347E1",
"#D62728",
"#FF9896",
"#9467BD",
"#C5B0D5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"width": "12",
"height": "8",
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 12,
"height": 8,
"className": "",
"x": 900,
"y": 2480,
@@ -3210,26 +3288,52 @@
"label": "Power per pump (kW)",
"order": 1,
"chartType": "line",
"interpolation": "linear",
"category": "topic",
"categoryType": "msg",
"xAxisLabel": "",
"xAxisType": "time",
"xAxisTimeFormat": "auto",
"xAxisProperty": "",
"xAxisPropertyType": "timestamp",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"xmin": "",
"xmax": "",
"yAxisLabel": "",
"yAxisProperty": "payload",
"yAxisPropertyType": "msg",
"ymin": "",
"ymax": "",
"action": "append",
"pointShape": "circle",
"pointRadius": 2,
"showLegend": true,
"removeOlder": "60",
"removeOlderUnit": "60",
"removeOlderPoints": "1800",
"colors": [],
"textColor": [],
"action": "append",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"bins": 10,
"colors": [
"#0095FF",
"#FF0000",
"#FF7F0E",
"#2CA02C",
"#A347E1",
"#D62728",
"#FF9896",
"#9467BD",
"#C5B0D5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"width": "12",
"height": "8",
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 12,
"height": 8,
"className": "",
"x": 900,
"y": 2560,