fix: fix tooltip of tempchart (#1715)

* fix: fix theme issue in tempchart Signed-off-by: Stefan Dej <[email protected]> * fix: fix tooltip of tempchart the tooltip will not go away after 1 second. the chart also will be "stopped" as long as your mouse is hoverd Signed-off-by: Stefan Dej <[email protected]> * refactor: remove debug outputs Signed-off-by: Stefan Dej <[email protected]> --------- Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Dec 30, 2023 · 6beca12 · 6beca12
1 parent 74d4a48
commit 6beca12
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
@@ -6,7 +6,9 @@
         :init-options="{ renderer: 'svg' }"
         :autoresize="true"
         :style="tempchartStyle"
-        class="tempchart" />
+        class="tempchart"
+        @mouseenter.native="hoverChart = true"
+        @mouseleave.native="hoverChart = false" />
 </template>
 
 <script lang="ts">
@@ -34,6 +36,7 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
         tempchart: any
     }
 
+    hoverChart = false
     private isVisible = true
     get chartOptions(): ECBasicOption {
         return {
@@ -69,7 +72,9 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
             },
             yAxis: this.yAxis,
             media: this.media,
-            dataset: { source: this.source },
+            dataset: {
+                source: [],
+            },
             series: this.series,
         }
     }
@@ -355,8 +360,14 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
 
     @Watch('source')
     sourceChanged(newVal: PrinterTempHistoryStateSourceEntry[]) {
-        // break if chart isn't initialized or not visible
-        if (!this.chart || !this.isVisible) return
+        // break if the chart isn't initialized or not visible or is hovered
+        if (!this.chart || !this.isVisible || this.hoverChart) return
+
+        this.chart?.setOption({
+            dataset: {
+                source: newVal,
+            },
+        })
 
         const limitDate = new Date(Date.now() - this.maxHistory * 1000)
         let newSource = newVal.filter((entry: PrinterTempHistoryStateSourceEntry) => {