feat: enhance the legend of metrics graph widget with the summary table (#181)

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/components/Graph.vue

@@ -215,6 +215,7 @@ onBeforeUnmount(() => {
 
 .chart {
   overflow: hidden;
+  flex: 1;
 }
 
 .menus {

src/hooks/useLegendProcessor.ts

@@ -0,0 +1,142 @@
+/**
+ * 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.
+ */
+import { LegendOptions } from "@/types/dashboard";
+import { isDef } from "@/utils/is";
+
+export default function useLegendProcess(legend?: LegendOptions) {
+  let isRight = false;
+  if (legend && legend.toTheRight) {
+    isRight = true;
+  }
+  function showEchartsLegend(keys: string[]) {
+    if (legend && isDef(legend.show)) {
+      if (legend.asTable && legend.show) {
+        return false;
+      }
+      return legend.show;
+    }
+    if (keys.length === 1) {
+      return false;
+    }
+    if (legend && legend.asTable) {
+      return false;
+    }
+    return true;
+  }
+  function aggregations(
+    data: { [key: string]: number[] },
+    intervalTime: string[]
+  ) {
+    const source: { [key: string]: unknown }[] = [];
+    const keys = Object.keys(data || {}).filter(
+      (i: any) => Array.isArray(data[i]) && data[i].length
+    );
+    const headers = [];
+
+    for (const [key, value] of keys.entries()) {
+      const arr = JSON.parse(JSON.stringify(data[value]));
+      const item: { [key: string]: unknown } = {
+        name: value,
+        topN: arr
+          .map((d: number, index: number) => {
+            return {
+              key: intervalTime[index],
+              value: d,
+            };
+          })
+          .sort(
+            (
+              a: { key: string; value: number },
+              b: { key: string; value: number }
+            ) => b.value - a.value
+          )
+          .filter((_: unknown, index: number) => index < 10),
+      };
+      if (legend) {
+        if (legend.min) {
+          item.min = Math.min(...data[value]).toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "min", label: "Min" });
+          }
+        }
+        if (legend.max) {
+          item.max = Math.max(...data[value]).toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "max", label: "Max" });
+          }
+        }
+        if (legend.mean) {
+          const total = data[value].reduce((prev: number, next: number) => {
+            prev += Number(next);
+            return prev;
+          }, 0);
+          item.mean = (total / data[value].length).toFixed(4);
+          if (key === 0) {
+            headers.push({ value: "mean", label: "Mean" });
+          }
+        }
+        if (legend.total) {
+          item.total = data[value]
+            .reduce((prev: number, next: number) => {
+              prev += Number(next);
+              return prev;
+            }, 0)
+            .toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "total", label: "Total" });
+          }
+        }
+      }
+      source.push(item);
+    }
+
+    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;
+  }
+  return { showEchartsLegend, isRight, aggregations, chartColors };
+}

src/hooks/useMetricsProcessor.ts

