From 761f08b87d6659e70fd683fb0080439839a4490d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 29 Mar 2021 21:24:16 +0200
Subject: [PATCH] optimize tempchart workflow

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/TempChart.vue      | 35 ++++++++++++------------
 src/store/printer/tempHistory/actions.js | 12 ++++++--
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index 6541d30c..e5c53647 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -15,8 +15,7 @@ export default {
         return {
             chart : null,
             timerChart: '',
-            timerDataset: '',
-            isVisable: true,
+            isVisible: true,
             chartOptions: {
                 darkMode: true,
                 animation: false,
@@ -186,7 +185,6 @@ export default {
     computed: {
         ...mapState({
             intervalChartUpdate: state => state.gui.tempchart.intervalChartUpdate,
-            intervalDatasetUpdate: state => state.gui.tempchart.intervalDatasetUpdate,
             boolTempchart: state => state.gui.dashboard.boolTempchart,
         }),
         maxHistory: {
@@ -230,21 +228,16 @@ export default {
             if (document.getElementById("tempchart") && this.chart === null) {
                 this.chart = echarts.init(document.getElementById("tempchart"), null, {renderer: 'canvas'})
                 this.chart.setOption(this.chartOptions)
+                this.updateChart()
             } else setTimeout(() => {
                 this.createChart()
-            }, 500)
+            }, 1000)
         },
-        visibilityChanged (isVisible) {
-            this.isVisible = isVisible
-            if(isVisible && this.chart !== null) this.chart.resize()
-        },
-    },
-    created() {
-        this.timerChart = setInterval(() => {
+        updateChart() {
             if (
                 this.chart &&
                 this.boolTempchart &&
-                this.isVisable
+                this.isVisible
             ) {
                 this.chart.setOption({
                     series: this.series,
@@ -300,13 +293,19 @@ export default {
                         }
                     }],
                 })
+
+                setTimeout(() => {
+                    this.updateChart()
+                }, this.intervalChartUpdate)
             }
-        }, this.intervalChartUpdate)
-
-        this.timerDataset = setInterval(() => {
-            this.$store.dispatch("printer/tempHistory/updateDatasets")
-        }, this.intervalDatasetUpdate)
-
+        },
+        visibilityChanged (isVisible) {
+            this.isVisible = isVisible
+            if(isVisible && this.chart !== null) this.chart.resize()
+            if(this.chart !== null) this.updateChart()
+        },
+    },
+    created() {
         window.addEventListener('resize', () => {
             if (this.chart) this.chart.resize()
         })
diff --git a/src/store/printer/tempHistory/actions.js b/src/store/printer/tempHistory/actions.js
index ec58701e..9cc00dfd 100644
--- a/src/store/printer/tempHistory/actions.js
+++ b/src/store/printer/tempHistory/actions.js
@@ -5,7 +5,7 @@ export default {
 		commit('reset')
 	},
 
-	getHistory({ commit, state, rootGetters }, payload) {
+	getHistory({ commit, state, rootGetters, rootState, dispatch }, payload) {
 		const now = new Date()
 		const maxHistory = rootGetters['server/getConfig']('server', 'temperature_store_size') || 1200
 
@@ -147,10 +147,14 @@ export default {
 					})
 				}
 			})
+
+			setTimeout(() => {
+				dispatch("updateDatasets")
+			}, rootState.gui.tempchart.intervalDatasetUpdate)
 		}
 	},
 
-	updateDatasets({ commit, rootState, rootGetters }) {
+	updateDatasets({ commit, dispatch, rootState, rootGetters }) {
 		if (
 			'heaters' in rootState.printer &&
 			'available_sensors' in rootState.printer.heaters &&
@@ -179,5 +183,9 @@ export default {
 				}
 			})
 		}
+
+		setTimeout(() => {
+			dispatch("updateDatasets")
+		}, rootState.gui.tempchart.intervalDatasetUpdate)
 	}
 }
\ No newline at end of file