@flowfuse/node-red-dashboard 1.30.1-829e014-202512291342.0 → 1.30.1-a60a579-202512301349.0

package/nodes/store/data.js

@@ -102,6 +102,22 @@ const setters = {
             }
             data[node.id].push(config.RED.util.cloneMessage(msg))
         }
+    },
+    /**
+     * Fast filtering of existing array data (skips cloning and save checks for fast data cleanup)
+     * @param {*} base - the base node
+     * @param {*} node - the owner node
+     * @param {(msg) => Boolean} filterFunction
+     */
+    filter (base, node, filterFunction) {
+        const currentData = data[node.id]
+        if (filterFunction && Array.isArray(currentData) && currentData.length) {
+            const filteredMessages = currentData.filter(filterFunction)
+            if (filteredMessages.length !== currentData.length) {
+                // no need for save operation to process messages - just apply them
+                data[node.id] = filteredMessages
+            }
+        }
     }
 }
 
@@ -111,5 +127,6 @@ module.exports = {
     setConfig: setters.setConfig,
     save: setters.save,
     append: setters.append,
+    filter: setters.filter,
     clear: setters.clear
 }

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

@@ -106,6 +106,46 @@
     }
 }
             </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>

package/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)
@@ -58,19 +61,36 @@ module.exports = function (RED) {
             if (removeOlder > 0) {
                 const removeOlderUnit = parseFloat(config.removeOlderUnit)
                 const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago
-                const cutoff = (new Date()).getTime() - ago
-                const _msg = datastore.get(node.id).filter((msg) => {
+                const cutOff = (new Date()).getTime() - ago
+                const filterFn = (msg) => {
                     let timestamp = msg._datapoint.x
                     // is x already a millisecond timestamp?
                     if (typeof (msg._datapoint.x) === 'string') {
                         timestamp = (new Date(msg._datapoint.x)).getTime()
                     }
-                    return timestamp > cutoff
-                })
-                datastore.save(base, node, _msg)
+                    return timestamp > cutOff
+                }
+                datastore.filter(base, node, filterFn)
             }
         }
 
+        /**
+         * For categorical xaxis and types other than histogram then only keep the latest data point for
+         * each category in each series
+         */
+        function clearOldCategoricalPoints () {
+            const points = datastore.get(node.id)
+            const latestSet = {}
+            for (const item of points) {
+                const { category, x } = item._datapoint
+                const key = JSON.stringify([category, x]) // a unique key for each category/series combination
+                latestSet[key] = item
+            }
+
+            const filtered = Object.values(latestSet)
+            datastore.save(base, node, filtered)
+        }
+
         // ensure sane defaults
         if (!['msg', 'str', 'property', 'timestamp'].includes(config.xAxisPropertyType)) {
             config.xAxisPropertyType = 'timestamp' // default to 'timestamp'
@@ -209,61 +229,78 @@ 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
+                        // 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)
+
+                        if (maxPoints && config.removeOlderPoints) {
+                            // account for multiple lines?
+                            // client-side does this for _each_ line
+                            // remove older points using datastore.filter instead of saving the whole array
+                            const lineCounts = {}
+                            const _msg = datastore.get(node.id) || []
+
+                            // determine which message objects to keep (latest maxPoints per label)
+                            const keepIndexes = []
+                            let doFiltering = false
+                            for (let i = _msg.length - 1; i >= 0; i--) {
+                                const m = _msg[i]
+                                const label = m.topic
+                                lineCounts[label] = lineCounts[label] || 0
+                                if (lineCounts[label] < maxPoints) {
+                                    keepIndexes[i] = true
+                                    lineCounts[label]++
+                                } else {
+                                    doFiltering = true
+                                }
                             }
-                            datastore.append(base, node, m)
-                        })
-                    }
 
-                    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]++
+                            // filter the datastore to only keep the selected messages
+                            if (doFiltering) {
+                                datastore.filter(base, node, (m, i) => {
+                                    return keepIndexes[i]
+                                })
                             }
                         }
-                        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()
+                        } else if (config.xAxisType === 'category' && config.chartType !== 'histogram') {
+                            // for categorical xaxis and types other than histogram then only keep the latest data point for
+                            // each category in each series
+                            clearOldCategoricalPoints()
+                        }
                     }
                 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.30.1-829e014-202512291342.0",
+    "version": "1.30.1-a60a579-202512301349.0",
     "description": "FlowFuse Dashboard - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"