Fix pruning of old data from chart in Append mode #1905

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

@@ -16,7 +16,7 @@ props:
     X-Axis Format: <code>{HH}:{mm}:{ss}</code> | <code>{HH}:{mm}</code> | <code>{yyyy}-{M}-{d}</code> | <code>{d}/{M}</code> | <code>{ee} {HH}:{mm}</code> | <code>Custom</code> | <code>Auto</code>
         Defines how the values are displayed on the axis, when X-Axis type is <code>'timescale'</code>.
         See <a target="_blank" href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter">here</a> for an overview of the available format types.
-    X-Axis Limit: Any data that is before the specific time limit (for time charts) or where there are more data points than the limit specified will be removed from the chart.
+    X-Axis Limit: Any data that is before the specific time limit (for time charts) or where there are more data points than the limit specified will be removed from the chart.  The time based limit may be disabled by setting the value to 0.
     Properties:
         <b>Series:</b> Controls how you want to set the Series of data stream into this widget. The default is <code>msg.topic</code>, where separate topics will render to a new line/bar in their respective plots.</br>
         <b>X:</b> Defines which data to use when rendering the x-value of any data point.</br>

examples/full-example.json

@@ -553,7 +553,7 @@
         "category": "location",
         "categoryType": "property",
         "xAxisProperty": "datestamp",
-        "xAxisPropertyType": "msg",
+        "xAxisPropertyType": "property",
         "xAxisType": "time",
         "yAxisProperty": "temp",
         "ymin": "",
@@ -562,7 +562,7 @@
         "pointShape": "circle",
         "pointRadius": 4,
         "showLegend": true,
-        "removeOlder": 1,
+        "removeOlder": 0,
         "removeOlderUnit": "3600",
         "removeOlderPoints": "",
         "colors": [
@@ -699,7 +699,7 @@
         "category": "",
         "categoryType": "str",
         "xAxisProperty": "x",
-        "xAxisPropertyType": "msg",
+        "xAxisPropertyType": "property",
         "xAxisType": "linear",
         "yAxisProperty": "y",
         "ymin": "",

examples/line-chart.json

@@ -26,7 +26,7 @@
         "pointShape": "circle",
         "pointRadius": 4,
         "showLegend": true,
-        "removeOlder": 1,
+        "removeOlder": 0,
         "removeOlderUnit": "3600",
         "removeOlderPoints": "",
         "colors": [

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

@@ -31,6 +31,15 @@ <h3>Properties</h3>
         <dd>Defines how the values are displayed on the axis, when X-Axis type is <code>'timescale'</code>.
             See <a target="_blank" href="https://dashboard.flowfuse.com/nodes/widgets/ui-chart#formatting-timestamps">here</a> for an overview of the available format types.  
         </dd>
+
+        <dt>X-Axis Limit</dt>
+        <dd>When the X-Axis Type is <code>Timescale</code> these properties define under what circumstances to remove old data from the chart.
+            For example setting this to last 5 minutes will cause data to be removed from the chart when it is greater than 5 minutes old.
+            To disable time based removal of data (for example if displaying historical data) set <code>last</code> to 0.
+            In addition a data points limit can be applied, in which case old data will be removed when there are more than the specified number of points on the chart
+            If both a time limit and points limit are specified then both will be applied.
+        </dd>
+
         <dt>Properties <span class="property-type">string</span></dt>
         <dd>
             <p><b>Series:</b> Controls how you want to set the Series of data stream into this widget. The default is <code>msg.topic</code>, where separate topics will render to a new line/bar in their respective plots. You can also provide a JSON array, which will plot multiple data points from a single msg object.</p>

nodes/widgets/ui_chart.js

@@ -51,18 +51,21 @@ module.exports = function (RED) {
          */
         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)
+            // only prune if removeOlder > 0
+            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) => {
+                    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

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

@@ -686,10 +686,10 @@
         updateYAxisLimits (options) {
             if (this.hasData && this.props.xAxisType !== 'radial') {
                 if (!Object.hasOwn(this.props, 'ymin') || this.props.ymin === '' || typeof this.props.ymin === 'undefined') {
                     options.yAxis[0].min = axisHelper.getAxisMin // set sensible y-limits
                 }
                 if (!Object.hasOwn(this.props, 'ymax') || this.props.ymax === '' || typeof this.props.ymax === 'undefined') {
                     options.yAxis[0].max = axisHelper.getAxisMax // set sensible y-limits
                 }
             }
         },
@@ -698,9 +698,12 @@
             let points = null
             if (this.props.xAxisType === 'time' && this.props.removeOlder && this.props.removeOlderUnit) {
                 const removeOlder = parseFloat(this.props.removeOlder)
-                const removeOlderUnit = parseFloat(this.props.removeOlderUnit)
-                const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago
-                cutoff = (new Date()).getTime() - ago
+                // only prune if removeOlder > 0
+                if (removeOlder > 0) {
+                    const removeOlderUnit = parseFloat(this.props.removeOlderUnit)
+                    const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago
+                    cutoff = (new Date()).getTime() - ago
+                }
             }
 
             if (this.props.removeOlderPoints) {
@@ -715,7 +718,7 @@
                 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.x < cutoff) {
+                        if (cutoff && d[0] < cutoff) {
                             return false
                         } else if (points && (i < length - points)) {
                             return false