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

src/components/Graph/Graph.vue

@@ -13,6 +13,13 @@ 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>
+  <SelectorLegend
+    :data="option.legend.data"
+    :show="legendSelector.isSelector"
+    :isConfigPage="legendSelector.isConfigPage"
+    :colors="option.color"
+    @change="changeLegend"
+  />
   <div class="chart" ref="chartRef" :style="`height:${height};width:${width};`">
     <div v-if="!available" class="no-data">No Data</div>
     <div
@@ -54,6 +61,7 @@ limitations under the License. -->
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import associateProcessor from "@/hooks/useAssociateProcessor";
   import { WidgetType } from "@/views/dashboard/data";
+  import SelectorLegend from "./Legend.vue";
 
   /*global Nullable, defineProps, defineEmits, Indexable*/
   const emits = defineEmits(["select"]);
@@ -84,6 +92,10 @@ limitations under the License. -->
       type: Array as PropType<{ widgetId: string }[]>,
       default: () => [],
     },
+    legendSelector: {
+      type: Object as PropType<Indexable>,
+      default: () => ({ isConfigPage: false, isSelector: false }),
+    },
   });
   const available = computed(
     () =>
@@ -103,6 +115,7 @@ limitations under the License. -->
       if (!instance) {
         return;
       }
+
       instance.on("click", (params: EventParams) => {
         currentParams.value = params;
         if (props.option.series.type === "sankey") {
@@ -203,6 +216,23 @@ limitations under the License. -->
     });
   }
 
+  function changeLegend(names: string[]) {
+    const instance = getInstance();
+    for (const item of props.option.legend.data) {
+      if (names.includes(item.name)) {
+        instance.dispatchAction({
+          type: "legendSelect",
+          name: item.name,
+        });
+      } else {
+        instance.dispatchAction({
+          type: "legendUnSelect",
+          name: item.name,
+        });
+      }
+    }
+  }
+
   watch(
     () => props.option,
     (newVal, oldVal) => {

src/components/Graph/Legend.vue

@@ -0,0 +1,74 @@
+<!-- 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
+    collapseTags
+    collapseTagsTooltip
+    v-if="show"
+  />
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch } from "vue";
+  import type { PropType } from "vue";
+  import type { Option } from "@/types/app";
+  import Selector from "./Selector.vue";
+
+  const props = defineProps({
+    data: {
+      type: Array as PropType<{ name: string }[]>,
+      default: () => [],
+    },
+    colors: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    isConfigPage: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(["change"]);
+  const legend = ref<string[]>([]);
+  const Options = computed(() =>
+    props.data.map((d: { name: string }, index: number) => ({
+      label: d.name,
+      value: d.name,
+      color: props.colors[index % props.colors.length],
+    })),
+  );
+
+  function changeLegend(opt: Option[]) {
+    legend.value = opt.map((d: Option) => d.value);
+    emits("change", legend.value);
+  }
+
+  watch(
+    () => props.data,
+    () => {
+      legend.value = props.data.map((d) => d.name);
+    },
+  );
+</script>

src/components/Graph/Selector.vue

@@ -0,0 +1,107 @@
+<!-- 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>
+  <el-select
+    :size="size"
+    v-model="selected"
+    :placeholder="placeholder"
+    @change="changeSelected"
+    :multiple="multiple"
+    :disabled="disabled"
+    :style="{ borderRadius }"
+    :clearable="clearable"
+    :remote="isRemote"
+    :reserve-keyword="isRemote"
+    :remote-method="remoteMethod"
+    :filterable="filterable"
+    :collapse-tags="collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="`${item.value}${index}`"
+      :label="item.label || ''"
+      :value="item.value || ''"
+      :disabled="item.disabled || false"
+    >
+      <div class="flex items-center">
+        <el-tag :color="item.color" class="mr-5" size="small" />
+        <span :style="{ color: item.color }">{{ item.label }}</span>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from "vue";
+  import type { PropType } from "vue";
+
+  /*global  defineProps, defineEmits, Indexable*/
+  const emit = defineEmits(["change", "query"]);
+  const props = defineProps({
+    options: {
+      type: Array as PropType<
+        ({
+          label: string | number;
+          value: string | number;
+          color: string;
+        } & { disabled?: boolean })[]
+      >,
+      default: () => [],
+    },
+    value: {
+      type: [Array, String, Number, undefined] as PropType<any>,
+      default: () => [],
+    },
+    size: { type: null, default: "default" },
+    placeholder: {
+      type: [String, undefined] as PropType<string>,
+      default: "Select a option",
+    },
+    borderRadius: { type: Number, default: 3 },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    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);
+  function changeSelected() {
+    const options = props.options.filter((d: Indexable) =>
+      props.multiple ? selected.value.includes(d.value) : selected.value === d.value,
+    );
+    emit("change", options);
+  }
+
+  function remoteMethod(query: string) {
+    if (props.isRemote) {
+      emit("query", query);
+    }
+  }
+
+  watch(
+    () => props.value,
+    (data) => {
+      selected.value = data;
+    },
+  );
+</script>
+<style lang="scss" scoped>
+  .el-input__inner {
+    border-radius: unset !important;
+  }
+</style>

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/components/index.ts

@@ -18,7 +18,7 @@ import type { App } from "vue";
 import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
 import Selector from "./Selector.vue";
-import Graph from "./Graph.vue";
+import Graph from "./Graph/Graph.vue";
 import Radio from "./Radio.vue";
 import SelectSingle from "./SelectSingle.vue";
 import Tags from "./Tags.vue";