From bf776c834dc1ed8a0f7fde71d5374ea02d80006d Mon Sep 17 00:00:00 2001
From: scl <sunchang_long@163.com>
Date: Thu, 25 Jun 2026 10:21:29 +0800
Subject: [PATCH 1/3] feat: legend in one page

---
 .../metrics/components/metrics-chart.vue      | 109 +++---------------
 1 file changed, 19 insertions(+), 90 deletions(-)

diff --git a/src/views/dashboard/metrics/components/metrics-chart.vue b/src/views/dashboard/metrics/components/metrics-chart.vue
index c36d1853b..aef66d745 100644
--- a/src/views/dashboard/metrics/components/metrics-chart.vue
+++ b/src/views/dashboard/metrics/components/metrics-chart.vue
@@ -97,17 +97,11 @@ a-card.metrics-chart(:bordered="false")
   /** Fixed height of the line/bar plot area (excluding legend). */
   const GRAPH_HEIGHT = 400
   const LEGEND_ITEM_HEIGHT = 14
-  const LEGEND_ITEM_GAP = 10
   const LEGEND_LIST_ROW_HEIGHT = LEGEND_ITEM_HEIGHT + 6
-  const LEGEND_LIST_PAGER_HEIGHT = 16
   const LEGEND_ICON_WIDTH = 14
-  const LEGEND_CHAR_WIDTH = 6.5
   const LEGEND_TO_GRID_GAP = 16
   /** Space between legend block and canvas bottom */
   const LEGEND_BOTTOM_INSET = 12
-  /** Above this count, legend uses a single-column list at the bottom */
-  const LEGEND_LIST_THRESHOLD = 5
-  const LEGEND_LIST_MAX_VISIBLE_ROWS = 8
   const AXIS_LABEL_STYLE = { color: 'rgba(71, 52, 96, 0.45)', fontSize: 11 }
   const SPLIT_LINE_STYLE = { type: 'solid' as const, color: 'rgba(71, 52, 96, 0.06)' }
   const AXIS_LINE_STYLE = { lineStyle: { color: 'rgba(71, 52, 96, 0.12)' } }
@@ -233,45 +227,14 @@ a-card.metrics-chart(:bordered="false")
     return formatDateTime(value, 'TimestampMillisecond', 'HH:mm:ss') ?? ''
   }
 
-  const estimateLegendAreaHeight = (
-    count: number,
-    avgNameLength: number,
-    containerWidth: number,
-    listLayout: boolean,
-    listMaxVisibleRows = LEGEND_LIST_MAX_VISIBLE_ROWS
-  ) => {
+  const estimateLegendAreaHeight = (count: number) => {
     if (count === 0) return 0
-
-    if (listLayout) {
-      const visibleRows = Math.min(count, listMaxVisibleRows)
-      const pagerHeight = count > listMaxVisibleRows ? LEGEND_LIST_PAGER_HEIGHT : 0
-      return visibleRows * LEGEND_LIST_ROW_HEIGHT + pagerHeight + 8 + LEGEND_BOTTOM_INSET
-    }
-
-    const maxWidth = Math.max(containerWidth * 0.92 - 24, 240)
-    const itemWidth = avgNameLength * LEGEND_CHAR_WIDTH + LEGEND_ICON_WIDTH + LEGEND_ITEM_GAP
-    const itemsPerRow = Math.max(1, Math.floor(maxWidth / itemWidth))
-    const rows = Math.ceil(count / itemsPerRow)
-    return rows * LEGEND_ITEM_HEIGHT + Math.max(0, rows - 1) * LEGEND_ITEM_GAP + 8
+    return count * LEGEND_LIST_ROW_HEIGHT + 8 + LEGEND_BOTTOM_INSET
   }
 
   const seriesCount = computed(() => seriesData.value.length)
 
-  const useLegendListLayout = computed(() => seriesCount.value >= LEGEND_LIST_THRESHOLD)
-
-  const avgLegendNameLength = computed(() => (showFullSeriesName.value ? 56 : 28))
-
-  const listLegendVisibleRows = computed(() => Math.min(seriesCount.value, LEGEND_LIST_MAX_VISIBLE_ROWS))
-
-  const legendAreaHeight = computed(() =>
-    estimateLegendAreaHeight(
-      seriesCount.value,
-      avgLegendNameLength.value,
-      chartContainerWidth.value || 900,
-      useLegendListLayout.value,
-      LEGEND_LIST_MAX_VISIBLE_ROWS
-    )
-  )
+  const legendAreaHeight = computed(() => estimateLegendAreaHeight(seriesCount.value))
 
   /** Plot area fixed; legend height is additive below the grid. */
   const chartHeight = computed(() => GRAPH_HEIGHT + legendAreaHeight.value + LEGEND_TO_GRID_GAP)
@@ -380,18 +343,7 @@ a-card.metrics-chart(:bordered="false")
     })
 
     const legendNames = series.map((s) => s.name as string)
