@flowfuse/node-red-dashboard 1.30.1-ddb5563-202512211347.0 → 1.30.1

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/nodes/widgets/ui_spacer.html

@@ -77,19 +77,19 @@
     </div>
     <div class="form-row nr-db-ui-element-hide-in-subflow">
         <label><i class="fa fa-object-group"></i> <span data-i18n="ui-base.label.size">Size</label>
-        <button class="editor-button" id="node-input-size"></button>
+        <button class="editor-button" id="node-config-input-size"></button>
     </div>
     <div class="form-row nr-db-ui-element-show-in-subflow">
         <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-base.label.width">Width</label>
-        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-config-input-width">
     </div>
     <div class="form-row nr-db-ui-element-show-in-subflow">
         <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-base.label.height">Height</label>
-        <input type="hidden" id="node-input-height">
+        <input type="hidden" id="node-config-input-height">
     </div>
     <div class="form-row nr-db-ui-element-show-in-subflow">
         <label><i class="fa fa-arrows"></i> <span data-i18n="ui-base.label.order">Order</label>
-        <input type="text" id="node-input-order">
+        <input type="text" id="node-input-config-order">
     </div>
     <div class="form-row">
         <label for="node-config-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-spacer.label.class"></span></label>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.30.1-ddb5563-202512211347.0",
+    "version": "1.30.1",
     "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"