Chart - Clear stale data from front-end chart

FlowFuse · Nov 12, 2024 · 1fccc53 · 1fccc53
1 parent b2844d9
commit 1fccc53
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js
@@ -36,6 +36,25 @@ module.exports = function (RED) {
             return value
         }
 
+        /**
+         * Given the config of the chart, clear "old" data points
+         */
+        function clearOldPoints () {
+            const removeOlder = parseFloat(config.removeOlder)
+            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) => {
+                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)
+        }
+
         // ensure sane defaults
         if (!['msg', 'str', 'property', 'timestamp'].includes(config.xAxisPropertyType)) {
             config.xAxisPropertyType = 'timestamp' // default to 'timestamp'
@@ -205,22 +224,8 @@ module.exports = function (RED) {
 
                     if (config.xAxisType === 'time' && config.removeOlder && config.removeOlderUnit) {
                         // remove any points older than the specified time
-                        const removeOlder = parseFloat(config.removeOlder)
-                        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) => {
-                            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)
+                        clearOldPoints()
                     }
-
-                    // check sizing limits
                 }
 
                 send(msg)

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
@@ -544,13 +544,13 @@ export default {
             }
 
             // apply data limitations to the chart
-            if (points && this.chart.data.datasets.length > 0) {
+            if ((cutoff || points) && this.chart.data.datasets.length > 0) {
                 for (let i = 0; i < this.chart.data.datasets.length; i++) {
                     const length = this.chart.data.datasets[i].data.length
                     this.chart.data.datasets[i].data = this.chart.data.datasets[i].data.filter((d, i) => {
                         if (cutoff && d.x < cutoff) {
                             return false
-                        } else if (i < length - points) {
+                        } else if (points && (i < length - points)) {
                             return false
                         }
                         return true