From 220525a2d92dcdcedbcb3204203f7c2689f1a79a Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Wed, 22 Feb 2023 09:14:23 +0800
Subject: [PATCH] feat: add a calculation for `cpm5d` (#239)

---
 src/hooks/data.ts                   | 4 ++--
 src/hooks/useMetricsProcessor.ts    | 6 +++---
 src/layout/components/SideBar.vue   | 1 -
 src/views/dashboard/List.vue        | 2 +-
 src/views/dashboard/data.ts         | 2 +-
 src/views/dashboard/graphs/Card.vue | 8 +++++---
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index 01301b0d..4a20f739 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -30,7 +30,6 @@ export enum Calculations {
   ByteToMB = "byteToMB",
   ByteToGB = "byteToGB",
   Apdex = "apdex",
-  Precision = "precision",
   ConvertSeconds = "convertSeconds",
   ConvertMilliseconds = "convertMilliseconds",
   MsToS = "msTos",
@@ -39,6 +38,7 @@ export enum Calculations {
   ApdexAvg = "apdexAvg",
   SecondToDay = "secondToDay",
   NanosecondToMillisecond = "nanosecondToMillisecond",
+  CPM5D = "cpm5d",
 }
 export enum sizeEnum {
   XS = "XS",
@@ -67,7 +67,7 @@ screenMap.set(sizeEnum.LG, screenEnum.LG);
 screenMap.set(sizeEnum.XL, screenEnum.XL);
 screenMap.set(sizeEnum.XXL, screenEnum.XXL);
 
-export const RespFields: any = {
+export const RespFields: { [key: string]: string } = {
   readMetricsValues: `{
     label
     values {
diff --git a/src/hooks/useMetricsProcessor.ts b/src/hooks/useMetricsProcessor.ts
index 4c08a575..637ee074 100644
--- a/src/hooks/useMetricsProcessor.ts
+++ b/src/hooks/useMetricsProcessor.ts
@@ -398,15 +398,15 @@ export function aggregation(val: number, config: { calculation?: string }): numb
     case Calculations.Apdex:
       data = (val / 10000).toFixed(2);
       break;
+    case Calculations.CPM5D:
+      data = val / 100000 < 1 && val / 100000 !== 0 ? (val / 100000).toFixed(5) : (val / 100000).toFixed(2);
+      break;
     case Calculations.ConvertSeconds:
       data = dayjs(val * 1000).format("YYYY-MM-DD HH:mm:ss");
       break;
     case Calculations.ConvertMilliseconds:
       data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
       break;
-    case Calculations.Precision:
-      data = data.toFixed(2);
-      break;
     case Calculations.MsToS:
       data = (val / 1000).toFixed(2);
       break;
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index c765c05c..ad69fd26 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -117,7 +117,6 @@ limitations under the License. -->
   .side-bar {
     background: #252a2f;
     height: 100%;
-    overflow: hidden;
     margin-bottom: 180px;
   }
 
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 4029bbc0..d81fe692 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -471,7 +471,7 @@ limitations under the License. -->
   .dashboard-list {
     padding: 20px;
     width: 100%;
-    overflow: hidden;
+    overflow: auto;
   }
 
   .input-with-search {
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 3dcbe2e2..5499543d 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -309,7 +309,7 @@ export const CalculationOpts = [
     value: "convertMilliseconds",
   },
   { label: "Seconds to YYYY-MM-DD HH:mm:ss", value: "convertSeconds" },
-  { label: "Precision is 2", value: "precision" },
+  { label: "CPM5D", value: "cpm5d" },
   { label: "Milliseconds to seconds", value: "msTos" },
   { label: "Seconds to days", value: "secondToDay" },
   { label: "Nanoseconds to milliseconds", value: "nanosecondToMillisecond" },
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 3c8ebfb4..56c63c2e 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -22,7 +22,7 @@ limitations under the License. -->
       justifyContent: config.textAlign || 'center',
     }"
   >
-    {{ singleVal.toFixed(2) }}
+    {{ singleVal }}
     <span class="unit" v-show="config.showUnit && unit">
       {{ decodeURIComponent(unit) }}
     </span>
@@ -38,7 +38,7 @@ limitations under the License. -->
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<{ [key: string]: number }>,
+      type: Object as PropType<{ [key: string]: any }>,
       default: () => ({}),
     },
     config: {
@@ -54,7 +54,9 @@ limitations under the License. -->
   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]));
+  const singleVal = computed(() =>
+    Array.isArray(props.data[key.value]) ? props.data[key.value][0] : props.data[key.value],
+  );
   const unit = computed(() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || ""));
 </script>
 <style lang="scss" scoped>