-    const listLayout = useLegendListLayout.value
-    const listVisibleRows = listLegendVisibleRows.value
-    const legendRows = estimateLegendAreaHeight(
-      legendNames.length,
-      avgLegendNameLength.value,
-      chartContainerWidth.value || 900,
-      listLayout,
-      LEGEND_LIST_MAX_VISIBLE_ROWS
-    )
-    const gridBottom = legendRows + LEGEND_TO_GRID_GAP
-    const useLegendScroll =
-      (!listLayout && legendNames.length > 14) || (listLayout && legendNames.length > LEGEND_LIST_MAX_VISIBLE_ROWS)
+    const gridBottom = legendAreaHeight.value + LEGEND_TO_GRID_GAP
 
     const legendTextStyle = {
       fontSize: 11,
@@ -399,44 +351,21 @@ a-card.metrics-chart(:bordered="false")
       color: 'rgba(71, 52, 96, 0.65)',
     }
 
-    const listLegendWidth = Math.min(
-      (chartContainerWidth.value || 900) * 0.92,
-      Math.max(...legendNames.map((name) => name.length * LEGEND_CHAR_WIDTH + LEGEND_ICON_WIDTH + 20), 120)
-    )
-
-    const listLegendBlockHeight =
-      listVisibleRows * LEGEND_LIST_ROW_HEIGHT + (useLegendScroll ? LEGEND_LIST_PAGER_HEIGHT : 0)
-
-    const legendOption = listLayout
-      ? {
-          type: useLegendScroll ? 'scroll' : 'plain',
-          orient: 'vertical',
-          left: 'center',
-          bottom: LEGEND_BOTTOM_INSET,
-          width: listLegendWidth,
-          height: Math.max(listLegendBlockHeight, LEGEND_LIST_ROW_HEIGHT),
-          itemWidth: LEGEND_ICON_WIDTH,
-          itemHeight: LEGEND_ITEM_HEIGHT,
-          itemGap: 6,
-          textStyle: legendTextStyle,
-          ...(useLegendScroll
-            ? {
-                pageIconSize: 10,
-                pageTextStyle: { fontSize: 10, color: 'rgba(71, 52, 96, 0.45)' },
-              }
-            : {}),
-        }
-      : {
-          type: useLegendScroll ? 'scroll' : 'plain',
-          orient: 'horizontal',
-          bottom: 0,
-          left: 'center',
-          width: '92%',
-          itemWidth: LEGEND_ICON_WIDTH,
-          itemHeight: 10,
-          itemGap: LEGEND_ITEM_GAP,
-          textStyle: legendTextStyle,
-        }
+    const legendOption = {
+      type: 'plain',
+      orient: 'vertical',
+      left: 'center',
+      bottom: LEGEND_BOTTOM_INSET,
+      width: Math.min(
+        (chartContainerWidth.value || 900) * 0.92,
+        Math.max(...legendNames.map((name) => name.length * 6.5 + LEGEND_ICON_WIDTH + 20), 120)
+      ),
+      height: Math.max(legendAreaHeight.value - LEGEND_BOTTOM_INSET - 8, LEGEND_LIST_ROW_HEIGHT),
+      itemWidth: LEGEND_ICON_WIDTH,
+      itemHeight: LEGEND_ITEM_HEIGHT,
+      itemGap: 6,
+      textStyle: legendTextStyle,
+    }
 
     return {
       color: METRICS_CHART_COLORS,

From 1ccad4d81866ef8acaf737ec9e272e33acd50799 Mon Sep 17 00:00:00 2001
From: scl <sunchang_long@163.com>
Date: Thu, 25 Jun 2026 14:27:55 +0800
Subject: [PATCH 2/3] feat: toggle series display

---
 .../metrics/components/metrics-chart.vue      | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/views/dashboard/metrics/components/metrics-chart.vue b/src/views/dashboard/metrics/components/metrics-chart.vue
index aef66d745..61cc35e47 100644
--- a/src/views/dashboard/metrics/components/metrics-chart.vue
+++ b/src/views/dashboard/metrics/components/metrics-chart.vue
@@ -60,7 +60,7 @@ a-card.metrics-chart(:bordered="false")
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch, inject } from 'vue'
+  import { ref, computed, watch, watchEffect, inject, nextTick } from 'vue'
   import { useElementSize } from '@vueuse/core'
   import Chart from '@/components/raw-chart/index.vue'
   import TimeRangeSelect from '@/components/time-range-select/index.vue'
