update charts

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] };

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 keys = Object.keys(props.data || {}).filter(
-    const series = keys.map((i: any) => {
+      (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
-      const serie: any = {
+    );
-        data: props.data[i].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
+    const series = [];
-        name: i,
+    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: {
+      grid,
-        top: 35,
+      xAxis,
-        left: 0,
+      yAxis,
-        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,
-        },
-      },
       series,
     };
   }

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 appStore = useAppStoreWithOut();
+  const result = computed(() => {
     const { processResults } = useSnapshot(props.snapshot.metrics);
-  const data = processResults();
+    return processResults().reduce((acc, obj) => ({ ...acc, ...obj }), {});
+  });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .snapshot {
+    width: 800px;
+    height: 600px;
+  }
+</style>