refactor(overview): add legend and show live connection in table

emqx · Sep 5, 2024 · 9eb0d63 · 9eb0d63
1 parent a30eb52
commit 9eb0d63
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/views/Dashboard/components/PolylineCards.vue b/src/views/Dashboard/components/PolylineCards.vue
@@ -96,11 +96,16 @@
           ></polyline-chart>
         </el-col>
         <el-col :span="24">
-          <el-table :data="[calculateStatistics(metricLog[selectedChartItem.value][0].yData)]">
-            <el-table-column prop="last" :label="$t('Base.last')"></el-table-column>
-            <el-table-column prop="max" :label="$t('Base.max')"></el-table-column>
-            <el-table-column prop="min" :label="$t('Base.min')"></el-table-column>
-            <el-table-column prop="avg" :label="$t('Base.avg')"></el-table-column>
+          <el-table :data="generateDetailTableData(selectedChartItemChartData)">
+            <el-table-column :label="t('Base.name')" v-if="selectedChartItemYTitle.length > 1">
+              <template #default="{ $index }">
+                {{ selectedChartItemYTitle[$index] }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="last" :label="t('Base.last')"></el-table-column>
+            <el-table-column prop="max" :label="t('Base.max')"></el-table-column>
+            <el-table-column prop="min" :label="t('Base.min')"></el-table-column>
+            <el-table-column prop="avg" :label="t('Base.avg')"></el-table-column>
           </el-table>
         </el-col>
       </el-row>
@@ -311,6 +316,12 @@ const calculateStatistics = (data: number[]) => {
   return { max, min, avg, last }
 }
 
+const generateDetailTableData = (data: ChartData) => {
+  return data.map((item) => {
+    return calculateStatistics(item.yData)
+  })
+}
+
 syncPolling(loadChartMetrics, POLLING_INTERVAL)
 </script>
 

diff --git a/src/views/Dashboard/components/PolylineChart.vue b/src/views/Dashboard/components/PolylineChart.vue
@@ -20,6 +20,7 @@ import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/title'
 import 'echarts/lib/component/toolbox'
 import 'echarts/lib/component/dataZoom'
+import 'echarts/lib/component/legend'
 import useEchartResize from '@/hooks/useEchartResize'
 import useI18nTl from '@/hooks/useI18nTl'
 import { isUndefined } from 'lodash'
@@ -192,6 +193,7 @@ const drawChart = () => {
       left: 24,
       containLabel: true,
     },
+    legend: props.yTitle.length > 1 ? { top: 4 } : undefined,
     toolbox: {
       feature: {
         saveAsImage: {