Ensure "replace" mode chart deletes old data

ui/src/store/data.mjs

@@ -14,6 +14,16 @@ const state = () => ({
 })
 
 const mutations = {
+    /**
+     * Delete all messages for a specific widget
+     * @param {Object} state
+     * @param {Object} data
+     * @param {String} data.widgetId - The id of the widget whose messages should be deleted.
+     */
+    deleteMessages (state, data) {
+        const widgetId = data.widgetId
+        delete state.messages[widgetId]
+    },
     bind (state, data) {
         const widgetId = data.widgetId
         // if packet contains a msg, then we process it

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

@@ -383,10 +383,13 @@
             if (Array.isArray(msg.payload) && !msg.payload.length) {
                 // clear the chart if msg.payload = [] is received
                 this.clearChart()
+                this.clearDataStore()
             } else {
                 if (msg.action === 'replace' || (this.props.action === 'replace' && msg.action !== 'append')) {
                     // clear the chart
                     this.clearChart()
+                    // delete messages array in the store
+                    this.clearDataStore()
                 }
                 // update the chart
                 this.add(msg)
@@ -422,6 +425,9 @@
             }
             return xDisplayFormats
         },
+        clearDataStore () {
+            this.$store.commit('data/deleteMessages', { widgetId: this.id })
+        },
         clearChart () {
             const option = this.chart.getOption()
             if (this.props.xAxisType === 'radial') {
@@ -439,7 +445,11 @@
                 labels: [],
                 bins: []
             }
-            this.chart.setOption(option, true)
+            this.chart.setOption(option, {
+                notMerge: true, // don't merge with existing option
+                lazyUpdate: true, // lazy update true means it won't animate
+                silent: true // don't trigger events
+            })
             this.hasData = false
         },
         /**
@@ -686,10 +696,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
                 }
             }
         },