From 26db1ec23ed06c662b4da6da022e678937b01b45 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 14 Apr 2022 18:15:28 +0800 Subject: [PATCH] feat: add Avg calculations (#66) --- src/hooks/data.ts | 2 ++ src/hooks/useListConfig.ts | 9 ++++++-- src/hooks/useProcessor.ts | 36 +++++++++++++++++++++-------- src/views/dashboard/data.ts | 4 +++- src/views/dashboard/graphs/Card.vue | 6 +++-- 5 files changed, 42 insertions(+), 15 deletions(-) diff --git a/src/hooks/data.ts b/src/hooks/data.ts index 1909362d..edafd050 100644 --- a/src/hooks/data.ts +++ b/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", diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts index 47e7269e..a7f7ad59 100644 --- a/src/hooks/useListConfig.ts +++ b/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, diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index 84ab0744..e8d25f41 100644 --- a/src/hooks/useProcessor.ts +++ b/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"); diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 5b80ca3c..bed9001e 100644 --- a/src/views/dashboard/data.ts +++ b/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", diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue index 234f8b9a..cfe37f65 100644 --- a/src/views/dashboard/graphs/Card.vue +++ b/src/views/dashboard/graphs/Card.vue @@ -23,7 +23,7 @@ limitations under the License. --> }" > {{ singleVal.toFixed(2) }} - + {{ decodeURIComponent(unit) }} @@ -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 || "") );