From ef73ace6ce0f0fade287b5e1fd418605e3312c5e Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 10 Jan 2025 16:03:36 +0800
Subject: [PATCH] update line chart

---
 src/hooks/data.ts                    | 166 +++++++++++++++++++++++++++
 src/hooks/useExpressionsProcessor.ts |   2 +-
 src/hooks/useSnapshot.ts             |   4 +-
 src/views/alarm/components/Line.vue  |  10 +-
 4 files changed, 177 insertions(+), 5 deletions(-)

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index f797fba6..c542390a 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -114,3 +114,169 @@ export const LightChartColors = [
 ];
 
 export const MaxQueryLength = 120;
+
+export const TestJson = {
+  snapshot: {
+    expression: "sum(service_resp_time > 20) >= 1",
+    metrics: [
+      {
+        name: "service_resp_time",
+        results: [
+          {
+            metric: {
+              labels: [{ key: "name", value: "1" }],
+            },
+            values: [
+              {
+                id: "202501090857",
+                owner: null,
+                value: "30",
+                traceID: null,
+              },
+              {
+                id: "202501090858",
+                owner: null,
+                value: "29",
+                traceID: null,
+              },
+              {
+                id: "202501090859",
+                owner: null,
+                value: "29",
+                traceID: null,
+              },
+              {
+                id: "202501090900",
+                owner: null,
+                value: "155",
+                traceID: null,
+              },
+              {
+                id: "202501090901",
+                owner: null,
+                value: "35",
+                traceID: null,
+              },
+            ],
+          },
+          {
+            metric: {
+              labels: [{ key: "name", value: "2" }],
+            },
+            values: [
+              {
+                id: "202501090857",
+                owner: null,
+                value: "20",
+                traceID: null,
+              },
+              {
+                id: "202501090858",
+                owner: null,
+                value: "19",
+                traceID: null,
+              },
+              {
+                id: "202501090859",
+                owner: null,
+                value: "39",
+                traceID: null,
+              },
+              {
+                id: "202501090900",
+                owner: null,
+                value: "135",
+                traceID: null,
+              },
+              {
+                id: "202501090901",
+                owner: null,
+                value: "55",
+                traceID: null,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: "service_cpm",
+        results: [
+          {
+            metric: {
+              labels: [{ key: "name", value: "service_cpm1" }],
+            },
+            values: [
+              {
+                id: "202501090857",
+                owner: null,
+                value: "30",
+                traceID: null,
+              },
+              {
+                id: "202501090858",
+                owner: null,
+                value: "29",
+                traceID: null,
+              },
+              {
+                id: "202501090859",
+                owner: null,
+                value: "29",
+                traceID: null,
+              },
+              {
+                id: "202501090900",
+                owner: null,
+                value: "155",
+                traceID: null,
+              },
+              {
+                id: "202501090901",
+                owner: null,
+                value: "35",
+                traceID: null,
+              },
+            ],
+          },
+          {
+            metric: {
+              labels: [{ key: "name", value: "service_cpm2" }],
+            },
+            values: [
+              {
+                id: "202501090857",
+                owner: null,
+                value: "20",
+                traceID: null,
+              },
+              {
+                id: "202501090858",
+                owner: null,
+                value: "19",
+                traceID: null,
+              },
+              {
+                id: "202501090859",
+                owner: null,
+                value: "39",
+                traceID: null,
+              },
+              {
+                id: "202501090900",
+                owner: null,
+                value: "135",
+                traceID: null,
+              },
+              {
+                id: "202501090901",
+                owner: null,
+                value: "55",
+                traceID: null,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 8c6a4d17..ecd74cfc 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -141,7 +141,7 @@ export async function useDashboardQueryProcessor(configList: Indexable[]) {
         }
       }
     }
-    console.log(source);
+
     return { source, tips, typesOfMQE };
   }
   async function fetchMetrics(configArr: any) {
diff --git a/src/hooks/useSnapshot.ts b/src/hooks/useSnapshot.ts
index 3afb795c..29722e74 100644
--- a/src/hooks/useSnapshot.ts
+++ b/src/hooks/useSnapshot.ts
@@ -15,8 +15,10 @@
  * limitations under the License.
  */
 import type { MetricsResults } from "@/types/dashboard";
+import { TestJson } from "./data";
 
-export function useSnapshot(metrics: { name: string; results: MetricsResults[] }[]) {
+export function useSnapshot(params: { name: string; results: MetricsResults[] }[]) {
+  const { metrics } = TestJson.snapshot as any;
   function processResults() {
     const sources = metrics.map((metric: { name: string; results: MetricsResults[] }) => {
       const values = metric.results.map(
diff --git a/src/views/alarm/components/Line.vue b/src/views/alarm/components/Line.vue
index a5463582..ca4c297f 100644
--- a/src/views/alarm/components/Line.vue
+++ b/src/views/alarm/components/Line.vue
@@ -43,13 +43,14 @@ limitations under the License. -->
     const grid = [];
     const xAxis = [];
     const yAxis = [];
-    for (const metric of props.data) {
+    for (const [index, metric] of props.data.entries()) {
       grid.push({
-        top: 35,
+        top: index ? (600 / props.data.length) * index + 30 : 40,
         left: 0,
         right: 10,
         bottom: 5,
         containLabel: true,
+        height: 600 / props.data.length - 30,
       });
       xAxis.push({
         type: "category",
@@ -61,9 +62,9 @@ limitations under the License. -->
         splitLine: { show: false },
         axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
         axisLabel: { color: "#9da5b2", fontSize: "11" },
+        gridIndex: index,
       });
       yAxis.push({
-        show: true,
         type: "value",
         axisLine: { show: false },
         axisTick: { show: false },
@@ -73,6 +74,7 @@ limitations under the License. -->
           fontSize: "11",
           show: true,
         },
+        gridIndex: index,
       });
       for (const item of metric.values) {
         series.push({
@@ -81,6 +83,8 @@ limitations under the License. -->
           type: "line",
           symbol: "circle",
           symbolSize: 4,
+          xAxisIndex: index,
+          yAxisIndex: index,
           lineStyle: {
             width: 2,
             type: "solid",