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]>
mainsail-crew · Dec 25, 2023 · b1a698e · b1a698e
1 parent 675b6f3
commit b1a698e
Showing 1 changed file with 18 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,
         }
     }
@@ -273,9 +278,12 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
     tooltipFormatter(datasets: any) {
         let output = ''
 
+        //window.console.log('tempchartFix', datasets)
+
         const mainDatasets = datasets.filter((dataset: any) => dataset.seriesName.endsWith('-temperature'))
         if (datasets.length) {
             let outputTime = datasets[0]['axisValueLabel']
+            //window.console.log('tempchartFix', outputTime)
             outputTime = outputTime.substring(outputTime.indexOf(' '))
             const theme = this.$vuetify.theme.dark ? 'theme-dark' : ''
 
@@ -355,8 +363,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) => {