topN

src/hooks/useLegendProcessor.ts

@@ -37,7 +37,10 @@ export default function useLegendProcess(legend?: LegendOptions) {
     }
     return true;
   }
-  function aggregations(data: { [key: string]: number[] }) {
+  function aggregations(
+    data: { [key: string]: number[] },
+    intervalTime: string[]
+  ) {
     const source: { [key: string]: unknown }[] = [];
     const keys = Object.keys(data || {}).filter(
       (i: any) => Array.isArray(data[i]) && data[i].length
@@ -45,9 +48,23 @@ export default function useLegendProcess(legend?: LegendOptions) {
     const headers = [];
 
     for (const [key, value] of keys.entries()) {
+      const arr = JSON.parse(JSON.stringify(data[value]));
       const item: { [key: string]: unknown } = {
         name: value,
-        topN: data[value],
+        topN: arr
+          .map((d: number, index: number) => {
+            return {
+              key: intervalTime[index],
+              value: d,
+            };
+          })
+          .sort(
+            (
+              a: { key: string; value: number },
+              b: { key: string; value: number }
+            ) => b.value - a.value
+          )
+          .filter((_: unknown, index: number) => index < 10),
       };
       if (legend) {
         if (legend.min) {

src/views/dashboard/graphs/Line.vue

@@ -20,7 +20,7 @@ limitations under the License. -->
       :filters="config.filters"
       :relatedTrace="config.relatedTrace"
     />
-    <Legend :config="config.legend" :data="data" />
+    <Legend :config="config.legend" :data="data" :intervalTime="intervalTime" />
   </div>
 </template>
 <script lang="ts" setup>

src/views/dashboard/graphs/components/Legend.vue

@@ -29,21 +29,21 @@ limitations under the License. -->
       </tr>
       <tr class="col-item" v-for="(item, index) in tableData" :key="index">
         <td class="header-cell">
-          <el-popover placement="bottom" :width="100" trigger="click">
+          <el-popover placement="bottom" :width="230" trigger="click">
             <template #reference>
               <div class="cell name">
                 <Icon iconName="circle" :style="`color: ${colors[index]};`" />
                 <i>{{ item.name }}</i>
               </div>
             </template>
-            <div>
+            <div class="list">
-              <div
+              <div class="value">
-                class="value"
+                <span>Key</span>
-                v-for="(value, index) in item.topN"
+                <span>Value</span>
-                :key="index"
+              </div>
-              >
+              <div class="value" v-for="(d, index) in item.topN" :key="index">
-                <span>{{ index }}</span>
+                <span>{{ d.key }}</span>
-                <span>{{ value }}</span>
+                <span>{{ d.value }}</span>
               </div>
             </div>
           </el-popover>
@@ -71,15 +71,16 @@ const props = defineProps({
     type: Object as PropType<LegendOptions>,
     default: () => ({}),
   },
+  intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
 
-const tableData = computed(() => {
+const tableData: any = computed(() => {
   const { aggregations } = useLegendProcess(props.config);
-  return aggregations(props.data).source;
+  return aggregations(props.data, props.intervalTime).source;
 });
 const headerRow = computed(() => {
   const { aggregations } = useLegendProcess(props.config);
-  return aggregations(props.data).headers;
+  return aggregations(props.data, props.intervalTime).headers;
 });
 const isRight = computed(() => useLegendProcess(props.config).isRight);
 const colors = computed(() => {
@@ -134,11 +135,16 @@ table {
   span {
     display: inline-block;
     padding: 5px;
-    width: 50px;
+    width: 80px;
   }
 }
 
 .name {
   cursor: pointer;
 }
+
+.list {
+  height: 360px;
+  overflow: auto;
+}
 </style>