2049 multi series chart clear on refresh

nodes/widgets/ui_chart.js

@@ -63,10 +63,12 @@ module.exports = function (RED) {
                 const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago
                 const cutOff = (new Date()).getTime() - ago
                 const filterFn = (msg) => {
-                    let timestamp = msg._datapoint.x
+                    // msg._datapoint may be a single point or, in the case of multiple series in one msg, an array
+                    // if it is an array then all the elements will have the same timestamp so use the first one
+                    let timestamp = Array.isArray(msg._datapoint) ? msg._datapoint[0].x : msg._datapoint.x
                     // is x already a millisecond timestamp?
-                    if (typeof (msg._datapoint.x) === 'string') {
-                        timestamp = (new Date(msg._datapoint.x)).getTime()
+                    if (typeof (timestamp) === 'string') {
+                        timestamp = (new Date(timestamp)).getTime()
                     }
                     return timestamp > cutOff
                 }

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

@@ -509,13 +509,8 @@
             // determine what type of msg we have
             if (Array.isArray(msg) && msg.length > 0) {
                 // we have received an array of messages (loading from stored history)
-                msg.forEach((m, i) => {
-                    const p = m.payload
-                    const d = m._datapoint // server-side we compute a chart friendly format
-                    const label = d.category
-                    if (label !== null && label !== undefined) {
-                        this.addPoints(p, d, label, options)
-                    }
+                msg.forEach((m) => {
+                    this.add(m)
                 })
             } else if (Array.isArray(payload) && msg.payload.length > 0) {
                 // we have received a message with an array of data points
@@ -748,10 +743,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
                 }
             }
         },