From a0fc879eb1b3f5eeb0ea85c96ed5b3affe56b1e0 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Thu, 10 Nov 2022 15:13:17 +0800
Subject: [PATCH] feat: enhance graph legend for the single metric (#182)

---
 .../dashboard/graphs/components/Legend.vue    | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index b9839be4..df5a5ed9 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -21,7 +21,27 @@ limitations under the License. -->
     :style="`width: ${width}; maxHeight:${isRight ? '100%' : 130}`"
     class="scroll_bar_style"
   >
-    <table>
+    <table v-if="tableData.length === 1">
+      <thead>
+        <tr>
+          <th v-show="headerRow.length"></th>
+          <th>
+            {{ tableData[0].name }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="h in headerRow" :key="h.value">
+          <th>
+            {{ h.label }}
+          </th>
+          <td>
+            {{ tableData[0][h.value] }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table v-else>
       <thead>
         <tr>
           <th></th>
@@ -125,6 +145,7 @@ table thead th {
   z-index: 1;
   width: 25vw;
   background: #fff;
+  text-align: left;
 }
 
 .name {
@@ -133,7 +154,6 @@ table thead th {
 
 table td {
   padding: 5px;
-  text-align: center;
 }
 
 table thead th:first-child {
@@ -144,7 +164,7 @@ table thead th:first-child {
 
 table tbody th {
   font-weight: bold;
-  font-style: italic;
+  font-style: normal;
   text-align: left;
   background: #fff;
   position: sticky;