Merge pull request #1980 from colinl/1978_chartOption_series_issues

Fix chart options issues

Author: Steve-Mcl

docs/en/nodes/widgets/ui-chart.md

@@ -502,9 +502,41 @@ The changes are additive, so if it was also desired to move the bottom of the gr
     }
 }
 ```
-The options set earlier will remain in force.
-
-
+The options set earlier will remain in force. Generally a message containing `msg.ui_update` should contain no payload or other properties otherwise those will be interpreted as data to go on the chart.
+### Setting Series Colour
+The settings for each series on the chart can also be set using `msg.ui_update`.  Note that when adjusting settings for a series you must include all 
+customised settings for all series, as each update to series configuration will replace any previous customisation to series.
+For example, for a line chart with two lines 'temperature' and 'humidity', to set the colour of the temperature line to red and humidity to green `msg.ui_update` could be sent containing
+```
+{
+    "chartOptions": {
+        "series": [
+            {
+                "name": "temperature",
+                "type": "line",
+                "lineStyle": {
+                    "color": "red",
+                },
+                "itemStyle": {
+                    "color": "red"
+                },
+            },
+            {
+                "name": "humidity",
+                "type": "line",
+                "lineStyle": {
+                    "color": "rgb(0, 255, 0)"
+                },
+                "itemStyle": {
+                    "color": "rgb(0, 255, 0)"
+                },
+            }
+        ]
+    }
+}
+```
+Note that this sets the colour for the whole line. It cannot be used to change the colour for just a section of the line.
+Any such message should always contain the series name and type for each series.
 
 ## Building Custom Charts
 For even further customisataion such as rendering charts we don't yet support, you can use a UI Template node.

nodes/widgets/locales/en-US/ui_chart.html

@@ -106,6 +106,46 @@ <h3>Dynamic Properties</h3>
     }
 }
             </pre>
-            The options set earlier will remain in force.
+            The options set earlier will remain in force. Generally a message containing `msg.ui_update` should contain
+            no payload or other properties otherwise those will be interpreted as data to go on the chart.
+        </dd>
+        <dd>
+            The settings for each series on the chart can also be set using `msg.ui_update`. In particular this allows line
+            colours to be configured. Note that when adjusting settings
+            for a series you must include all customised settings for all series, as each update to series configuration will
+            replace any previous customisation to series.
+            For example, for a line chart with two lines 'temperature' and 'humidity', to set the colour of the temperature line
+            to red and humidity to green `msg.ui_update` could be sent containing
+            <pre>
+{
+    "chartOptions": {
+        "series": [
+            {
+                "name": "temperature",
+                "type": "line",
+                "lineStyle": {
+                    "color": "red",
+                },
+                "itemStyle": {
+                    "color": "red"
+                },
+            },
+            {
+                "name": "humidity",
+                "type": "line",
+                "lineStyle": {
+                    "color": "rgb(0, 255, 0)"
+                },
+                "itemStyle": {
+                    "color": "rgb(0, 255, 0)"
+                },
+            }
+        ]
+    }
+}
+            </pre>
+            Note that this sets the colour for the whole line. It cannot be used to change the colour for just a section of the line.
+
+            Any such message should always contain the series name and type for each series.
         </dd>
         </script>

nodes/widgets/ui_chart.js

@@ -14,6 +14,9 @@ module.exports = function (RED) {
         const group = RED.nodes.getNode(config.group)
         const base = group.getBase()
 
+        // add a chartOptions object into the config
+        config.chartOptions = config.chartOptions || {}
+
         // correct typing
         if (typeof config.xmin !== 'undefined') {
             config.xmin = parseFloat(config.xmin)
@@ -209,61 +212,64 @@ module.exports = function (RED) {
                 if (!datastore.get(node.id)) {
                     datastore.save(base, node, [])
                 }
-                if (Array.isArray(msg.payload) && !msg.payload.length) {
-                    // clear history
-                    datastore.save(base, node, [])
-                } else {
-                    // delete old data if a replace is being performed.
-                    // This is the case if msg.action is replace
-                    // or the node is configured for replace and this is not being overriden by msg.action set to append
-                    if (msg.action === 'replace' || (config.action === 'replace' && msg.action !== 'append')) {
-                        // clear our data store as we are replacing data
+                // To prevent ui_update messages from deleting old data, skip this section if no msg.payload present
+                if (typeof msg.payload !== 'undefined') {
+                    if (Array.isArray(msg.payload) && !msg.payload.length) {
+                        // clear history
                         datastore.save(base, node, [])
-                    }
-                    if (!Array.isArray(msg.payload)) {
-                        // quick clone of msg, and store in history
-                        datastore.append(base, node, {
-                            ...msg
-                        })
                     } else {
-                        // we have an array in msg.payload, let's split them
-                        msg.payload.forEach((p, i) => {
-                            const payload = JSON.parse(JSON.stringify(p))
-                            const d = msg._datapoint ? msg._datapoint[i] : null
-                            const m = {
-                                ...msg,
-                                payload,
-                                _datapoint: d
-                            }
-                            datastore.append(base, node, m)
-                        })
-                    }
+                        // delete old data if a replace is being performed.
+                        // This is the case if msg.action is replace
+                        // or the node is configured for replace and this is not being overriden by msg.action set to append
+                        if (msg.action === 'replace' || (config.action === 'replace' && msg.action !== 'append')) {
+                            // clear our data store as we are replacing data
+                            datastore.save(base, node, [])
+                        }
+                        if (!Array.isArray(msg.payload)) {
+                            // quick clone of msg, and store in history
+                            datastore.append(base, node, {
+                                ...msg
+                            })
+                        } else {
+                            // we have an array in msg.payload, let's split them
+                            msg.payload.forEach((p, i) => {
+                                const payload = JSON.parse(JSON.stringify(p))
+                                const d = msg._datapoint ? msg._datapoint[i] : null
+                                const m = {
+                                    ...msg,
+                                    payload,
+                                    _datapoint: d
+                                }
+                                datastore.append(base, node, m)
+                            })
+                        }
 
-                    const maxPoints = parseInt(config.removeOlderPoints)
+                        const maxPoints = parseInt(config.removeOlderPoints)
 
-                    if (maxPoints && config.removeOlderPoints) {
-                        // account for multiple lines?
-                        // client-side does this for _each_ line
-                        // remove older points
-                        const lineCounts = {}
-                        const _msg = datastore.get(node.id)
-                        // trawl through in reverse order, and only keep the latest points (up to maxPoints) for each label
-                        for (let i = _msg.length - 1; i >= 0; i--) {
-                            const msg = _msg[i]
-                            const label = msg.topic
-                            lineCounts[label] = lineCounts[label] || 0
-                            if (lineCounts[label] >= maxPoints) {
-                                _msg.splice(i, 1)
-                            } else {
-                                lineCounts[label]++
+                        if (maxPoints && config.removeOlderPoints) {
+                            // account for multiple lines?
+                            // client-side does this for _each_ line
+                            // remove older points
+                            const lineCounts = {}
+                            const _msg = datastore.get(node.id)
+                            // trawl through in reverse order, and only keep the latest points (up to maxPoints) for each label
+                            for (let i = _msg.length - 1; i >= 0; i--) {
+                                const msg = _msg[i]
+                                const label = msg.topic
+                                lineCounts[label] = lineCounts[label] || 0
+                                if (lineCounts[label] >= maxPoints) {
+                                    _msg.splice(i, 1)
+                                } else {
+                                    lineCounts[label]++
+                                }
                             }
+                            datastore.save(base, node, _msg)
                         }
-                        datastore.save(base, node, _msg)
-                    }
 
-                    if (config.xAxisType === 'time' && config.removeOlder && config.removeOlderUnit) {
-                        // remove any points older than the specified time
-                        clearOldPoints()
+                        if (config.xAxisType === 'time' && config.removeOlder && config.removeOlderUnit) {
+                            // remove any points older than the specified time
+                            clearOldPoints()
+                        }
                     }
                 }
 

ui/src/widgets/ui-chart/UIChart.vue

@@ -20,7 +20,8 @@ export default {
     inject: ['$socket', '$dataTracker'],
     props: {
         id: { type: String, required: true },
-        props: { type: Object, default: () => ({}) }
+        props: { type: Object, default: () => ({}) },
+        state: { type: Object, default: () => ({}) }
     },
     data () {
         return {
@@ -33,6 +34,7 @@ export default {
             },
             chartUpdateDebounceTimeout: null,
             tooltipDataset: [],
+            dynamicChartOptions: [], // an array of chart options updates received this session
             resizeObserver: null
         }
     },
@@ -62,6 +64,9 @@ export default {
         },
         interpolation () {
             return this.props.interpolation
+        },
+        chartOptions () {
+            return this.getProperty('chartOptions')
         }
     },
     watch: {
@@ -154,7 +159,7 @@ export default {
         chart.setOption(options)
 
         // merge in any updates provided via ui_update.chartOptions
-        const chartOptions = this.props.chartOptions
+        const chartOptions = this.chartOptions
         if (chartOptions) {
             // pass the options to the chart
             chart.setOption(chartOptions)
@@ -188,6 +193,8 @@ export default {
                 if (this.chart) {
                     this.chart.setOption(updates.chartOptions)
                 }
+                // add these options to the array of previous updates received this session
+                this.dynamicChartOptions.push(updates.chartOptions)
             }
         },
         generateChartOptions () {
@@ -399,19 +406,39 @@ export default {
             }
         },
         onMsgInput (msg) {
-            if (Array.isArray(msg.payload) && !msg.payload.length) {
-                // clear the chart if msg.payload = [] is received
-                this.clearChart()
-                this.clearDataStore()
-            } else {
-                if (msg.action === 'replace' || (this.props.action === 'replace' && msg.action !== 'append')) {
-                    // clear the chart
+            // ignore if payload is empty and msg is not an array (on loading it can be an array)
+            // ui_update messages are handled by OnDynamicProperties
+            if (msg.payload !== undefined || Array.isArray(msg)) {
+                if (Array.isArray(msg.payload) && !msg.payload.length) {
+                    // clear the chart if msg.payload = [] is received
                     this.clearChart()
-                    // delete messages array in the store
                     this.clearDataStore()
+                } else {
+                    if (msg.action === 'replace' || (this.props.action === 'replace' && msg.action !== 'append')) {
+                        // clear the chart
+                        this.clearChart()
+                        // delete messages array in the store
+                        this.clearDataStore()
+                    }
+                    // update the chart
+                    // remember how many series are currently configured
+                    const seriesCount = this.chart.getOption().series.length
+                    this.add(msg)
+                    // if any series have been added, re-apply any chartOptions passed in
+                    // Also re-apply if this is a radial (pie or doughnut) chart as the radius for these are re-calculated
+                    // when adding data, which may remove any radius applied via msg.ui_update.
+                    if (this.chart.getOption().series.length > seriesCount || this.props.xAxisType === 'radial') {
+                        // update the chart first from options applied in previous sessions
+                        const chartOptions = this.chartOptions
+                        if (chartOptions) {
+                            this.chart.setOption(chartOptions)
+                        }
+                        // then from this session
+                        this.dynamicChartOptions.forEach((options) => {
+                            this.chart.setOption(options)
+                        })
+                    }
                 }
-                // update the chart
-                this.add(msg)
             }
         },
         getXDisplayFormats (xAxisFormatType) {
@@ -687,6 +714,10 @@ export default {
                 }
 
                 // Add data point
+                // ensure the data array exists
+                if (Array.isArray(options.series[sIndex].data) === false) {
+                    options.series[sIndex].data = []
+                }
                 if (this.props.xAxisType === 'category') {
                     // for categories, we need to update the existing data point for this x-value
                     const xIndex = options.series[sIndex].data.findIndex(d => d[0] === datapoint.x)
@@ -745,15 +776,17 @@ export default {
             if ((cutoff || points) && series.length > 0) {
                 // loop over each series
                 for (let i = 0; i < series.length; i++) {
-                    const length = series[i].data.length // check how much data there is in this series
-                    series[i].data = series[i].data.filter((d, i) => {
-                        if (cutoff && d[0] < cutoff) {
-                            return false
-                        } else if (points && (i < length - points)) {
-                            return false
-                        }
-                        return true
-                    })
+                    const length = series[i].data?.length // check how much data there is in this series
+                    if (length) {
+                        series[i].data = series[i].data.filter((d, i) => {
+                            if (cutoff && d[0] < cutoff) {
+                                return false
+                            } else if (points && (i < length - points)) {
+                                return false
+                            }
+                            return true
+                        })
+                    }
                 }
             }
             // apply data limtations to the vuex store