add selector for legend

src/components/Graph.vue

@@ -84,6 +84,10 @@ limitations under the License. -->
       type: Array as PropType<{ widgetId: string }[]>,
       default: () => [],
     },
+    legend: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
   });
   const available = computed(
     () =>
@@ -103,6 +107,7 @@ limitations under the License. -->
       if (!instance) {
         return;
       }
+
       instance.on("click", (params: EventParams) => {
         currentParams.value = params;
         if (props.option.series.type === "sankey") {
@@ -227,6 +232,20 @@ limitations under the License. -->
     },
   );
 
+  watch(
+    () => props.legend,
+    () => {
+      const instance = getInstance();
+      console.log(props.legend);
+      for (const l of props.legend) {
+        instance.dispatchAction({
+          type: "legendSelect",
+          name: l,
+        });
+      }
+    },
+  );
+
   onBeforeUnmount(() => {
     removeResizeListener(unref(chartRef), resize);
   });

src/components/Selector.vue

@@ -26,6 +26,8 @@ limitations under the License. -->
     :reserve-keyword="isRemote"
     :remote-method="remoteMethod"
     :filterable="filterable"
+    :collapse-tags="collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
   >
     <el-option
       v-for="(item, index) in options"
@@ -41,11 +43,6 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import type { PropType } from "vue";
 
-  // interface Option {
-  //   label: string | number;
-  //   value: string | number;
-  // }
-
   /*global  defineProps, defineEmits, Indexable*/
   const emit = defineEmits(["change", "query"]);
   const props = defineProps({
@@ -73,6 +70,8 @@ limitations under the License. -->
     clearable: { type: Boolean, default: false },
     isRemote: { type: Boolean, default: false },
     filterable: { type: Boolean, default: true },
+    collapseTags: { type: Boolean, default: false },
+    collapseTagsTooltip: { type: Boolean, default: false },
   });
 
   const selected = ref<string[] | string>(props.value);

src/hooks/useLegendProcessor.ts

@@ -35,7 +35,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
     if (keys.length === 1) {
       return false;
     }
-    if (legend && legend.asTable) {
+    if (legend && (legend.asTable || legend.asSelector)) {
       return false;
     }
     return true;

src/locales/lang/en.ts

@@ -154,6 +154,7 @@ const msg = {
   legendOptions: "Legend Options",
   showLegend: "Show Legend",
   asTable: "As Table",
+  asSelector: "As Selector",
   toTheRight: "To The Right",
   legendValues: "Legend Values",
   minDuration: "Minimal Request Duration",

src/locales/lang/es.ts

@@ -397,5 +397,6 @@ const msg = {
   instances: "Instances",
   snapshot: "Snapshot",
   expression: "Expression",
+  asSelector: "As Selector",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -152,6 +152,7 @@ const msg = {
   legendOptions: "图例选项",
   showLegend: "显示图例",
   asTable: "作为表格",
+  asSelector: "作为选择器",
   toTheRight: "在右边",
   legendValues: "图例值",
   minDuration: "最小请求持续时间",

src/types/dashboard.d.ts

@@ -197,6 +197,7 @@ export type LegendOptions = {
   asTable: boolean;
   toTheRight: boolean;
   width: number;
+  asSelector: boolean;
 };
 export type MetricsResults = {
   metric: { labels: MetricLabel[] };

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/Line.vue

@@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="graph flex-v" :class="setRight ? 'flex-h' : 'flex-v'">
+    <SelectorLegend :config="config.legend" :data="props.data" @change="changeLegend" />
     <Graph
       :option="option"
-      @select="clickEvent"
       :filters="config.filters"
       :relatedTrace="config.relatedTrace"
       :associate="config.associate || []"
+      :legend="legendItems"
+      @select="clickEvent"
     />
     <Legend :config="config.legend" :data="data" :intervalTime="intervalTime" />
   </div>
@@ -29,6 +31,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import type { LineConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
   import Legend from "./components/Legend.vue";
+  import SelectorLegend from "./components/SelectorLegend.vue";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import { isDef } from "@/utils/is";
   import { useAppStoreWithOut } from "@/store/modules/app";
@@ -66,6 +69,7 @@ limitations under the License. -->
   });
   const appStore = useAppStoreWithOut();
   const setRight = ref<boolean>(false);
+  const legendItems = ref<string[]>([]);
   const option = computed(() => getOption());
   function getOption() {
     const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
@@ -73,7 +77,8 @@ limitations under the License. -->
     const keys = Object.keys(props.data || {}).filter(
       (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
     );
-    const temp = keys.map((i: string) => {
+    legendItems.value = keys;
+    const temp = legendItems.value.map((i: string) => {
       const serie: any = {
         data: props.data[i].map((item: number, itemIndex: number) => [props.intervalTime[itemIndex], item]),
         name: i,
@@ -151,24 +156,15 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
+        data: legendItems.value.map((d: string) => ({ name: d })),
         ...legend,
-        selector: [
-          {
-            type: "all",
-            title: "All",
-          },
-          {
-            type: "inverse",
-            title: "Inverse",
-          },
-        ],
       },
       grid: {
-        top: showEchartsLegend(keys) ? 35 : 10,
+        top: showEchartsLegend(keys) || props.config?.legend?.asSelector ? 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",
@@ -200,6 +196,11 @@ limitations under the License. -->
   function clickEvent(params: EventParams) {
     emits("click", params);
   }
+
+  function changeLegend(params: string[]) {
+    legendItems.value = params;
+    console.log(legendItems.value);
+  }
 </script>
 <style lang="scss" scoped>
   .graph {

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

@@ -0,0 +1,59 @@
+<!-- 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. -->
+<template>
+  <Selector
+    class="mb-10"
+    multiple
+    :value="legend"
+    size="small"
+    :options="Options"
+    @change="changeLegend"
+    filterable
+    v-if="config.asSelector"
+  />
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch } from "vue";
+  import type { PropType } from "vue";
+  import type { Option } from "@/types/app";
+  import type { LegendOptions } from "@/types/dashboard";
+
+  const props = defineProps({
+    data: {
+      type: Object as PropType<{ [key: string]: number[] }>,
+      default: () => ({}),
+    },
+    config: {
+      type: Object as PropType<LegendOptions>,
+      default: () => ({}),
+    },
+  });
+  const emits = defineEmits(["change"]);
+  const legend = ref<string[]>([]);
+  const Options = computed(() => Object.keys(props.data || {}).map((d: string) => ({ label: d, value: d })));
+
+  function changeLegend(opt: Option[]) {
+    legend.value = opt.map((d: Option) => d.value);
+    emits("change", legend.value);
+  }
+  watch(
+    () => props.data,
+    () => {
+      legend.value = Object.keys(props.data || {}).filter(
+        (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
+      );
+    },
+  );
+</script>