feat: add a calculation for cpm5d (#239)

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 {

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;

src/layout/components/SideBar.vue

@@ -117,7 +117,6 @@ limitations under the License. -->
   .side-bar {
     background: #252a2f;
     height: 100%;
-    overflow: hidden;
     margin-bottom: 180px;
   }
 

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 {

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

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>