From 6beca12e11148c8a405b14686f4b99e23f31dc67 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 30 Dec 2023 17:15:54 +0100
Subject: [PATCH] fix: fix tooltip of tempchart (#1715)

* fix: fix theme issue in tempchart

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* 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 <meteyou@gmail.com>

* refactor: remove debug outputs

Signed-off-by: Stefan Dej <meteyou@gmail.com>

---------

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/TempChart.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index 530fe1835..80fa415aa 100644
--- 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) => {