From 4ace3c682f643bd1a75b4abace63ec30ac3f4ccc Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 26 Mar 2022 22:05:29 +0800
Subject: [PATCH] update unit

---
 src/hooks/data.ts                                 |  1 +
 src/hooks/useProcessor.ts                         |  3 +++
 src/locales/lang/en.ts                            |  1 +
 src/locales/lang/zh.ts                            |  1 +
 src/types/dashboard.ts                            |  2 +-
 .../configuration/widget/graph-styles/Card.vue    | 14 ++++++++++++--
 .../configuration/widget/metric/Standard.vue      |  1 -
 src/views/dashboard/data.ts                       |  1 +
 src/views/dashboard/graphs/Card.vue               | 15 ++++++++++-----
 src/views/dashboard/graphs/EndpointList.vue       | 13 ++++++++++++-
 src/views/dashboard/graphs/InstanceList.vue       | 14 +++++++++++++-
 src/views/dashboard/graphs/ServiceList.vue        | 13 ++++++++++++-
 12 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index 45aa326b..5f1fdd88 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -27,6 +27,7 @@ export enum Calculations {
   Percentage = "percentage",
   ByteToKB = "byteToKB",
   Apdex = "apdex",
+  Precision = "precision",
   ConvertSeconds = "convertSeconds",
   ConvertMilliseconds = "convertMilliseconds",
 }
diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index b534ebd6..f91f4515 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -330,6 +330,9 @@ export function aggregation(val: number, config: any): number | string {
     case Calculations.ConvertMilliseconds:
       data = dayjs.unix(val).format("YYYY-MM-DD HH:mm:ss");
       break;
+    case Calculations.Precision:
+      data = data.toFixed(2);
+      break;
     default:
       data;
       break;
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 6c0f4b2a..4bc27589 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -128,6 +128,7 @@ const msg = {
   textUrl: "Text Hyperlink",
   textAlign: "Text Align",
   metricLabel: "Metric Label",
+  showUnit: "Show Unit",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 9683dd6a..43f09eb6 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -128,6 +128,7 @@ const msg = {
   textUrl: "文本超链接",
   textAlign: "文本对齐",
   metricLabel: "指标标签",
+  showUnit: "显示单位",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index 48be4187..3a1fe7e1 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -96,7 +96,7 @@ export interface AreaConfig {
 export interface CardConfig {
   type?: string;
   fontSize?: number;
-  showUint?: boolean;
+  showUnit?: boolean;
   textAlign?: "center" | "right" | "left";
 }
 
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Card.vue b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
index 1a5bcb75..6259b141 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Card.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
@@ -26,6 +26,15 @@ limitations under the License. -->
       @change="updateConfig({ fontSize })"
     />
   </div>
+  <div class="item">
+    <span class="label">{{ t("showUnit") }}</span>
+    <el-switch
+      v-model="showUnit"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ showUnit })"
+    />
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -36,13 +45,14 @@ const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
 const fontSize = ref(selectedGrid.graph.fontSize);
+const showUnit = ref<boolean>(selectedGrid.graph.showUnit);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 48a6be21..d0a2ff5f 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -95,7 +95,6 @@ const metricType = ref<string>(
 );
 
 function changeConfigs(index: number, param: { [key: string]: string }) {
-  console.log(param);
   const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
   metricConfig[index] = { ...metricConfig[index], ...param };
 
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 265b8251..b938d5a8 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -274,4 +274,5 @@ export const CalculationOpts = [
     value: "convertMilliseconds",
   },
   { label: "Convert seconds to YYYY-MM-DD HH:mm:ss", value: "convertSeconds" },
+  { label: "Precision is 2", value: "precision" },
 ];
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index cff1a47f..b715881f 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -26,13 +26,13 @@ limitations under the License. -->
         ? null
         : singleVal.toFixed(2)
     }}
-    <span v-show="config.showUint">
-      <i v-for="(m, index) in metricConfig" :key="index">{{ m.unit }}</i>
+    <span v-show="config.showUnit">
+      {{ metricConfig[0]?.unit }}
     </span>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, PropType, ref } from "vue";
+import { computed, PropType } from "vue";
 import { CardConfig, MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
@@ -43,10 +43,15 @@ const props = defineProps({
   },
   config: {
     type: Object as PropType<CardConfig & { metricConfig?: MetricConfigOpt[] }>,
-    default: () => ({ fontSize: 12, showUint: true, textAlign: "center" }),
+    default: () => ({
+      fontSize: 12,
+      showUnit: true,
+      textAlign: "center",
+      metricConfig: [],
+    }),
   },
 });
-const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
+const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => props.data[key.value]);
 </script>
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index a4bb184f..1191915d 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -44,7 +44,7 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
-          :label="metric"
+          :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -190,6 +190,17 @@ async function searchList() {
   const limit = searchText.value ? undefined : total;
   await queryEndpoints(limit);
 }
+function getUnit(index: number) {
+  const u =
+    (props.config.metricConfig &&
+      props.config.metricConfig[index] &&
+      props.config.metricConfig[index].unit) ||
+    "";
+  if (u) {
+    return `(${u})`;
+  }
+  return u;
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   async () => {
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index fa49424a..f918ae2e 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -44,7 +44,7 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
-          :label="metric"
+          :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -219,6 +219,18 @@ function searchList() {
   instances.value = searchInstances.value.splice(0, pageSize);
 }
 
+function getUnit(index: number) {
+  const u =
+    (props.config.metricConfig &&
+      props.config.metricConfig[index] &&
+      props.config.metricConfig[index].unit) ||
+    "";
+  if (u) {
+    return `(${u})`;
+  }
+  return u;
+}
+
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 682acb13..4423601b 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -56,7 +56,7 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
-          :label="metric"
+          :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -255,6 +255,17 @@ function searchList() {
   );
   services.value = searchServices.splice(0, pageSize);
 }
+function getUnit(index: number) {
+  const u =
+    (props.config.metricConfig &&
+      props.config.metricConfig[index] &&
+      props.config.metricConfig[index].unit) ||
+    "";
+  if (u) {
+    return `(${u})`;
+  }
+  return u;
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {