From 926678e311b9a251d05fe2dfc41297f1e63b95f9 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 6 Jan 2025 17:46:57 +0800
Subject: [PATCH] update charts

---
 src/hooks/useSnapshot.ts                |  2 +-
 src/views/alarm/components/Line.vue     | 91 ++++++++++++++-----------
 src/views/alarm/components/Snapshot.vue | 22 ++++--
 3 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/src/hooks/useSnapshot.ts b/src/hooks/useSnapshot.ts
index bad07748..1ed0f464 100644
--- a/src/hooks/useSnapshot.ts
+++ b/src/hooks/useSnapshot.ts
@@ -19,7 +19,7 @@ export function useSnapshot(metrics: { name: string; results: any[] }[]) {
   function processResults() {
     const sources = metrics.map((metric: { name: string; results: any[] }) => {
       const values = metric.results.map((r: { values: { value: string }[] }) =>
-        r.values.map((v: { value: string }) => v.value),
+        r.values.map((v: { value: string }) => Number(v.value)),
       );
 
       return { [metric.name]: values[0] };
diff --git a/src/views/alarm/components/Line.vue b/src/views/alarm/components/Line.vue
index b08a81ca..7ebebbff 100644
--- a/src/views/alarm/components/Line.vue
+++ b/src/views/alarm/components/Line.vue
@@ -37,11 +37,17 @@ limitations under the License. -->
   const appStore = useAppStoreWithOut();
   const option = computed(() => getOption());
   function getOption() {
-    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
-    const series = keys.map((i: any) => {
-      const serie: any = {
-        data: props.data[i].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
-        name: i,
+    const keys = Object.keys(props.data || {}).filter(
+      (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
+    );
+    const series = [];
+    const grid = [];
+    const xAxis = [];
+    const yAxis = [];
+    for (const key of keys) {
+      series.push({
+        data: props.data[key].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
+        name: key,
         type: "line",
         symbol: "circle",
         symbolSize: 4,
@@ -49,9 +55,38 @@ limitations under the License. -->
           width: 2,
           type: "solid",
         },
-      };
-      return serie;
-    });
+      });
+      grid.push({
+        top: 35,
+        left: 0,
+        right: 10,
+        bottom: 5,
+        containLabel: true,
+      });
+      xAxis.push({
+        type: "category",
+        show: true,
+        axisTick: {
+          lineStyle: { color: "#c1c5ca41" },
+          alignWithLabel: true,
+        },
+        splitLine: { show: false },
+        axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
+        axisLabel: { color: "#9da5b2", fontSize: "11" },
+      });
+      yAxis.push({
+        show: true,
+        type: "value",
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
+        axisLabel: {
+          color: "#9da5b2",
+          fontSize: "11",
+          show: true,
+        },
+      });
+    }
     const { chartColors } = useLegendProcess();
     const color: string[] = chartColors();
     const tooltip = {
@@ -65,14 +100,19 @@ limitations under the License. -->
       enterable: true,
       confine: true,
       extraCssText: "max-height:85%; overflow: auto;",
+      axisPointer: {
+        animation: false,
+      },
     };
 
     return {
       color,
       tooltip,
+      axisPointer: {
+        link: { xAxisIndex: "all" },
+      },
       legend: {
         type: "scroll",
-        show: true,
         icon: "circle",
         top: 0,
         left: 0,
@@ -81,36 +121,9 @@ limitations under the License. -->
           color: appStore.theme === Themes.Dark ? "#fff" : "#333",
         },
       },
-      grid: {
-        top: 35,
-        left: 0,
-        right: 10,
-        bottom: 5,
-        containLabel: true,
-      },
-      xAxis: {
-        type: "category",
-        show: true,
-        axisTick: {
-          lineStyle: { color: "#c1c5ca41" },
-          alignWithLabel: true,
-        },
-        splitLine: { show: false },
-        axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
-        axisLabel: { color: "#9da5b2", fontSize: "11" },
-      },
-      yAxis: {
-        show: true,
-        type: "value",
-        axisLine: { show: false },
-        axisTick: { show: false },
-        splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
-        axisLabel: {
-          color: "#9da5b2",
-          fontSize: "11",
-          show: true,
-        },
-      },
+      grid,
+      xAxis,
+      yAxis,
       series,
     };
   }
diff --git a/src/views/alarm/components/Snapshot.vue b/src/views/alarm/components/Snapshot.vue
index f33a6351..6be4d83d 100644
--- a/src/views/alarm/components/Snapshot.vue
+++ b/src/views/alarm/components/Snapshot.vue
@@ -13,17 +13,29 @@ 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 class="snapshot flex-v"> Line Charts </div>
+  <div class="snapshot flex-v">
+    <LineChart :intervalTime="appStore.intervalTime" :data="result" />
+  </div>
 </template>
 <script lang="ts" setup>
+  import { computed } from "vue";
   import { useSnapshot } from "@/hooks/useSnapshot";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import LineChart from "./Line.vue";
 
   /*global defineProps */
   const props = defineProps({
     snapshot: { type: Object, default: () => {} },
   });
-
-  const { processResults } = useSnapshot(props.snapshot.metrics);
-  const data = processResults();
+  const appStore = useAppStoreWithOut();
+  const result = computed(() => {
+    const { processResults } = useSnapshot(props.snapshot.metrics);
+    return processResults().reduce((acc, obj) => ({ ...acc, ...obj }), {});
+  });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .snapshot {
+    width: 800px;
+    height: 600px;
+  }
+</style>