[skywalking-booster-ui] branch main updated: feat: enhance graph legend for the single metric (#182)

[wusheng]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new a0fc879  feat: enhance graph legend for the single metric (#182)
a0fc879 is described below

commit a0fc879eb1b3f5eeb0ea85c96ed5b3affe56b1e0
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Thu Nov 10 15:13:17 2022 +0800

    feat: enhance graph legend for the single metric (#182)
---
 src/views/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 b9839be..df5a5ed 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;