feat: add chart colors

src/hooks/data.ts

@@ -130,3 +130,43 @@ export const RespFields: Indexable = {
     error
   }`,
 };
+
+export const DarkChartColors = [
+  "#79bbff",
+  "#a0a7e6",
+  "#30A4EB",
+  "#45BFC0",
+  "#ebbf93",
+  "#884dde",
+  "#1bbf93",
+  "#7289ab",
+  "#f56c6c",
+  "#81feb7",
+  "#4094fa",
+  "#ff894d",
+  "#884dde",
+  "#ebbf93",
+  "#fedc6d",
+  "#da7cfa",
+  "#b88230",
+  "#a0cfff",
+];
+
+export const LightChartColors = [
+  "#3f96e3",
+  "#a0a7e6",
+  "#45BFC0",
+  "#FFCC55",
+  "#FF6A84",
+  "#c23531",
+  "#2f4554",
+  "#61a0a8",
+  "#d48265",
+  "#91c7ae",
+  "#749f83",
+  "#ca8622",
+  "#bda29a",
+  "#6e7074",
+  "#546570",
+  "#c4ccd3",
+];

src/hooks/useLegendProcessor.ts

@@ -16,6 +16,9 @@
  */
 import type { LegendOptions } from "@/types/dashboard";
 import { isDef } from "@/utils/is";
+import { DarkChartColors, LightChartColors } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export default function useLegendProcess(legend?: LegendOptions) {
   let isRight = false;
@@ -96,37 +99,11 @@ export default function useLegendProcess(legend?: LegendOptions) {
 
     return { source, headers };
   }
-  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;
+  function chartColors() {
+    const appStore = useAppStoreWithOut();
+    const list = appStore.theme === Themes.Dark ? DarkChartColors : LightChartColors;
+
+    return list;
   }
   return { showEchartsLegend, isRight, aggregations, chartColors };
 }

src/views/dashboard/graphs/Bar.vue

@@ -74,7 +74,7 @@ limitations under the License. -->
         },
       };
     });
-    const color: string[] = chartColors(keys);
+    const color: string[] = chartColors();
     return {
       color,
       tooltip: {

src/views/dashboard/graphs/Line.vue

@@ -92,7 +92,7 @@ limitations under the License. -->
       }
       return serie;
     });
-    const color: string[] = chartColors(keys);
+    const color: string[] = chartColors();
     const tooltip = {
       trigger: "axis",
       backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",

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

@@ -111,9 +111,8 @@ limitations under the License. -->
   const isRight = computed(() => useLegendProcess(props.config).isRight);
   const width = computed(() => (props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%"));
   const colors = computed(() => {
-    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
     const { chartColors } = useLegendProcess(props.config);
-    return chartColors(keys);
+    return chartColors();
   });
 </script>
 <style lang="scss" scoped>