fix: summary chart tooltip not enterable

Toggle `trigger` of tooltip between `mousemove` and `click`. Make `tooltip` enterable. Change `series pagination` text color. See: BEDS-577
gobitfly · Nov 29, 2024 · 5811b54 · 5811b54
1 parent bdb59e4
commit 5811b54
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryChart.vue b/frontend/components/dashboard/chart/DashboardChartSummaryChart.vue
@@ -1,11 +1,15 @@
 <script lang="ts" setup>
 import {
-  h, render,
+  h,
+  render,
 } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import { type ECharts } from 'echarts'
+import {
+  type ECharts,
+  type EChartsOption,
+} from 'echarts'
 import { get } from 'lodash-es'
 import {
   DataZoomComponent,
@@ -84,15 +88,8 @@ const aggregation = ref<AggregationTimeframe>('hourly')
 const isLoading = ref(false)
 let reloadCounter = 0
 
-interface SeriesObject {
-  data: number[],
-  name: string,
-  smooth: boolean,
-  symbol: string,
-  type: string,
-}
 // we don't want the series to be responsive to not trigger an auto update of the option computed
-const series = ref<SeriesObject[]>([])
+const series = ref<echarts.SeriesOption[]>([])
 const chartCategories = ref<number[]>([])
 
 const categories = computed<number[]>(() => {
@@ -171,7 +168,7 @@ const loadData = async () => {
     return
   }
   isLoading.value = true
-  const newSeries: SeriesObject[] = []
+  const newSeries: echarts.SeriesOption[] = []
   try {
     const res = await fetch<GetValidatorDashboardSummaryChartResponse>(
       API_PATH.DASHBOARD_SUMMARY_CHART,
@@ -204,7 +201,7 @@ const loadData = async () => {
         else {
           name = getGroupLabel($t, element.id, groups.value, allGroups)
         }
-        const newObj: SeriesObject = {
+        const newObj: echarts.SeriesOption = {
           data: element.data,
           name,
           smooth: false,
@@ -285,9 +282,8 @@ const formatTimestamp = (value: string) => {
       return date
   }
 }
-
-// chart options
-const option = computed(() => {
+const toogleTrigger = ref(false)
+const option = computed<EChartsOption>(() => {
   return {
     color: colors.value.groups,
     dataZoom: {
@@ -312,6 +308,9 @@ const option = computed(() => {
     legend: {
       bottom: 40,
       orient: 'horizontal',
+      pageTextStyle: {
+        color: colors.value.label,
+      },
       textStyle: {
         color: colors.value.label,
         fontSize: textSize,
@@ -327,10 +326,14 @@ const option = computed(() => {
       fontWeight: fontWeightLight,
     },
     tooltip: {
+      alwaysShowContent: true,
       borderColor: colors.value.background,
       confine: true,
-      formatter(params: any): HTMLElement {
-        const ts = parseInt(params[0].axisValue)
+      enterable: true,
+      extraCssText: 'z-index: 100;',
+      formatter(params) {
+        if (!Array.isArray(params)) return ''
+        const ts = parseInt(params[0].name)
         let lastDif = 0
         let highlightGroup = ''
         const groupInfos = params.map((param: any) => {
@@ -367,6 +370,7 @@ const option = computed(() => {
       order: 'seriesAsc',
       padding: 0,
       trigger: 'axis',
+      triggerOn: toogleTrigger.value ? 'click' : 'mousemove|click',
     },
     xAxis: [
       {
@@ -402,7 +406,7 @@ const option = computed(() => {
       name: $t(
         `dashboard.validator.summary.chart.efficiency.${props.filter?.efficiency}`,
       ),
-      nameLocation: 'center',
+      nameLocation: 'middle',
       nameTextStyle: {
         padding: [
           0,
@@ -602,6 +606,10 @@ 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
+}
 </script>
 
 <template>
@@ -615,6 +623,7 @@ const onMouseMove = (e: MouseEvent) => {
         class="chart"
         :option
         autoresize
+        @zr:mouseup="onMouseUp"
         @datazoom="onDatazoom"
       />
       <BcLoadingSpinner

diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue b/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue
@@ -190,7 +190,7 @@ const selectedLabel = computed(() => {
     max-width: 200px;
 
     @media (max-width: 1000px) {
-      max-width: 90px;
+      max-width: min-content
     }
   }
   :deep(> .p-dropdown) {

diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue
@@ -59,6 +59,7 @@ defineProps<Props>()
   border: 1px transparent solid;
   line-height: 1.5;
   padding: var(--padding);
+  max-height: 18.75rem;
 
   .line-container {
     display: flex;

diff --git a/frontend/components/dashboard/chart/TooltipHeader.vue b/frontend/components/dashboard/chart/TooltipHeader.vue
@@ -101,7 +101,8 @@ const title = computed(() => {
 
 <template>
   <b>
-    <div>{{ title }} {{ dateText }}</div>
+    <div>{{ title }}</div>
+    <div>{{ dateText }}</div>
     <div>{{ t("common.epoch") }} {{ epochText }}</div>
   </b>
 </template>