@@ -202,6 +202,8 @@ a-card.metrics-chart(:bordered="false")
   })
 
   const showFullSeriesName = ref(false)
+  /** When set, only this series is shown (solo mode). Disables legend-hover dimming. */
+  const soloSeriesName = ref<string | null>(null)
 
   const chartKey = computed(() => {
     return `${query.value}-${step.value}-${showFullSeriesName.value}`
@@ -238,6 +240,37 @@ a-card.metrics-chart(:bordered="false")
 
   /** Plot area fixed; legend height is additive below the grid. */
   const chartHeight = computed(() => GRAPH_HEIGHT + legendAreaHeight.value + LEGEND_TO_GRID_GAP)
+
+  // Attach legendselectchanged event to implement solo mode:
+  // clicking a legend item shows only that series and hides all others.
+  // The actual selection state is driven by `selected` map in chartOption (recomputed when soloSeriesName changes).
+  // While in solo mode, legend-hover dimming is disabled via emphasis.focus in chartOption.
+  watchEffect(() => {
+    if (!hasData.value) return
+    nextTick(() => {
+      const chartComponent = chartRef.value
+      if (!chartComponent) return
+      const instance = chartComponent.getInstance()
+      if (!instance) return
+
+      const handler = (params: any) => {
+        const { name } = params
+        console.log('[legend] click name:', name, 'soloSeriesName:', soloSeriesName.value)
+        if (name === soloSeriesName.value) {
+          console.log('[legend] restore all')
+          soloSeriesName.value = null
+        } else {
+          console.log('[legend] solo mode')
+          soloSeriesName.value = name
+        }
+      }
+
+      instance.off('legendselectchanged', handler)
+      instance.on('legendselectchanged', handler)
+      console.log('[legend] handler attached')
+    })
+  })
+
   const chartOption = computed<EChartsOption>(() => {
     if (!hasData.value) return {}
     // Option: control whether to display full series name or compact unique-label name
@@ -328,7 +361,7 @@ a-card.metrics-chart(:bordered="false")
                 width: 2,
               },
         emphasis: {
-          focus: 'series',
+          focus: soloSeriesName.value ? 'none' : 'series',
           lineStyle: {
             width: 2.5,
           },
@@ -365,6 +398,9 @@ a-card.metrics-chart(:bordered="false")
       itemHeight: LEGEND_ITEM_HEIGHT,
       itemGap: 6,
       textStyle: legendTextStyle,
+      selected: soloSeriesName.value
+        ? Object.fromEntries(legendNames.map((n) => [n, n === soloSeriesName.value]))
+        : undefined,
     }
 
     return {

From 92dd6cc872662d6923f4bf90eb608d5c8a1c7c19 Mon Sep 17 00:00:00 2001
From: scl <sunchang_long@163.com>
Date: Thu, 25 Jun 2026 14:52:07 +0800
Subject: [PATCH 3/3] fix: full series name

---
 .../metrics/components/metrics-chart.vue      | 60 +++++++++++--------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/views/dashboard/metrics/components/metrics-chart.vue b/src/views/dashboard/metrics/components/metrics-chart.vue
index 61cc35e47..6c145dcbd 100644
--- a/src/views/dashboard/metrics/components/metrics-chart.vue
+++ b/src/views/dashboard/metrics/components/metrics-chart.vue
@@ -60,7 +60,7 @@ a-card.metrics-chart(:bordered="false")
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch, watchEffect, inject, nextTick } from 'vue'
+  import { ref, computed, watch, inject, nextTick } from 'vue'
   import { useElementSize } from '@vueuse/core'
   import Chart from '@/components/raw-chart/index.vue'
   import TimeRangeSelect from '@/components/time-range-select/index.vue'
@@ -209,6 +209,12 @@ a-card.metrics-chart(:bordered="false")
     return `${query.value}-${step.value}-${showFullSeriesName.value}`
   })
 
+  // Reset solo mode whenever series names are recomputed (query/step/showFullSeriesName change),
+  // otherwise the stale soloSeriesName no longer matches any legend name and hides everything.
+  watch(chartKey, () => {
+    soloSeriesName.value = null
+  })
+
   const formatChartAxisTime = (value: number): string => {
     const range = timeRange.value as [number, number] | undefined
     if (!range || range.length !== 2) {
@@ -245,31 +251,37 @@ a-card.metrics-chart(:bordered="false")
   // clicking a legend item shows only that series and hides all others.
   // The actual selection state is driven by `selected` map in chartOption (recomputed when soloSeriesName changes).
   // While in solo mode, legend-hover dimming is disabled via emphasis.focus in chartOption.
-  watchEffect(() => {
-    if (!hasData.value) return
-    nextTick(() => {
-      const chartComponent = chartRef.value
-      if (!chartComponent) return
-      const instance = chartComponent.getInstance()
-      if (!instance) return
-
-      const handler = (params: any) => {
-        const { name } = params
-        console.log('[legend] click name:', name, 'soloSeriesName:', soloSeriesName.value)
-        if (name === soloSeriesName.value) {
-          console.log('[legend] restore all')
-          soloSeriesName.value = null
-        } else {
-          console.log('[legend] solo mode')
-          soloSeriesName.value = name
+  // Attach legendselectchanged event to implement solo mode:
+  // clicking a legend item shows only that series and hides all others.
+  // The actual selection state is driven by `selected` map in chartOption (recomputed when soloSeriesName changes).
+  // While in solo mode, legend-hover dimming is disabled via emphasis.focus in chartOption.
+  // Watch chartKey so the handler is re-attached when the chart is recreated
+  // (e.g., when toggling showFullSeriesName, which changes :key on the Chart component).
+  watch(
+    [hasData, chartKey],
+    () => {
+      if (!hasData.value) return
+      nextTick(() => {
+        const chartComponent = chartRef.value
+        if (!chartComponent) return
+        const instance = chartComponent.getInstance()
+        if (!instance) return
+
+        const handler = (params: any) => {
+          const { name } = params
+          if (name === soloSeriesName.value) {
+            soloSeriesName.value = null
+          } else {
+            soloSeriesName.value = name
+          }
         }
-      }
 
-      instance.off('legendselectchanged', handler)
-      instance.on('legendselectchanged', handler)
-      console.log('[legend] handler attached')
-    })
-  })
+        instance.off('legendselectchanged', handler)
+        instance.on('legendselectchanged', handler)
+      })
+    },
+    { immediate: true }
+  )
 
   const chartOption = computed<EChartsOption>(() => {
     if (!hasData.value) return {}