@@ -184,7 +184,7 @@ export function useSourceProcessor(
     const c = (config.metricConfig && config.metricConfig[index]) || {};
 
     if (type === MetricQueryTypes.ReadMetricsValues) {
-      source[m] =
+      source[c.label || m] =
         (resp.data[keys[index]] &&
           calculateExp(resp.data[keys[index]].values.values, c)) ||
         [];

src/locales/lang/en.ts

@@ -52,17 +52,19 @@ const msg = {
   instance: "Instance",
   create: "Create",
   loading: "Loading",
-  selectVisualization: "Visualize your metrics",
+  selectVisualization: "Visualize Metrics",
   visualization: "Visualization",
-  graphStyles: "Graph styles",
-  widgetOptions: "Widget options",
-  standardOptions: "Standard options",
+  graphStyles: "Graph Styles",
+  widgetOptions: "Widget Options",
+  standardOptions: "Standard Options",
   max: "Max",
   min: "Min",
   plus: "Plus",
+  mean: "Mean",
   minus: "Minus",
   multiply: "Multiply",
   divide: "Divide",
+  total: "Total",
   convertToMilliseconds: "Convert Unix Timestamp(milliseconds)",
   convertToSeconds: "Convert Unix Timestamp(seconds)",
   smooth: "Smooth",
@@ -167,6 +169,11 @@ const msg = {
   enableRelatedTrace: "Enable Related Trace",
   maxTraceDuration: "Maximum Duration",
   minTraceDuration: "Minimum Duration",
+  legendOptions: "Legend Options",
+  showLegend: "Show Legend",
+  asTable: "As Table",
+  toTheRight: "To The Right",
+  legendValues: "Legend Values",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
@@ -259,7 +266,7 @@ const msg = {
   entityType: "Entity Type",
   maxItemNum: "Max number of Item",
   unknownMetrics: "Unknown Metrics",
-  labels: "Labels",
+  labels: "Label",
   aggregation: "Calculation",
   unit: "Unit",
   labelsIndex: "Label Subscript",
@@ -320,6 +327,7 @@ const msg = {
   eventsParameters: "Event Parameters",
   eventDetail: "Event Detail",
   value: "Value",
+  key: "Key",
   show: "Show",
   hide: "Hide",
   statistics: "Statistics",

src/locales/lang/es.ts

@@ -59,9 +59,11 @@ const msg = {
   standardOptions: "Opciones estandar",
   max: "Máx",
   min: "Mín",
+  mean: "Promedio",
   plus: "Más",
   minus: "Menoss",
   multiply: "Multiplcar",
+  total: "Todo",
   divide: "Dividir",
   convertToMilliseconds: "Convertir Unix Timestamp(milisegundos)",
   convertToSeconds: "Convertir Unix Timestamp(segundos)",
@@ -160,6 +162,7 @@ const msg = {
   queryOrder: "Orden de consulta",
   latency: "Retraso",
   metricValues: "Valor métrico",
+  legendValues: "Valor de la leyenda",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
@@ -171,6 +174,10 @@ const msg = {
   queryConditions: "Condiciones de consulta",
   maxTraceDuration: "Duración máxima",
   minTraceDuration: "Duración mínima",
+  legendOptions: "Opciones de leyenda",
+  showLegend: "Mostrar leyenda",
+  asTable: "Como tabla",
+  toTheRight: "Derecha",
   second: "s",
   yearSuffix: "Año",
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
@@ -320,6 +327,7 @@ const msg = {
   eventsParameters: "Parámetro del Evento",
   eventDetail: "Detalle del Evento",
   value: "Valor",
+  key: "Clave",
   show: "Mostrar",
   hide: "Oculatr",
   statistics: "Estadísticas",

src/locales/lang/zh.ts

@@ -56,10 +56,12 @@ const msg = {
   standardOptions: "标准选项",
   max: "最大值",
   min: "最小值",
+  mean: "平均值",
   plus: "加法",
   minus: "减法",
   multiply: "乘法",
   divide: "除法",
+  total: "总计",
   convertToMilliseconds: "转换Unix时间戳（毫秒）",
   convertToSeconds: "转换Unix时间戳（秒）",
   smooth: "光滑的",
@@ -164,6 +166,11 @@ const msg = {
   queryConditions: "查询条件",
   maxTraceDuration: "最大持续时间",
   minTraceDuration: "最小持续时间",
+  legendOptions: "图例选项",
+  showLegend: "显示图例",
+  asTable: "作为表格",
+  toTheRight: "在右边",
+  legendValues: "图例值",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
@@ -318,6 +325,7 @@ const msg = {
   eventsParameters: "事件参数",
   eventDetail: "事件详情",
   value: "数值",
+  key: "Key",
   tableHeader: "表头名称",
   tableValues: "表值",
   show: "展示",

src/store/modules/topology.ts

@@ -23,7 +23,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { AxiosResponse } from "axios";
 import query from "@/graphql/fetch";
-import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
+import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
 import { ElMessage } from "element-plus";
 
 interface MetricVal {

src/styles/lib.scss

@@ -173,7 +173,7 @@
 }
 
 .scroll_bar_style::-webkit-scrollbar {
-  width: 9px;
+  width: 4px;
   height: 4px;
   background-color: #eee;
 }

src/styles/reset.scss

@@ -153,6 +153,10 @@ pre {
   margin-left: 5px;
 }
 
+.el-switch__label * {
+  font-size: 12px;
+}
+
 .el-drawer__header {
   margin-bottom: 0;
 }

src/types/dashboard.d.ts

@@ -95,6 +95,7 @@ export type GraphConfig =
 export interface BarConfig {
   type?: string;
   showBackground?: boolean;
+  legend?: LegendOptions;
 }
 export interface LineConfig extends AreaConfig {
   type?: string;
@@ -110,6 +111,7 @@ export interface LineConfig extends AreaConfig {
 export interface AreaConfig {
   type?: string;
   opacity?: number;
+  legend?: LegendOptions;
 }
 
 export interface CardConfig {
@@ -180,3 +182,13 @@ export type EventParams = {
   value: number | number[];
   color: string;
 };
+export type LegendOptions = {
+  show: boolean;
+  total: boolean;
+  min: boolean;
+  max: boolean;
+  mean: boolean;
+  asTable: boolean;
+  toTheRight: boolean;
+  width: number;
+};

src/views/dashboard/configuration/Widget.vue

@@ -32,6 +32,7 @@ limitations under the License. -->
           :data="states.source"
           :config="{
             ...graph,
+            legend: (dashboardStore.selectedGrid.graph || {}).legend,
             i: dashboardStore.selectedGrid.i,
             metrics: dashboardStore.selectedGrid.metrics,
             metricTypes: dashboardStore.selectedGrid.metricTypes,

src/views/dashboard/configuration/widget/graph-styles/Area.vue

@@ -13,6 +13,7 @@ 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>
+  <Legend />
   <div>
     <span class="label">{{ t("areaOpacity") }}</span>
     <el-slider
@@ -31,6 +32,7 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import Legend from "./components/Legend.vue";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();

src/views/dashboard/configuration/widget/graph-styles/Bar.vue

@@ -13,6 +13,7 @@ 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>
+  <Legend />
   <div>
     <span class="label">{{ t("showBackground") }}</span>
     <el-switch
@@ -27,6 +28,7 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useI18n } from "vue-i18n";
+import Legend from "./components/Legend.vue";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();

src/views/dashboard/configuration/widget/graph-styles/Line.vue

@@ -13,6 +13,7 @@ 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>
+  <Legend />
   <div>
     <span class="label">{{ t("showXAxis") }}</span>
     <el-switch
@@ -63,6 +64,7 @@ limitations under the License. -->
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import Legend from "./components/Legend.vue";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
@@ -82,8 +84,8 @@ function updateConfig(param: { [key: string]: unknown }) {
 <style lang="scss" scoped>
 .label {
   font-size: 13px;
-  font-weight: 500;
   display: block;
-  margin-bottom: 5px;
+  margin-top: 5px;
+  margin-bottom: -5px;
 }
 </style>

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

@@ -0,0 +1,138 @@
+<!-- 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>
+  <div>
+    <span class="label mr-5">{{ t("showLegend") }}</span>
+    <el-switch
+      v-model="legend.show"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ show: legend.show })"
+    />
+  </div>
+  <div>
+    <span class="label">{{ t("asTable") }}</span>
+    <el-switch
+      v-model="legend.asTable"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ asTable: legend.asTable })"
+    />
+  </div>
+  <div v-show="legend.asTable">
+    <span class="label">{{ t("legendOptions") }}</span>
+    <span class="title mr-5">{{ t("toTheRight") }}</span>
+    <el-switch
+      v-model="legend.toTheRight"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ toTheRight: legend.toTheRight })"
+    />
+    <span class="title ml-20 mr-5">{{ t("width") }}</span>
+    <el-input
+      v-model="legend.width"
+      class="inputs"
+      size="small"
+      placeholder="Please input the width"
+      @change="updateLegendConfig({ width: legend.width })"
+    />
+  </div>
+  <div v-show="legend.asTable">
+    <span class="label">{{ t("legendValues") }}</span>
+    <span class="title mr-5">{{ t("min") }}</span>
+    <el-switch
+      v-model="legend.min"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ min: legend.min })"
+    />
+    <span class="title ml-20 mr-5">{{ t("max") }}</span>
+    <el-switch
+      v-model="legend.max"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ max: legend.max })"
+    />
+    <span class="title ml-20 mr-5">{{ t("mean") }}</span>
+    <el-switch
+      v-model="legend.mean"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ mean: legend.mean })"
+    />
+    <span class="title ml-20 mr-5">{{ t("total") }}</span>
+    <el-switch
+      v-model="legend.total"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ total: legend.total })"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { LegendOptions } from "@/types/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+const legend = reactive<LegendOptions>({
+  show: true,
+  total: false,
+  min: false,
+  max: false,
+  mean: false,
+  asTable: false,
+  toTheRight: false,
+  width: 130,
+  ...graph.value.legend,
+});
+
+function updateLegendConfig(param: { [key: string]: unknown }) {
+  const g = {
+    ...dashboardStore.selectedGrid.graph,
+    legend: {
+      ...dashboardStore.selectedGrid.graph.legend,
+      ...param,
+    },
+  };
+  dashboardStore.selectWidget({
+    ...dashboardStore.selectedGrid,
+    graph: g,
+  });
+}
+</script>
+<style lang="scss" scoped>
+.label {
+  font-size: 13px;
+  display: block;
+  margin-top: 5px;
+  margin-bottom: -5px;
+}
+
+.title {
+  font-size: 12px;
+  display: inline-flex;
+  height: 32px;
+  line-height: 34px;
+  vertical-align: middle;
+}
+
+.inputs {
+  width: 120px;
+}
+</style>

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -113,7 +113,7 @@ import {
   useQueryProcessor,
   useSourceProcessor,
   useGetMetricEntity,
-} from "@/hooks/useProcessor";
+} from "@/hooks/useMetricsProcessor";
 import { useI18n } from "vue-i18n";
 import { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
 import Standard from "./Standard.vue";

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -122,7 +122,7 @@ const hasLabel = computed(() => {
   const graph = dashboardStore.selectedGrid.graph || {};
   return (
     ListChartTypes.includes(graph.type) ||
-    metricType.value === "readLabeledMetricsValues"
+    ["readLabeledMetricsValues", "readMetricsValues"].includes(metricType.value)
   );
 });
 const isTopn = computed(() =>

src/views/dashboard/controls/Widget.vue

@@ -86,7 +86,7 @@ import {
   useQueryProcessor,
   useSourceProcessor,
   useGetMetricEntity,
-} from "@/hooks/useProcessor";
+} from "@/hooks/useMetricsProcessor";
 import { EntityType, ListChartTypes } from "../data";
 import { EventParams } from "@/types/dashboard";
 import getDashboard from "@/hooks/useDashboardsSession";

src/views/dashboard/graphs/Area.vue

@@ -44,7 +44,8 @@ defineProps({
       AreaConfig & {
         filters: Filters;
         relatedTrace: RelatedTrace;
-      } & { id: string }
+        id: string;
+      }
     >,
     default: () => ({}),
   },

src/views/dashboard/graphs/Bar.vue

@@ -13,7 +13,10 @@ 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>
-  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+  <div class="graph" :class="isRight ? 'flex-h' : 'flex-v'">
+    <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+    <Legend :config="config.legend" :data="data" :intervalTime="intervalTime" />
+  </div>
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
@@ -24,6 +27,7 @@ import {
   RelatedTrace,
   Filters,
 } from "@/types/dashboard";
+import useLegendProcess from "@/hooks/useLegendProcessor";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -39,11 +43,15 @@ const props = defineProps({
       BarConfig & {
         filters: Filters;
         relatedTrace: RelatedTrace;
-      } & { id: string }
+        id: string;
+      }
     >,
     default: () => ({}),
   },
 });
