fix(DashboardChartSummary): tooltip closed after pointer up on `m…

…obile` See: e9f9ba9
gobitfly · Dec 9, 2024 · a2c00c2 · a2c00c2
1 parent 4d30707
commit a2c00c2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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