From 63f9833899461a25eee34783e7c85aad293b96f0 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 9 Nov 2022 18:11:25 +0800
Subject: [PATCH] add popover

---
 src/hooks/useLegendProcessor.ts               |  2 +-
 .../dashboard/graphs/components/Legend.vue    | 42 ++++++++++++++++---
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index d184ffa7..177b7e66 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -47,7 +47,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
     for (const [key, value] of keys.entries()) {
       const item: { [key: string]: unknown } = {
         name: value,
-        linear: data[value],
+        topN: data[value],
       };
       if (legend) {
         if (legend.min) {
diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index 819614c2..be9ba89c 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -29,10 +29,24 @@ limitations under the License. -->
       </tr>
       <tr class="col-item" v-for="(item, index) in tableData" :key="index">
         <td class="header-cell">
-          <div class="cell">
-            <Icon iconName="circle" :style="`color: ${colors[index]};`" />
-            <i style="font-style: normal">{{ item.name }}</i>
-          </div>
+          <el-popover placement="bottom" :width="100" trigger="click">
+            <template #reference>
+              <div class="cell name">
+                <Icon iconName="circle" :style="`color: ${colors[index]};`" />
+                <i>{{ item.name }}</i>
+              </div>
+            </template>
+            <div>
+              <div
+                class="value"
+                v-for="(value, index) in item.topN"
+                :key="index"
+              >
+                <span>{{ index }}</span>
+                <span>{{ value }}</span>
+              </div>
+            </div>
+          </el-popover>
         </td>
         <td v-for="h in headerRow" :key="h.value">
           <div class="cell">{{ item[h.value] }}</div>
@@ -95,6 +109,10 @@ table {
     text-overflow: ellipsis;
     vertical-align: middle;
     width: 100px;
+
+    &.header-cell {
+      width: 150px;
+    }
   }
 }
 
@@ -106,9 +124,21 @@ table {
   word-break: break-all;
   line-height: 23px;
   padding: 0 5px;
+
+  i {
+    font-style: normal;
+  }
 }
 
-.header-cell {
-  width: 150px;
+.value {
+  span {
+    display: inline-block;
+    padding: 5px;
+    width: 50px;
+  }
+}
+
+.name {
+  cursor: pointer;
 }
 </style>