feat: add Avg calculations (#66)

src/hooks/data.ts

@@ -34,6 +34,8 @@ export enum Calculations {
   ConvertMilliseconds = "convertMilliseconds",
   MsTos = "msTos",
   Average = "average",
+  PercentageAvg = "percentageAvg",
+  ApdexAvg = "apdexAvg",
 }
 export enum sizeEnum {
   XS = "XS",

src/hooks/useListConfig.ts

@@ -17,16 +17,21 @@
 import { MetricQueryTypes, Calculations } from "./data";
 export function useListConfig(config: any, index: string) {
   const i = Number(index);
+  const types = [
+    Calculations.Average,
+    Calculations.ApdexAvg,
+    Calculations.PercentageAvg,
+  ];
   const calculation =
     config.metricConfig &&
     config.metricConfig[i] &&
     config.metricConfig[i].calculation;
   const line =
     config.metricTypes[i] === MetricQueryTypes.ReadMetricsValues &&
-    calculation !== Calculations.Average;
+    !types.includes(calculation);
   const isAvg =
     config.metricTypes[i] === MetricQueryTypes.ReadMetricsValues &&
-    calculation === Calculations.Average;
+    types.includes(calculation);
   return {
     isLinear: line,
     isAvg,

src/hooks/useProcessor.ts

@@ -278,14 +278,20 @@ export function usePodsSource(
   }
   const data = pods.map((d: Instance | any, idx: number) => {
     config.metrics.map((name: string, index: number) => {
-      const c = (config.metricConfig && config.metricConfig[index]) || {};
+      const c: any = (config.metricConfig && config.metricConfig[index]) || {};
       const key = name + idx + index;
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValue) {
         d[name] = aggregation(resp.data[key], c);
       }
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
         d[name] = {};
-        if (c.calculation === Calculations.Average) {
+        if (
+          [
+            Calculations.Average,
+            Calculations.ApdexAvg,
+            Calculations.PercentageAvg,
+          ].includes(c.calculation)
+        ) {
           d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
         }
         d[name]["values"] = resp.data[key].values.values.map(
@@ -324,18 +330,22 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
   return { queryStr, conditions };
 }
 function calculateExp(
-  arr: any[],
+  arr: { value: number }[],
   config: { calculation: string }
 ): (number | string)[] {
+  const sum = arr
+    .map((d: { value: number }) => d.value)
+    .reduce((a, b) => a + b);
   let data: (number | string)[] = [];
   switch (config.calculation) {
     case Calculations.Average:
-      data = [
-        (
-          arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b) /
-          arr.length
-        ).toFixed(2),
-      ];
+      data = [(sum / arr.length).toFixed(2)];
+      break;
+    case Calculations.PercentageAvg:
+      data = [(sum / arr.length / 100).toFixed(2)];
+      break;
+    case Calculations.ApdexAvg:
+      data = [(sum / arr.length / 10000).toFixed(2)];
       break;
     default:
       data = arr.map((d) => aggregation(d.value, config));
@@ -354,6 +364,9 @@ export function aggregation(
     case Calculations.Percentage:
       data = (val / 100).toFixed(2);
       break;
+    case Calculations.PercentageAvg:
+      data = (val / 100).toFixed(2);
+      break;
     case Calculations.ByteToKB:
       data = (val / 1024).toFixed(2);
       break;
@@ -364,7 +377,10 @@ export function aggregation(
       data = (val / 1024 / 1024 / 1024).toFixed(2);
       break;
     case Calculations.Apdex:
-      data = (val / 10000).toFixed(2);
+      data = val / 10000;
+      break;
+    case Calculations.ApdexAvg:
+      data = val / 10000;
       break;
     case Calculations.ConvertSeconds:
       data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");

src/views/dashboard/data.ts

@@ -263,10 +263,12 @@ export const TextColors: { [key: string]: string } = {
 export const CalculationOpts = [
   { label: "Percentage", value: "percentage" },
   { label: "Apdex", value: "apdex" },
+  { label: "Avg-preview", value: "average" },
+  { label: "Percentage + Avg-preview", value: "percentageAvg" },
+  { label: "Apdex + Avg-preview", value: "apdexAvg" },
   { label: "Byte to KB", value: "byteToKB" },
   { label: "Byte to MB", value: "byteToMB" },
   { label: "Byte to GB", value: "byteToGB" },
-  { label: "Average", value: "average" },
   {
     label: "Milliseconds to YYYY-MM-DD HH:mm:ss",
     value: "convertMilliseconds",

src/views/dashboard/graphs/Card.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
     }"
   >
     {{ singleVal.toFixed(2) }}
-    <span class="unit" v-show="config.showUnit">
+    <span class="unit" v-show="config.showUnit && unit">
       {{ decodeURIComponent(unit) }}
     </span>
   </div>
@@ -55,7 +55,9 @@ const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => Number(props.data[key.value]));
 const unit = computed(
-  () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
+  () =>
+    metricConfig.value[0] &&
+    encodeURIComponent(metricConfig.value[0].unit || "")
 );
 </script>
 <style lang="scss" scoped>