feat: Implement the legend selector in metrics charts (#447)

src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue

@@ -22,6 +22,15 @@ limitations under the License. -->
       @change="updateLegendConfig({ show: legend.show })"
     />
   </div>
+  <div>
+    <span class="label mr-5">{{ t("asSelector") }}</span>
+    <el-switch
+      v-model="legend.asSelector"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ asSelector: legend.asSelector })"
+    />
+  </div>
   <div>
     <span class="label">{{ t("asTable") }}</span>
     <el-switch
@@ -97,6 +106,7 @@ limitations under the License. -->
     max: false,
     mean: false,
     asTable: false,
+    asSelector: false,
     toTheRight: false,
     width: 130,
     ...graph.value.legend,

src/views/dashboard/graphs/Bar.vue

@@ -75,6 +75,34 @@ limitations under the License. -->
       };
     });
     const color: string[] = chartColors();
+    const legend =
+      appStore.theme === Themes.Dark
+        ? {
+            pageIconColor: "#ccc",
+            pageIconInactiveColor: "#444",
+            backgroundColor: "#333",
+            borderColor: "#fff",
+            textStyle: {
+              fontSize: 12,
+              color: "#eee",
+            },
+            pageTextStyle: {
+              color: "#eee",
+            },
+          }
+        : {
+            pageIconColor: "#666",
+            pageIconInactiveColor: "#ccc",
+            backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+            borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+            textStyle: {
+              fontSize: 12,
+              color: "#333",
+            },
+            pageTextStyle: {
+              color: "#333",
+            },
+          };
     return {
       color,
       tooltip: {
@@ -94,15 +122,10 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
-        backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
-        borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
-        textStyle: {
-          fontSize: 12,
-          color: appStore.theme === Themes.Dark ? "#eee" : "#333",
-        },
+        ...legend,
       },
       grid: {
-        top: keys.length === 1 ? 15 : 40,
+        top: showEchartsLegend(keys) ? 35 : 10,
         left: 0,
         right: 10,
         bottom: 5,

src/views/dashboard/graphs/Line.vue

@@ -16,10 +16,11 @@ limitations under the License. -->
   <div class="graph flex-v" :class="setRight ? 'flex-h' : 'flex-v'">
     <Graph
       :option="option"
-      @select="clickEvent"
       :filters="config.filters"
       :relatedTrace="config.relatedTrace"
       :associate="config.associate || []"
+      :legendSelector="{ isSelector: legendSelector, sConfigPage: dashboardStore.showConfig }"
+      @select="clickEvent"
     />
     <Legend :config="config.legend" :data="data" :intervalTime="intervalTime" />
   </div>
@@ -32,6 +33,7 @@ limitations under the License. -->
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import { isDef } from "@/utils/is";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useDashboardStore } from "@/store/modules/dashboard";
   import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
@@ -61,12 +63,13 @@ limitations under the License. -->
         smallTips: false,
         showlabels: true,
         noTooltips: false,
-        showLegend: true,
       }),
     },
   });
   const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
   const setRight = ref<boolean>(false);
+  const legendSelector = computed(() => props.config.legend?.asSelector);
   const option = computed(() => getOption());
   function getOption() {
     const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
@@ -124,27 +127,49 @@ limitations under the License. -->
         color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
     };
-
+    const legend =
+      appStore.theme === Themes.Dark
+        ? {
+            pageIconColor: "#ccc",
+            pageIconInactiveColor: "#444",
+            textStyle: {
+              fontSize: 12,
+              color: "#eee",
+            },
+            pageTextStyle: {
+              color: "#eee",
+            },
+          }
+        : {
+            pageIconColor: "#666",
+            pageIconInactiveColor: "#ccc",
+            textStyle: {
+              fontSize: 12,
+              color: "#333",
+            },
+            pageTextStyle: {
+              color: "#333",
+            },
+          };
     return {
       color,
       tooltip: props.config.smallTips ? tips : tooltip,
       legend: {
         type: "scroll",
-        show: props.config.showLegend ? showEchartsLegend(keys) : false,
+        show: showEchartsLegend(keys),
         icon: "circle",
         top: 0,
         left: 0,
         itemWidth: 12,
-        textStyle: {
-          color: appStore.theme === Themes.Dark ? "#fff" : "#333",
-        },
+        data: keys.map((d: string) => ({ name: d })),
+        ...legend,
       },
       grid: {
         top: showEchartsLegend(keys) ? 35 : 10,
         left: 0,
         right: 10,
         bottom: 5,
-        containLabel: props.config.showlabels === undefined ? true : props.config.showlabels,
+        containLabel: isDef(props.config.showlabels) ? props.config.showlabels : true,
       },
       xAxis: {
         type: "category",