Merge pull request #1386 from FlowFuse/chart-sane-defaults

Ensure sane defaults for x and y axis key properties
FlowFuse · Oct 12, 2024 · e7b34be · e7b34be
2 parents ba08995 + 7685592
commit e7b34be
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 3 deletions.
diff --git a/cypress/fixtures/flows/dashboard-chart-series-json.json b/cypress/fixtures/flows/dashboard-chart-series-json.json
@@ -0,0 +1,161 @@
+[
+    {
+        "id": "node-red-tab-charts",
+        "type": "tab",
+        "label": "UI Chart",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "be87d656fb6d60d9",
+        "type": "ui-button",
+        "z": "node-red-tab-charts",
+        "group": "dashboard-ui-group",
+        "name": "Load Finance Data",
+        "label": "Load Finance Data",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "[{\"year\":2021,\"Q1\":115,\"Q2\":207,\"Q3\":198,\"Q4\":163},{\"year\":2022,\"Q1\":170,\"Q2\":200,\"Q3\":230,\"Q4\":210},{\"year\":2023,\"Q1\":86,\"Q2\":140,\"Q3\":180,\"Q4\":138}]",
+        "payloadType": "json",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "x": 340,
+        "y": 860,
+        "wires": [
+            [
+                "bar-chart-finance"
+            ]
+        ]
+    },
+    {
+        "id": "bar-chart-finance",
+        "type": "ui-chart",
+        "z": "node-red-tab-charts",
+        "g": "23f6eaad0550d87f",
+        "group": "dashboard-ui-group",
+        "name": "Chart: Finance",
+        "label": "Finance Data",
+        "order": 4,
+        "chartType": "bar",
+        "category": "[\"Q1\", \"Q2\", \"Q3\", \"Q4\"]",
+        "categoryType": "json",
+        "xAxisLabel": "Year",
+        "xAxisProperty": "year",
+        "xAxisPropertyType": "property",
+        "xAxisType": "category",
+        "xAxisFormat": "",
+        "xAxisFormatType": "auto",
+        "xmin": "",
+        "xmax": "",
+        "yAxisLabel": "Profit",
+        "yAxisProperty": "radius",
+        "yAxisPropertyType": "property",
+        "ymin": "",
+        "ymax": "",
+        "bins": "",
+        "action": "append",
+        "stackSeries": true,
+        "pointShape": "circle",
+        "pointRadius": 4,
+        "showLegend": true,
+        "removeOlder": 1,
+        "removeOlderUnit": "3600",
+        "removeOlderPoints": "",
+        "colors": [
+            "#0095ff",
+            "#ff0000",
+            "#ff7f0e",
+            "#2ca02c",
+            "#98df8a",
+            "#d62728",
+            "#ff9896",
+            "#9467bd",
+            "#c5b0d5"
+        ],
+        "textColor": [
+            "#666666"
+        ],
+        "textColorDefault": true,
+        "gridColor": [
+            "#e5e5e5"
+        ],
+        "gridColorDefault": true,
+        "width": 6,
+        "height": 8,
+        "className": "",
+        "x": 400,
+        "y": 220,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "dashboard-ui-group",
+        "type": "ui-group",
+        "name": "Group 1",
+        "page": "dashboard-ui-page-1",
+        "width": "12",
+        "height": "1",
+        "order": -1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-page-1",
+        "type": "ui-page",
+        "name": "Page 1",
+        "ui": "dashboard-ui-base",
+        "path": "/page1",
+        "icon": "",
+        "layout": "grid",
+        "theme": "dashboard-ui-theme",
+        "order": -1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-base",
+        "type": "ui-base",
+        "name": "UI Name",
+        "path": "/dashboard",
+        "includeClientData": true,
+        "acceptsClientConfig": [
+            "ui-notification",
+            "ui-control"
+        ]
+    },
+    {
+        "id": "dashboard-ui-theme",
+        "type": "ui-theme",
+        "name": "Default",
+        "colors": {
+            "surface": "#ffffff",
+            "primary": "#6771f4",
+            "bgPage": "#e5dcdc",
+            "groupBg": "#ffffff",
+            "groupOutline": "#d39292"
+        },
+        "sizes": {
+            "pagePadding": "6px",
+            "groupGap": "12px",
+            "groupBorderRadius": "4px",
+            "widgetGap": "6px",
+            "density": "default"
+        }
+    }
+]
diff --git a/cypress/tests/widgets/chart.spec.js b/cypress/tests/widgets/chart.spec.js
@@ -115,3 +115,40 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget', () => {
         })
     })
 })
