From a2c00c2373b1b3576d2bf2398088c79a0ed12ff6 Mon Sep 17 00:00:00 2001
From: marcel-bitfly <174338434+marcel-bitfly@users.noreply.github.com>
Date: Mon, 9 Dec 2024 14:09:53 +0100
Subject: [PATCH] fix(DashboardChartSummary): `tooltip closed` after `pointer
 up` on `mobile`

See: e9f9ba9f10d50a5b948654f8c76cf5564b068bf0
---
 frontend/.vscode/settings.json                        |  1 +
 .../dashboard/chart/DashboardChartSummary.vue         | 11 +++++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index 65b0d05f7..76b6630b7 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -10,6 +10,7 @@
     "BcPremiumModal",
     "BcTablePager",
     "BcToggle",
+    "DashboardChartSummary",
     "DashboardChartSummaryFilter",
     "DashboardGroupManagementModal",
     "DashboardTableSummaryDetails",
diff --git a/frontend/components/dashboard/chart/DashboardChartSummary.vue b/frontend/components/dashboard/chart/DashboardChartSummary.vue
index 3f0e63b6d..7b572d755 100644
--- a/frontend/components/dashboard/chart/DashboardChartSummary.vue
+++ b/frontend/components/dashboard/chart/DashboardChartSummary.vue
@@ -283,7 +283,7 @@ const formatTimestamp = (value: string) => {
       return date
   }
 }
-const toogleTrigger = ref(false)
+const isTriggeringOnMouseMove = ref(true)
 const option = computed<EChartsOption>(() => {
   return {
     color: colors.value.groups,
@@ -371,7 +371,7 @@ const option = computed<EChartsOption>(() => {
       order: 'seriesAsc',
       padding: 0,
       trigger: 'axis',
-      triggerOn: toogleTrigger.value ? 'click' : 'mousemove|click',
+      triggerOn: isTriggeringOnMouseMove.value ? 'mousemove|click' : 'click',
     },
     xAxis: [
       {
@@ -607,9 +607,8 @@ const onDatazoom = () => {
 const onMouseMove = (e: MouseEvent) => {
   lastMouseYPos = e.offsetY
 }
-const onMouseUp = () => {
-  // using mouseup event here, as `click` or `mousedown` would close `tooltip`
-  toogleTrigger.value = !toogleTrigger.value
+const toggleTriggeringOnMouseMove = () => {
+  isTriggeringOnMouseMove.value = !isTriggeringOnMouseMove.value
 }
 </script>
 
@@ -624,7 +623,7 @@ const onMouseUp = () => {
         class="chart"
         :option
         autoresize
-        @zr:mouseup="onMouseUp"
+        @zr:mousedown="toggleTriggeringOnMouseMove"
         @datazoom="onDatazoom"
       />
       <BcLoadingSpinner