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

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";