update

src/assets/icons/circle.svg

@@ -0,0 +1,15 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg t="1667899293763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4705" width="16" height="16"><path d="M512 512m-368 0a368 368 0 1 0 736 0 368 368 0 1 0-736 0Z" p-id="4706"></path></svg>

src/hooks/useLegendProcessor.ts

@@ -35,7 +35,9 @@ export default function useLegendProcess(legend?: LegendOptions) {
   }
   function aggregations(data: { [key: string]: number[] }) {
     const source: { [key: string]: unknown }[] = [];
-    const keys = Object.keys(data);
+    const keys = Object.keys(data || {}).filter(
+      (i: any) => Array.isArray(data[i]) && data[i].length
+    );
     const headers = [];
 
     for (const [key, value] of keys.entries()) {
@@ -81,5 +83,37 @@ export default function useLegendProcess(legend?: LegendOptions) {
 
     return { source, headers };
   }
-  return { showEchartsLegend, isRight, aggregations };
+  function chartColors(keys: string[]) {
+    let color: string[] = [];
+    switch (keys.length) {
+      case 2:
+        color = ["#FF6A84", "#a0b1e6"];
+        break;
+      case 1:
+        color = ["#3f96e3"];
+        break;
+      default:
+        color = [
+          "#30A4EB",
+          "#45BFC0",
+          "#FFCC55",
+          "#FF6A84",
+          "#a0a7e6",
+          "#c23531",
+          "#2f4554",
+          "#61a0a8",
+          "#d48265",
+          "#91c7ae",
+          "#749f83",
+          "#ca8622",
+          "#bda29a",
+          "#6e7074",
+          "#546570",
+          "#c4ccd3",
+        ];
+        break;
+    }
+    return color;
+  }
+  return { showEchartsLegend, isRight, aggregations, chartColors };
 }

src/views/dashboard/graphs/Bar.vue

@@ -49,7 +49,9 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
+const { showEchartsLegend, isRight, chartColors } = useLegendProcess(
+  props.config.legend
+);
 const option = computed(() => getOption());
 
 function getOption() {
@@ -79,35 +81,7 @@ function getOption() {
       },
     };
   });
-  let color: string[] = [];
+  const color: string[] = chartColors(keys);
-  switch (keys.length) {
-    case 2:
-      color = ["#FF6A84", "#a0b1e6"];
-      break;
-    case 1:
-      color = ["#3f96e3"];
-      break;
-    default:
-      color = [
-        "#30A4EB",
-        "#45BFC0",
-        "#FFCC55",
-        "#FF6A84",
-        "#a0a7e6",
-        "#c23531",
-        "#2f4554",
-        "#61a0a8",
-        "#d48265",
-        "#91c7ae",
-        "#749f83",
-        "#ca8622",
-        "#bda29a",
-        "#6e7074",
-        "#546570",
-        "#c4ccd3",
-      ];
-      break;
-  }
   return {
     color,
     tooltip: {

src/views/dashboard/graphs/Line.vue

@@ -64,7 +64,9 @@ const props = defineProps({
     }),
   },
 });
-const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
+const { showEchartsLegend, isRight, chartColors } = useLegendProcess(
+  props.config.legend
+);
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
@@ -95,35 +97,7 @@ function getOption() {
     }
     return serie;
   });
-  let color: string[] = [];
+  const color: string[] = chartColors(keys);
-  switch (keys.length) {
-    case 2:
-      color = ["#FF6A84", "#a0b1e6"];
-      break;
-    case 1:
-      color = ["#3f96e3"];
-      break;
-    default:
-      color = [
-        "#30A4EB",
-        "#45BFC0",
-        "#FFCC55",
-        "#FF6A84",
-        "#a0a7e6",
-        "#c23531",
-        "#2f4554",
-        "#61a0a8",
-        "#d48265",
-        "#91c7ae",
-        "#749f83",
-        "#ca8622",
-        "#bda29a",
-        "#6e7074",
-        "#546570",
-        "#c4ccd3",
-      ];
-      break;
-  }
   const tooltip = {
     trigger: "none",
     axisPointer: {

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div
-    :style="`width: ${config.width || '100%'}, max-height:${
+    :style="`width: ${config.width || '100%'}; max-height:${
       isRight ? '100%' : 130
     }`"
     v-if="source.length"
@@ -25,7 +25,10 @@ limitations under the License. -->
       <span v-for="h in headers" :key="h.value">{{ h.label }}</span>
     </div>
     <div class="col-item" v-for="(item, index) in source" :key="index">
-      <span>{{ item.name }}</span>
+      <span>
+        <Icon iconName="circle" :style="`color: ${colors[index]};`" />
+        <i style="font-style: normal">{{ item.name }}</i>
+      </span>
       <span v-for="h in headers" :key="h.value">{{ item[h.value] }}</span>
     </div>
   </div>
@@ -46,11 +49,10 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const { aggregations, isRight } = useLegendProcess(props.config);
+const { aggregations, chartColors, isRight } = useLegendProcess(props.config);
 const { source, headers } = aggregations(props.data);
+const keys = Object.keys(props.data || {}).filter(
+  (i: any) => Array.isArray(props.data[i]) && props.data[i].length
+);
+const colors = chartColors(keys);
 </script>
-<style lang="scss" scoped>
-.legend {
-  overflow: auto;
-}
-</style>