+
+describe('Node/-RED Dashboard 2.0 - Chart - Data Sets', () => {
+    it('renders charts correctly when "series" is set to a JSON array', () => {
+        cy.deployFixture('dashboard-chart-series-json')
+        cy.visit('/dashboard/page1')
+
+        cy.get('#nrdb-ui-widget-bar-chart-finance > div > canvas').should('exist')
+
+        cy.clickAndWait(cy.get('button').contains('Load Finance Data')) // bar chart
+
+        // eslint-disable-next-line promise/catch-or-return, promise/always-return
+        cy.window().then(win => {
+            should(win.uiCharts).is.not.empty()
+            const barChart = win.uiCharts['bar-chart-finance']
+
+            // Bar chart
+            should(barChart.chart.config.data).be.an.Object()
+            should(barChart.chart.config.data.datasets).be.an.Array()
+
+            function checkSeries (dataset, label, values) {
+                should(dataset).have.property('label', label)
+                const array = dataset.data
+                should(array).be.an.Array().and.have.length(values.length)
+                for (let i = 0; i < array.length; i++) {
+                    should(array[i]).have.property('x', values[i][0])
+                    should(array[i]).have.property('y', values[i][1])
+                }
+            }
+
+            // Check Series Datasets
+            checkSeries(barChart.chart.config.data.datasets[0], 'Q1', [[2021, 115], [2022, 170], [2023, 86]])
+            checkSeries(barChart.chart.config.data.datasets[1], 'Q2', [[2021, 207], [2022, 200], [2023, 140]])
+            checkSeries(barChart.chart.config.data.datasets[2], 'Q3', [[2021, 198], [2022, 230], [2023, 180]])
+            checkSeries(barChart.chart.config.data.datasets[3], 'Q4', [[2021, 163], [2022, 210], [2023, 138]])
+        })
+    })
+})
diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js
@@ -114,12 +114,17 @@ module.exports = function (RED) {
                             : (new Date()).getTime()
                         datapoint.y = payload
                     } else if (typeof payload === 'object') {
-                        let x = evaluateNodePropertyWithKey(node, msg, payload, config.xAxisProperty, config.xAxisPropertyType)
+                        // let x = evaluateNodePropertyWithKey(node, msg, payload, config.xAxisProperty, config.xAxisPropertyType)
+                        let x = null
                         // may have been given an x/y object already
                         // let x = getProperty(payload, config.xAxisProperty)
                         let y = payload.y
-                        if ((x === undefined || x === null) && config.xAxisProperty === '') {
+                        if (config.xAxisProperty === '') {
+                            // no property defined, therefore use time
                             x = (new Date()).getTime()
+                        } else {
+                            // evaluate the x-axis property
+                            x = evaluateNodePropertyWithKey(node, msg, payload, config.xAxisProperty, config.xAxisPropertyType)
                         }
                         if (Array.isArray(series)) {
                             if (series.length > 1) {

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
@@ -407,7 +407,7 @@ export default {
                     }
                     dd.category = d.category[i]
                     dd.y = d.y[i]
-                    this.addToChart(d, label)
+                    this.addToChart(dd, label[i])
                     this.commit(payload, dd, label[i])
                 }
             } else {