update unit

src/hooks/data.ts

@@ -27,6 +27,7 @@ export enum Calculations {
   Percentage = "percentage",
   ByteToKB = "byteToKB",
   Apdex = "apdex",
+  Precision = "precision",
   ConvertSeconds = "convertSeconds",
   ConvertMilliseconds = "convertMilliseconds",
 }

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;

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",

src/locales/lang/zh.ts

@@ -128,6 +128,7 @@ const msg = {
   textUrl: "文本超链接",
   textAlign: "文本对齐",
   metricLabel: "指标标签",
+  showUnit: "显示单位",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

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

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>

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

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

src/views/dashboard/graphs/Card.vue

@@ -26,13 +26,13 @@ limitations under the License. -->
         ? null
         : singleVal.toFixed(2)
     }}
-    <span v-show="config.showUint">
+    <span v-show="config.showUnit">
-      <i v-for="(m, index) in metricConfig" :key="index">{{ m.unit }}</i>
+      {{ 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>

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 () => {

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],
   () => {

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],
   () => {