feat: Implement an association between widgets(line, bar, area graphs) with time (#115)

2025-10-15 12:49:17 +00:00 · 2022-07-08 16:17:17 +08:00
parent 3ff3d5d1cd
commit 7fbd6170de
26 changed files with 452 additions and 120 deletions
--- a/src/views/dashboard/graphs/Area.vue
+++ b/src/views/dashboard/graphs/Area.vue
@@ -14,14 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License. -->

 <template>
-  <Line :data="data" :intervalTime="intervalTime" :config="config" />
+  <Line
+    :data="data"
+    :intervalTime="intervalTime"
+    :config="config"
+    @click="clickEvent"
+  />
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import Line from "./Line.vue";
-import { AreaConfig } from "@/types/dashboard";
+import { AreaConfig, EventParams } from "@/types/dashboard";

-/*global defineProps */
+/*global defineProps, defineEmits */
+const emits = defineEmits(["click"]);
 defineProps({
  data: {
    type: Object as PropType<{ [key: string]: number[] }>,
@@ -29,8 +35,19 @@ defineProps({
  },
  intervalTime: { type: Array as PropType<string[]>, default: () => [] },
  config: {
-    type: Object as PropType<AreaConfig>,
+    type: Object as PropType<
+      AreaConfig & {
+        filters: {
+          value: number | string;
+          dataIndex: number;
+          sourceId: string;
+        };
+      } & { id: string }
+    >,
    default: () => ({}),
  },
 });
+function clickEvent(params: EventParams) {
+  emits("click", params);
+}
 </script>
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -13,15 +13,16 @@ 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" />
+  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
-import { BarConfig } from "@/types/dashboard";
+import { BarConfig, EventParams } from "@/types/dashboard";

-/*global defineProps */
+/*global defineProps, defineEmits */
+const emits = defineEmits(["click"]);
 const props = defineProps({
  data: {
    type: Object as PropType<{ [key: string]: number[] }>,
@@ -31,7 +32,15 @@ const props = defineProps({
  theme: { type: String, default: "light" },
  itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
  config: {
-    type: Object as PropType<BarConfig>,
+    type: Object as PropType<
+      BarConfig & {
+        filters: {
+          value: number | string;
+          dataIndex: number;
+          sourceId: string;
+        };
+      } & { id: string }
+    >,
    default: () => ({}),
  },
 });
@@ -139,11 +148,10 @@ function getOption() {
      trigger: "axis",
      zlevel: 1000,
      z: 60,
-      backgroundColor: "rgb(50,50,50)",
      confine: true,
      textStyle: {
        fontSize: 13,
-        color: "#ccc",
+        color: "#333",
      },
      enterable: true,
      extraCssText: "max-height: 300px; overflow: auto; border: none",
@@ -186,4 +194,7 @@ function getOption() {
    series: temp,
  };
 }
+function clickEvent(params: EventParams) {
+  emits("click", params);
+}
 </script>
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -147,17 +147,17 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
  endpoints.value = currentPods;
 }
 function clickEndpoint(scope: any) {
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
    name: props.config.dashboardName,
    layer: dashboardStore.layerId,
    entity: EntityType[2].value,
  });
-  if (!d) {
+  if (!dashboard) {
    ElMessage.error("No this dashboard");
    return;
  }
  router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
+    `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${scope.row.id}/${dashboard.name}`
  );
 }
 async function searchList() {
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -180,19 +180,19 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
 }

 function clickInstance(scope: any) {
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
    name: props.config.dashboardName,
    layer: dashboardStore.layerId,
    entity: EntityType[3].value,
  });
-  if (!d) {
+  if (!dashboard) {
    ElMessage.error("No this dashboard");
    return;
  }
  router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
-      scope.row.id
-    }/${d.name.split(" ").join("-")}`
+    `/dashboard/${dashboard.layer}/${dashboard.entity}/${
+      selectorStore.currentService.id
+    }/${scope.row.id}/${dashboard.name.split(" ").join("-")}`
  );
 }

--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -13,15 +13,16 @@ 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" />
+  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
-import { LineConfig } from "@/types/dashboard";
+import { LineConfig, EventParams } from "@/types/dashboard";

-/*global defineProps */
+/*global defineProps, defineEmits */
+const emits = defineEmits(["click"]);
 const props = defineProps({
  data: {
    type: Object as PropType<{ [key: string]: number[] }>,
@@ -31,7 +32,15 @@ const props = defineProps({
  theme: { type: String, default: "light" },
  itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
  config: {
-    type: Object as PropType<LineConfig>,
+    type: Object as PropType<
+      LineConfig & {
+        filters: {
+          value: number | string;
+          dataIndex: number;
+          sourceId: string;
+        };
+      } & { id: string }
+    >,
    default: () => ({
      step: false,
      smooth: false,
@@ -81,7 +90,7 @@ function getOption() {
      name: i,
      type: "line",
      symbol: "circle",
-      symbolSize: 6,
+      symbolSize: 8,
      showSymbol: props.config.showSymbol,
      step: props.config.step,
      smooth: props.config.smooth,
@@ -145,10 +154,9 @@ function getOption() {
  }
  const tooltip = {
    trigger: "axis",
-    backgroundColor: "rgb(50,50,50)",
    textStyle: {
      fontSize: 12,
-      color: "#ccc",
+      color: "#333",
    },
    enterable: true,
    confine: true,
@@ -215,4 +223,8 @@ function getOption() {
    series: temp,
  };
 }
+
+function clickEvent(params: EventParams) {
+  emits("click", params);
+}
 </script>
--- a/src/views/dashboard/graphs/Pie.vue
+++ b/src/views/dashboard/graphs/Pie.vue
@@ -1,66 +0,0 @@
-<!-- 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>
-  <Graph :option="option" />
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import type { PropType } from "vue";
-
-/*global defineProps */
-const props = defineProps({
-  data: {
-    type: Array as PropType<{ name: string; value: number }[]>,
-    default: () => [],
-  },
-  config: {
-    type: Object as PropType<{ sortOrder: string }>,
-    default: () => ({}),
-  },
-});
-const option = computed(() => getOption());
-function getOption() {
-  return {
-    tooltip: {
-      trigger: "item",
-    },
-    legend: {
-      type: "scroll",
-      show: props.data.length === 1 ? false : true,
-      icon: "circle",
-      top: 0,
-      left: 0,
-      itemWidth: 12,
-      textStyle: {
-        color: "#333",
-      },
-    },
-    series: [
-      {
-        type: "pie",
-        radius: "50%",
-        data: props.data,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: "rgba(0, 0, 0, 0.5)",
-          },
-        },
-      },
-    ],
-  };
-}
-</script>
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -179,16 +179,16 @@ function setServices(arr: (Service & { merge: boolean })[]) {
 }

 function clickService(scope: any) {
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
    name: props.config.dashboardName,
    layer: dashboardStore.layerId,
    entity: EntityType[0].value,
  });
-  if (!d) {
+  if (!dashboard) {
    ElMessage.error("No this dashboard");
    return;
  }
-  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
+  const path = `/dashboard/${dashboard.layer}/${dashboard.entity}/${scope.row.id}/${dashboard.name}`;

  router.push(path);
 }
--- a/src/views/dashboard/graphs/index.ts
+++ b/src/views/dashboard/graphs/index.ts
@@ -21,7 +21,6 @@ import Bar from "./Bar.vue";
 import HeatMap from "./HeatMap.vue";
 import TopList from "./TopList.vue";
 import Table from "./Table.vue";
-import Pie from "./Pie.vue";
 import Card from "./Card.vue";
 import InstanceList from "./InstanceList.vue";
 import EndpointList from "./EndpointList.vue";
@@ -34,7 +33,6 @@ export default {
  TopList,
  Area,
  Table,
-  Pie,
  Card,
  EndpointList,
  InstanceList,