update line

src/hooks/useListConfig.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+import { MetricQueryTypes, Calculations } from "./data";
+export function useListConfig(config: any, index: number) {
+  const calculation =
+    config.metricConfig &&
+    config.metricConfig[index] &&
+    config.metricConfig[index].calculation;
+  const line =
+    config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
+    calculation !== Calculations.Average;
+
+  return { isLinear: line };
+}

src/hooks/useProcessor.ts

@@ -318,16 +318,21 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
   return { queryStr, conditions };
 }
 function calculateExp(
-  arr: number[],
+  arr: any[],
   config: { calculation: string }
 ): (number | string)[] {
-  let data: (number | string)[] = arr;
+  let data: (number | string)[] = [];
   switch (config.calculation) {
     case Calculations.Average:
-      data = [arr.reduce((a, b) => a + b) / arr.length];
+      data = [
+        (
+          arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b) /
+          arr.length
+        ).toFixed(2),
+      ];
       break;
     default:
-      data = arr.map((d) => aggregation(d, config));
+      data = arr.map((d) => aggregation(d.value, config));
       break;
   }
   return data;
@@ -341,19 +346,19 @@ function aggregation(
 
   switch (config.calculation) {
     case Calculations.Percentage:
-      data = val / 100;
+      data = (val / 100).toFixed(2);
       break;
     case Calculations.ByteToKB:
-      data = val / 1024;
+      data = (val / 1024).toFixed(2);
       break;
     case Calculations.ByteToMB:
-      data = val / 1024 / 1024;
+      data = (val / 1024 / 1024).toFixed(2);
       break;
     case Calculations.ByteToGB:
-      data = val / 1024 / 1024 / 1024;
+      data = (val / 1024 / 1024 / 1024).toFixed(2);
       break;
     case Calculations.Apdex:
-      data = val / 10000;
+      data = (val / 10000).toFixed(2);
       break;
     case Calculations.ConvertSeconds:
       data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
@@ -365,7 +370,7 @@ function aggregation(
       data = data.toFixed(2);
       break;
     case Calculations.MsTos:
-      data = val / 1000;
+      data = (val / 1000).toFixed(2);
       break;
     default:
       data;

src/views/dashboard/graphs/Card.vue

@@ -52,6 +52,7 @@ const { t } = useI18n();
 const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => Number(props.data[key.value]));
+console.log(props.data);
 const unit = computed(
   () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
 );

src/views/dashboard/graphs/EndpointList.vue

@@ -52,7 +52,7 @@ limitations under the License. -->
           <template #default="scope">
             <div class="chart">
               <Line
-                v-if="config.metricTypes[index] === 'readMetricsValues'"
+                v-if="useListConfig(config, index).isLinear"
                 :data="{ [metric]: scope.row[metric] }"
                 :intervalTime="intervalTime"
                 :config="{
@@ -83,6 +83,7 @@ import { EndpointListConfig } from "@/types/dashboard";
 import { Endpoint } from "@/types/selector";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import { useListConfig } from "@/hooks/useListConfig";
 import Line from "./Line.vue";
 import Card from "./Card.vue";
 import { EntityType } from "../data";

src/views/dashboard/graphs/InstanceList.vue

@@ -53,7 +53,7 @@ limitations under the License. -->
           <template #default="scope">
             <div class="chart">
               <Line
-                v-if="config.metricTypes[index] === 'readMetricsValues'"
+                v-if="useListConfig(config, index).isLinear"
                 :data="metric ? { [metric]: scope.row[metric] } : {}"
                 :intervalTime="intervalTime"
                 :config="{
@@ -121,6 +121,7 @@ import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
+import { useListConfig } from "@/hooks/useListConfig";
 
 /*global defineProps */
 const props = defineProps({

src/views/dashboard/graphs/Line.vue

@@ -40,6 +40,7 @@ const props = defineProps({
       showXAxis: true,
       showYAxis: true,
       smallTips: false,
+      showlabels: true,
     }),
   },
 });
@@ -185,7 +186,8 @@ function getOption() {
       left: 0,
       right: 10,
       bottom: 5,
-      containLabel: true,
+      containLabel:
+        props.config.showlabels === undefined ? true : props.config.showlabels,
     },
     xAxis: {
       type: "category",
@@ -199,6 +201,7 @@ function getOption() {
       axisLabel: { color: "#9da5b2", fontSize: "11" },
     },
     yAxis: {
+      show: props.config.showYAxis,
       type: "value",
       axisLine: { show: false },
       axisTick: { show: false },

src/views/dashboard/graphs/ServiceList.vue

@@ -64,14 +64,14 @@ limitations under the License. -->
           <template #default="scope">
             <div class="chart">
               <Line
-                v-if="config.metricTypes[index] === 'readMetricsValues'"
+                v-if="useListConfig(config, index).isLinear"
                 :data="{ [metric]: scope.row[metric] }"
                 :intervalTime="intervalTime"
                 :config="{
                   showXAxis: false,
                   showYAxis: false,
                   smallTips: true,
-                  showSymbol: true,
+                  showlabels: false,
                 }"
               />
               <Card
@@ -108,6 +108,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { Service } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import { useListConfig } from "@/hooks/useListConfig";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";