From eb5fa763da265ef34423394754c6f9275eb47667 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 20:58:17 +0100
Subject: [PATCH 01/10] fix broken show/hide of y-axis

---
 nodes/widgets/ui_chart.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
index 05e05c42f..6add0c801 100644
--- a/nodes/widgets/ui_chart.html
+++ b/nodes/widgets/ui_chart.html
@@ -298,9 +298,9 @@
                     }
                 })
 
-                // handle event when chart's type is changed
+                // handle event when chart's series property is changed
                 $('#node-input-category').change((evt) => {
-                    const categoryType = $(evt.target).val()
+                    const categoryType = $('#node-input-category').typedInput('type')
 
                     if (categoryType === 'json') {
                         // hide y-axis property setting as category will now control that

From c52ab78060024a5cf27e80e4f5af754c77a2306b Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 20:59:49 +0100
Subject: [PATCH 02/10] add typed input option msg to y-axis

---
 nodes/widgets/ui_chart.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
index 6add0c801..0c868cd10 100644
--- a/nodes/widgets/ui_chart.html
+++ b/nodes/widgets/ui_chart.html
@@ -82,6 +82,7 @@
                 xAxisFormatType: { value: 'auto' },
                 yAxisLabel: { value: '' },
                 yAxisProperty: { value: null },
+                yAxisPropertyType: { value: 'property' },
                 ymin: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
                 ymax: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
                 action: { value: 'append' },
@@ -231,7 +232,7 @@
                 $('#node-input-yAxisProperty').typedInput({
                     default: propertyType.value,
                     typeField: $('#node-input-yAxisPropertyType'),
-                    types: [propertyType]
+                    types: ['msg', propertyType] // makes no sense for the y-axis to be a string
                 })
 
                 const updateXAxisTypeOptions = function (options, defaultValue) {
@@ -550,6 +551,7 @@ <h4>Axis Configuration</h4>
             </div>
             <div id="node-container-yAxisProperty" class="node-chart-property">
                 <label style="width: auto" for="node-input-yAxisProperty">Y:</label>
+                <input type="hidden" id="node-input-yAxisPropertyType">
                 <input style="flex-grow: 1" type="text" id="node-input-yAxisProperty" data-i18n="[placeholder]ui-chart.label.propertyPlaceholder">
             </div>
         </div>

From f24a69826dded4669e73ab2aa5018b1307864523 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:00:52 +0100
Subject: [PATCH 03/10] rename array for clarity

---
 nodes/widgets/ui_chart.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
index 0c868cd10..48b1e0a9f 100644
--- a/nodes/widgets/ui_chart.html
+++ b/nodes/widgets/ui_chart.html
@@ -42,7 +42,7 @@
             return RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.' + property)
         }
         const noneType = { value: 'none', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.none'), hasValue: false }
-        const propertyType = { value: 'property', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.key') }
+        const keyType = { value: 'property', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.key') }
 
         function hexToRgb (hex) {
             const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
@@ -57,9 +57,9 @@
 
         function getSeriesTypes (xAxisType) {
             if (xAxisType === 'category') {
-                return [noneType, 'msg', 'str', 'json', propertyType]
+                return [noneType, 'msg', 'str', 'json', keyType]
             } else {
-                return [noneType, 'msg', 'str', 'json', propertyType]
+                return [noneType, 'msg', 'str', 'json', keyType]
             }
         }
 
@@ -225,14 +225,14 @@
                     types: getSeriesTypes($('#node-input-xAxisType').val())
                 })
                 $('#node-input-xAxisProperty').typedInput({
-                    default: propertyType.value,
+                    default: keyType.value,
                     typeField: $('#node-input-xAxisPropertyType'),
-                    types: ['msg', 'str', propertyType]
+                    types: ['msg', 'str', keyType]
                 })
                 $('#node-input-yAxisProperty').typedInput({
-                    default: propertyType.value,
+                    default: keyType.value,
                     typeField: $('#node-input-yAxisPropertyType'),
-                    types: ['msg', propertyType] // makes no sense for the y-axis to be a string
+                    types: ['msg', keyType] // makes no sense for the y-axis to be a string
                 })
 
                 const updateXAxisTypeOptions = function (options, defaultValue) {
@@ -314,8 +314,8 @@
                 // ensure the xAxis PropertyType isn't an invalid value
                 if (this.xAxisPropertyType === 'msg' && this.xAxisProperty === '') {
                     // auto-fix it for the user
-                    this.xAxisPropertyType = propertyType.value
-                    $('#node-input-xAxisProperty').typedInput('type', propertyType.value)
+                    this.xAxisPropertyType = keyType.value
+                    $('#node-input-xAxisProperty').typedInput('type', keyType.value)
                 }
 
                 // Stack/Group-By Options - convert from bool to string values for <select>

From 6e86a0b71a440f9dab8353dc83823e88b748978a Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:01:26 +0100
Subject: [PATCH 04/10] ensure sane values

---
 nodes/widgets/ui_chart.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js
index 42fa3d864..2cf8d04d6 100644
--- a/nodes/widgets/ui_chart.js
+++ b/nodes/widgets/ui_chart.js
@@ -28,6 +28,22 @@ module.exports = function (RED) {
             return value
         }
 
+        // ensure sane defaults
+        if (!['msg', 'str', 'property'].includes(config.xAxisPropertyType)) {
+            config.xAxisPropertyType = 'property' // default to 'key'
+        }
+        if (!['msg', 'property'].includes(config.yAxisPropertyType)) {
+            config.yAxisPropertyType = 'property' // default to 'key'
+        }
+        if (config.xAxisPropertyType === 'msg' && !config.xAxisProperty) {
+            config.xAxisPropertyType = 'property' // msg needs a property to evaluate, default to 'key'
+        }
+        if (config.yAxisPropertyType === 'msg' && !config.yAxisProperty) {
+            config.yAxisPropertyType = 'property' // msg needs a property to evaluate, default to 'key'
+        }
+        config.xAxisProperty = config.xAxisProperty || ''
+        config.yAxisProperty = config.yAxisProperty || ''
+
         const evts = {
             // beforeSend will run before messages are sent client-side, as well as before sending on within Node-RED
             // here, we use it to pre-process chart data to format it ready for plotting

From 52ce831d7946c7d201918c5698d7c78140199961 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:02:01 +0100
Subject: [PATCH 05/10] fix data point evaluation for msg types

---
 nodes/widgets/ui_chart.js | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js
index 2cf8d04d6..bbf94eaff 100644
--- a/nodes/widgets/ui_chart.js
+++ b/nodes/widgets/ui_chart.js
@@ -83,32 +83,36 @@ module.exports = function (RED) {
                     }
                 }
 
+                function evaluateNodePropertyWithKey (node, msg, payload, property, propertyType) {
+                    if (propertyType === 'property' /* AKA key */) {
+                        return RED.util.evaluateNodeProperty(property, 'msg', node, payload)
+                    }
+                    return RED.util.evaluateNodeProperty(property, propertyType, node, msg)
+                }
+
                 // function to process a data point being appended to a line/scatter chart
                 function addToChart (payload, series) {
                     const datapoint = {}
                     // we group/categorize data by "series"
                     datapoint.category = series
 
-                    // get our x value, if set
-                    if (config.xAxisPropertyType === 'msg' && config.xAxisProperty === '') {
-                        // handle a missing declaration of x-axis property, and backup to time series
-                        config.xAxisPropertyType = 'property'
-                    }
-                    const x = RED.util.evaluateNodeProperty(config.xAxisProperty, config.xAxisPropertyType, node, msg)
-
                     // construct our datapoint
                     if (typeof payload === 'number') {
                         // do we have an x-property defined - if not, we're assuming time series
-                        datapoint.x = config.xAxisProperty !== '' ? x : (new Date()).getTime()
+                        // since key would attempt to evaluate a property on a number, we don't do evaluation when
+                        // x-axis is type is 'key' (only when it's 'msg' or 'str')
+                        datapoint.x = config.xAxisPropertyType === 'msg' || config.xAxisPropertyType === 'str'
+                            ? evaluateNodePropertyWithKey(node, msg, payload, config.xAxisProperty, config.xAxisPropertyType)
+                            : (new Date()).getTime()
                         datapoint.y = payload
                     } else if (typeof payload === 'object') {
+                        let x = evaluateNodePropertyWithKey(node, msg, payload, config.xAxisProperty, config.xAxisPropertyType)
                         // may have been given an x/y object already
-                        let x = getProperty(payload, config.xAxisProperty)
-                        let y = payload.y
                         if (x === undefined || x === null) {
                             x = (new Date()).getTime()
                         }
                         if (Array.isArray(series)) {
+                            let y
                             if (series.length > 1) {
                                 y = series.map((s) => {
                                     return getProperty(payload, s)
@@ -116,9 +120,11 @@ module.exports = function (RED) {
                             } else {
                                 y = getProperty(payload, series[0])
                             }
+                            datapoint.y = y
+                        } else {
+                            datapoint.y = evaluateNodePropertyWithKey(node, msg, payload, config.yAxisProperty, config.yAxisPropertyType)
                         }
                         datapoint.x = x
-                        datapoint.y = y
                     }
                     return datapoint
                 }

From 081dbc908fe3fec8fd2965a92525a9338253f784 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:02:17 +0100
Subject: [PATCH 06/10] better dx

---
 ui/src/widgets/ui-chart/UIChart.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
index 296de90be..e19aaf3ba 100644
--- a/ui/src/widgets/ui-chart/UIChart.vue
+++ b/ui/src/widgets/ui-chart/UIChart.vue
@@ -21,6 +21,7 @@ export default {
     },
     data () {
         return {
+            /** @type {Chart} */
             chart: null,
             hasData: false
         }

From a514f93004d60d51606b02232e0cdf094fb18d1e Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:02:53 +0100
Subject: [PATCH 07/10] ensure parsing key is not set for `key` type

---
 ui/src/widgets/ui-chart/UIChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
index e19aaf3ba..fbf0b97ed 100644
--- a/ui/src/widgets/ui-chart/UIChart.vue
+++ b/ui/src/widgets/ui-chart/UIChart.vue
@@ -66,7 +66,7 @@ export default {
                 parsing.xAxisKey = this.props.xAxisProperty
             }
 
-            if (this.props.categoryType !== 'json' && this.props.yAxisProperty) {
+            if (this.props.categoryType !== 'json' && this.props.yAxisProperty && this.props.yAxisPropertyType === 'property') {
                 parsing.yAxisKey = this.props.yAxisProperty
             }
         } else {

From a2ed6c2fb20444e1011ebbdab226edab32b5b74b Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:04:15 +0100
Subject: [PATCH 08/10] if no mapping key set, use server side datapoint.x/y

---
 ui/src/widgets/ui-chart/UIChart.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
index fbf0b97ed..d3fac1f93 100644
--- a/ui/src/widgets/ui-chart/UIChart.vue
+++ b/ui/src/widgets/ui-chart/UIChart.vue
@@ -299,9 +299,12 @@ export default {
             this.chart.update()
         },
         addPoints (payload, datapoint, label) {
-            const d = {
-                ...datapoint,
-                ...payload
+            const d = { ...datapoint, ...payload }
+            if (!this.chart.config?.options?.parsing?.xAxisKey) {
+                d.x = datapoint.x // if there is no mapping key, ensure server side computed datapoint.x is used
+            }
+            if (!this.chart.config?.options?.parsing?.yAxisKey) {
+                d.y = datapoint.y // if there is no mapping key, ensure server side computed datapoint.y is used
             }
 
             if (Array.isArray(label) && label.length > 0) {

From 71f6b333b6a3f3217df135bf84d608fee02a5f4f Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:04:53 +0100
Subject: [PATCH 09/10] dont merge payload+datapoint twice

---
 ui/src/widgets/ui-chart/UIChart.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
index d3fac1f93..32dedac80 100644
--- a/ui/src/widgets/ui-chart/UIChart.vue
+++ b/ui/src/widgets/ui-chart/UIChart.vue
@@ -315,19 +315,15 @@ export default {
                     }
                     dd.category = d.category[i]
                     dd.y = d.y[i]
-                    this.addPoint(payload, dd, label[i])
+                    this.addToChart(d, label)
+                    this.commit(payload, dd, label[i])
                 }
             } else {
-                this.addPoint(payload, datapoint, label)
+                this.addToChart(d, label)
+                this.commit(payload, datapoint, label)
             }
         },
-        addPoint (payload, datapoint, label) {
-            const d = {
-                ...datapoint,
-                ...payload
-            }
-            this.addToChart(d, label)
-
+        commit (payload, datapoint, label) {
             // APPEND our latest data point to the store
             this.$store.commit('data/append', {
                 widgetId: this.id,

From 913ee573a8ff02c2b1ea2763d536c4b86a1cdcb9 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 24 Sep 2024 21:05:10 +0100
Subject: [PATCH 10/10] fix built-in examples

---
 examples/bar-chart.json     | 40 +++++++++++++++++++++++++++++++--
 examples/line-chart.json    | 40 +++++++++++++++++++++++++++++++--
 examples/scatter-chart.json | 44 +++++++++++++++++++++++++++++++++----
 3 files changed, 116 insertions(+), 8 deletions(-)

diff --git a/examples/bar-chart.json b/examples/bar-chart.json
index 631bc4519..67d4de3c4 100644
--- a/examples/bar-chart.json
+++ b/examples/bar-chart.json
@@ -6,17 +6,23 @@
         "group": "",
         "name": "",
         "label": "Sales in Million",
-        "order": 9007199254740991,
+        "order": 3,
         "chartType": "bar",
         "category": "location",
         "categoryType": "property",
+        "xAxisLabel": "",
         "xAxisProperty": "",
-        "xAxisPropertyType": "msg",
+        "xAxisPropertyType": "str",
         "xAxisType": "category",
+        "xAxisFormat": "",
+        "xAxisFormatType": "auto",
+        "yAxisLabel": "",
         "yAxisProperty": "sales_millions",
+        "yAxisPropertyType": "property",
         "ymin": "",
         "ymax": "",
         "action": "append",
+        "stackSeries": false,
         "pointShape": "circle",
         "pointRadius": 4,
         "showLegend": false,
@@ -71,5 +77,35 @@
                 "2a23595f05d3331e"
             ]
         ]
+    },
+    {
+        "id": "f4c5f4c74fbd2db2",
+        "type": "inject",
+        "z": "0758321f1687e812",
+        "name": "Clear",
+        "props": [
+            {
+                "p": "payload"
+            },
+            {
+                "p": "action",
+                "v": "replace",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "[]",
+        "payloadType": "json",
+        "x": 210,
+        "y": 800,
+        "wires": [
+            [
+                "2a23595f05d3331e"
+            ]
+        ]
     }
 ]
\ No newline at end of file
diff --git a/examples/line-chart.json b/examples/line-chart.json
index 4bc12b67e..89cd16150 100644
--- a/examples/line-chart.json
+++ b/examples/line-chart.json
@@ -4,19 +4,25 @@
         "type": "ui-chart",
         "z": "0758321f1687e812",
         "group": "",
-        "name": "",
+        "name": "Line Chart",
         "label": "chart",
         "order": 9007199254740991,
         "chartType": "line",
         "category": "location",
         "categoryType": "property",
+        "xAxisLabel": "",
         "xAxisProperty": "datestamp",
-        "xAxisPropertyType": "msg",
+        "xAxisPropertyType": "property",
         "xAxisType": "time",
+        "xAxisFormat": "",
+        "xAxisFormatType": "auto",
+        "yAxisLabel": "",
         "yAxisProperty": "temp",
+        "yAxisPropertyType": "property",
         "ymin": "",
         "ymax": "",
         "action": "append",
+        "stackSeries": false,
         "pointShape": "circle",
         "pointRadius": 4,
         "showLegend": true,
@@ -71,5 +77,35 @@
                 "efccfdf502300871"
             ]
         ]
+    },
+    {
+        "id": "33ee5762cce0ee32",
+        "type": "inject",
+        "z": "862ec766f2af6f61",
+        "name": "Clear",
+        "props": [
+            {
+                "p": "payload"
+            },
+            {
+                "p": "action",
+                "v": "replace",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "[]",
+        "payloadType": "json",
+        "x": 290,
+        "y": 1100,
+        "wires": [
+            [
+                "efccfdf502300871"
+            ]
+        ]
     }
 ]
\ No newline at end of file
diff --git a/examples/scatter-chart.json b/examples/scatter-chart.json
index 8ebd76eae..ab8cd47f5 100644
--- a/examples/scatter-chart.json
+++ b/examples/scatter-chart.json
@@ -4,19 +4,25 @@
         "type": "ui-chart",
         "z": "0758321f1687e812",
         "group": "",
-        "name": "",
+        "name": "Scatter Chart",
         "label": "chart",
-        "order": 9007199254740991,
+        "order": 4,
         "chartType": "scatter",
         "category": "",
         "categoryType": "str",
+        "xAxisLabel": "",
         "xAxisProperty": "x",
-        "xAxisPropertyType": "msg",
+        "xAxisPropertyType": "property",
         "xAxisType": "linear",
+        "xAxisFormat": "",
+        "xAxisFormatType": "auto",
+        "yAxisLabel": "",
         "yAxisProperty": "y",
+        "yAxisPropertyType": "property",
         "ymin": "",
         "ymax": "",
         "action": "replace",
+        "stackSeries": false,
         "pointShape": "circle",
         "pointRadius": 4,
         "showLegend": true,
@@ -47,7 +53,7 @@
         "id": "937b42a40fdcf424",
         "type": "inject",
         "z": "0758321f1687e812",
-        "name": "",
+        "name": "Arc data",
         "props": [
             {
                 "p": "payload"
@@ -71,5 +77,35 @@
                 "91ced026339a3eeb"
             ]
         ]
+    },
+    {
+        "id": "60e4dfb81bdbcb03",
+        "type": "inject",
+        "z": "0758321f1687e812",
+        "name": "Clear",
+        "props": [
+            {
+                "p": "payload"
+            },
+            {
+                "p": "action",
+                "v": "replace",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "[]",
+        "payloadType": "json",
+        "x": 250,
+        "y": 860,
+        "wires": [
+            [
+                "91ced026339a3eeb"
+            ]
+        ]
     }
 ]
\ No newline at end of file