+const { showEchartsLegend, isRight, chartColors } = useLegendProcess(
+  props.config.legend
+);
 const option = computed(() => getOption());
 
 function getOption() {
@@ -73,35 +81,7 @@ function getOption() {
       },
     };
   });
-  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;
-  }
+  const color: string[] = chartColors(keys);
   return {
     color,
     tooltip: {
@@ -114,7 +94,7 @@ function getOption() {
     },
     legend: {
       type: "scroll",
-      show: keys.length === 1 ? false : true,
+      show: showEchartsLegend(keys),
       icon: "circle",
       top: 0,
       left: 0,
@@ -160,3 +140,9 @@ function clickEvent(params: EventParams) {
   emits("click", params);
 }
 </script>
+<style lang="scss" scoped>
+.graph {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/dashboard/graphs/EndpointList.vue

@@ -66,7 +66,10 @@ import type { PropType } from "vue";
 import { EndpointListConfig } from "@/types/dashboard";
 import { Endpoint } from "@/types/selector";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import {
+  useQueryPodsMetrics,
+  usePodsSource,
+} from "@/hooks/useMetricsProcessor";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";

src/views/dashboard/graphs/InstanceList.vue

@@ -95,7 +95,10 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { InstanceListConfig } from "@/types/dashboard";
 import { Instance } from "@/types/selector";
-import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import {
+  useQueryPodsMetrics,
+  usePodsSource,
+} from "@/hooks/useMetricsProcessor";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";

src/views/dashboard/graphs/Line.vue

@@ -13,15 +13,18 @@ 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>
-  <Graph
-    :option="option"
-    @select="clickEvent"
-    :filters="config.filters"
-    :relatedTrace="config.relatedTrace"
-  />
+  <div class="graph flex-v" :class="setRight ? 'flex-h' : 'flex-v'">
+    <Graph
+      :option="option"
+      @select="clickEvent"
+      :filters="config.filters"
+      :relatedTrace="config.relatedTrace"
+    />
+    <Legend :config="config.legend" :data="data" :intervalTime="intervalTime" />
+  </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import type { PropType } from "vue";
 import {
   LineConfig,
@@ -29,6 +32,8 @@ import {
   RelatedTrace,
   Filters,
 } from "@/types/dashboard";
+import Legend from "./components/Legend.vue";
+import useLegendProcess from "@/hooks/useLegendProcessor";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -44,7 +49,8 @@ const props = defineProps({
       LineConfig & {
         filters?: Filters;
         relatedTrace?: RelatedTrace;
-      } & { id?: string }
+        id?: string;
+      }
     >,
     default: () => ({
       step: false,
@@ -58,8 +64,13 @@ const props = defineProps({
     }),
   },
 });
+const setRight = ref<boolean>(false);
 const option = computed(() => getOption());
 function getOption() {
+  const { showEchartsLegend, isRight, chartColors } = useLegendProcess(
+    props.config.legend
+  );
+  setRight.value = isRight;
   const keys = Object.keys(props.data || {}).filter(
     (i: any) => Array.isArray(props.data[i]) && props.data[i].length
   );
@@ -88,35 +99,7 @@ function getOption() {
     }
     return serie;
   });
-  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;
-  }
+  const color: string[] = chartColors(keys);
   const tooltip = {
     trigger: "none",
     axisPointer: {
@@ -151,7 +134,7 @@ function getOption() {
     tooltip: props.config.smallTips ? tips : tooltip,
     legend: {
       type: "scroll",
-      show: keys.length === 1 ? false : true,
+      show: showEchartsLegend(keys),
       icon: "circle",
       top: 0,
       left: 0,
@@ -167,7 +150,7 @@ function getOption() {
       },
     },
     grid: {
-      top: keys.length === 1 ? 15 : 55,
+      top: showEchartsLegend(keys) ? 35 : 10,
       left: 0,
       right: 10,
       bottom: 5,
@@ -205,3 +188,9 @@ function clickEvent(params: EventParams) {
   emits("click", params);
 }
 </script>
+<style lang="scss" scoped>
+.graph {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/dashboard/graphs/ServiceList.vue

@@ -93,7 +93,10 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { Service } from "@/types/selector";
-import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import {
+  useQueryPodsMetrics,
+  usePodsSource,
+} from "@/hooks/useMetricsProcessor";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";

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

@@ -0,0 +1,175 @@
+<!-- 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>
+  <div
+    v-if="tableData.length && config.asTable"
+    role="region"
+    aria-labelledby="caption"
+    tabindex="0"
+    :style="`width: ${width}; maxHeight:${isRight ? '100%' : 130}`"
+    class="scroll_bar_style"
+  >
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th v-for="h in headerRow" :key="h.value">
+            {{ h.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <th>
+            <el-popover placement="bottom" :width="230" trigger="click">
+              <template #reference>
+                <div class="name">
+                  <Icon iconName="circle" :style="`color: ${colors[index]};`" />
+                  <i>{{ item.name }}</i>
+                </div>
+              </template>
+              <div class="list">
+                <div class="value">
+                  <span>{{ t("key") }}</span>
+                  <span>{{ t("value") }}</span>
+                </div>
+                <div class="value" v-for="(d, index) in item.topN" :key="index">
+                  <span>{{ d.key }}</span>
+                  <span>{{ d.value }}</span>
+                </div>
+              </div>
+            </el-popover>
+          </th>
+          <td v-for="h in headerRow" :key="h.value">
+            {{ item[h.value] }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { LegendOptions } from "@/types/dashboard";
+import useLegendProcess from "@/hooks/useLegendProcessor";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<{ [key: string]: number[] }>,
+    default: () => ({}),
+  },
+  config: {
+    type: Object as PropType<LegendOptions>,
+    default: () => ({}),
+  },
+  intervalTime: { type: Array as PropType<string[]>, default: () => [] },
+});
+const { t } = useI18n();
+const tableData: any = computed(() => {
+  const { aggregations } = useLegendProcess(props.config);
+  return aggregations(props.data, props.intervalTime).source;
+});
+const headerRow = computed(() => {
+  const { aggregations } = useLegendProcess(props.config);
+  return aggregations(props.data, props.intervalTime).headers;
+});
+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);
+});
+</script>
+<style lang="scss" scoped>
+table {
+  font-size: 12px;
+  white-space: nowrap;
+  margin: 0;
+  border: none;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+table th {
+  padding: 5px;
+}
+
+table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  width: 25vw;
+  background: #fff;
+}
+
+.name {
+  cursor: pointer;
+}
+
+table td {
+  padding: 5px;
+  text-align: center;
+}
+
+table thead th:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+table tbody th {
+  font-weight: bold;
+  font-style: italic;
+  text-align: left;
+  background: #fff;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
+[role="region"][aria-labelledby][tabindex] {
+  overflow: auto;
+}
+
+i {
+  font-style: normal;
+}
+
+.value {
+  span {
+    display: inline-block;
+    padding: 5px;
+    width: 80px;
+  }
+}
+
+.list {
+  height: 360px;
+  overflow: auto;
+}
+</style>

src/views/dashboard/related/topology/components/Graph.vue

@@ -111,9 +111,9 @@ import { Service } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
-import { aggregation } from "@/hooks/useProcessor";
+import { aggregation } from "@/hooks/useMetricsProcessor";
 import icons from "@/assets/img/icons";
-import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
+import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
 
 /*global Nullable, defineProps */
 const props = defineProps({

src/views/dashboard/related/topology/components/Sankey.vue

@@ -21,7 +21,7 @@ import { computed, PropType } from "vue";
 import { useTopologyStore } from "@/store/modules/topology";
 import { Node, Call } from "@/types/topology";
 import { MetricConfigOpt } from "@/types/dashboard";
-import { aggregation } from "@/hooks/useProcessor";
+import { aggregation } from "@/hooks/useMetricsProcessor";
 
 /*global defineEmits, defineProps */
 const props = defineProps({

src/views/dashboard/related/topology/components/Settings.vue

@@ -248,7 +248,7 @@ import { useTopologyStore } from "@/store/modules/topology";
 import { ElMessage } from "element-plus";
 import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
 import { Option } from "@/types/app";
-import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
+import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
 import { Node } from "@/types/topology";
 import { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
 import { EntityType, LegendOpt, MetricsType } from "../../../data";