From 12e766e9d410e8b0afd4f55546b02aed006cae7f Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Wed, 21 Aug 2024 14:06:19 +0100 Subject: [PATCH] refactor: Update YAxisOptions interface to include a precision property --- .../UI/Components/Charts/Types/YAxis/YAxis.ts | 8 ++++ .../UI/Components/Charts/Utils/DataPoint.ts | 38 +++++++++++++++---- .../src/Components/Metrics/MetricView.tsx | 27 +++++++++++++ .../Monitor/MonitorCharts/MonitorChart.tsx | 6 ++- 4 files changed, 71 insertions(+), 8 deletions(-) diff --git a/Common/UI/Components/Charts/Types/YAxis/YAxis.ts b/Common/UI/Components/Charts/Types/YAxis/YAxis.ts index 7a6e8ad880..ec8a8db873 100644 --- a/Common/UI/Components/Charts/Types/YAxis/YAxis.ts +++ b/Common/UI/Components/Charts/Types/YAxis/YAxis.ts @@ -1,11 +1,19 @@ import YAxisMaxMin from "./YAxisMaxMin"; import YAxisType from "./YAxisType"; +export enum YAxisPrecision { + NoDecimals = "NoDecimals", + OneDecimal = "OneDecimal", + TwoDecimals = "TwoDecimals", + ThreeDecimals = "ThreeDecimals", +} + export interface YAxisOptions { type: YAxisType; min: YAxisMaxMin; max: YAxisMaxMin; formatter: (value: number) => string; + precision: } export default interface YAxis { diff --git a/Common/UI/Components/Charts/Utils/DataPoint.ts b/Common/UI/Components/Charts/Utils/DataPoint.ts index ca278d648d..02d9f20cf6 100644 --- a/Common/UI/Components/Charts/Utils/DataPoint.ts +++ b/Common/UI/Components/Charts/Utils/DataPoint.ts @@ -12,6 +12,7 @@ import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint"; import SeriesPoints from "../Types/SeriesPoints"; import { XAxis, XAxisAggregateType } from "../Types/XAxis/XAxis"; import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin"; +import YAxis, { YAxisPrecision } from "../Types/YAxis/YAxis"; import XAxisUtil from "./XAxis"; @@ -19,7 +20,8 @@ import XAxisUtil from "./XAxis"; export default class DataPointUtil { public static getChartDataPoints(data: { seriesPoints: Array; - xAxis: XAxis + xAxis: XAxis; + yAxis: YAxis; }): Array { const xAxisMax: XAxisMaxMin = data.xAxis.options.max; @@ -52,30 +54,30 @@ export default class DataPointUtil { max: number; min: number; } - + // Initialize a new data structure to store sum, count, max, and min for each series const seriesDataMap: { [key: string]: SeriesData } = {}; - + // now we need to add the data points. for (const series of data.seriesPoints) { for (const dataPoint of series.data) { const date: Date = dataPoint.x; const value: number = dataPoint.y; const formattedDate: string = formatter(date); - + for (const chartDataPoint of arrayOfData) { if (chartDataPoint[xAxisLegend] === formattedDate) { // Initialize series data if it doesn't exist if (!seriesDataMap[series.seriesName]) { seriesDataMap[series.seriesName] = { sum: 0, count: 0, max: Number.NEGATIVE_INFINITY, min: Number.POSITIVE_INFINITY }; } - + // Update sum, count, max, and min seriesDataMap[series.seriesName]!.sum += value; seriesDataMap[series.seriesName]!.count += 1; seriesDataMap[series.seriesName]!.max = Math.max(seriesDataMap[series.seriesName]!.max, value); seriesDataMap[series.seriesName]!.min = Math.min(seriesDataMap[series.seriesName]!.min, value); - + // Calculate the average, sum, max, or min based on the aggregate type if (data.xAxis.options.aggregateType === XAxisAggregateType.Average) { chartDataPoint[series.seriesName] = seriesDataMap[series.seriesName]!.sum / seriesDataMap[series.seriesName]!.count; @@ -88,11 +90,33 @@ export default class DataPointUtil { } else { throw new BadDataException("Aggregate type not supported."); } + + if (chartDataPoint[series.seriesName] && typeof chartDataPoint[series.seriesName] === "number") { + + // Format the series data based on yAxis precision + const yAxisPrecision = data.yAxis.options.precision; + switch (yAxisPrecision) { + case YAxisPrecision.NoDecimals: + chartDataPoint[series.seriesName] = parseFloat((chartDataPoint[series.seriesName]! as number).toFixed(0)); + break; + case YAxisPrecision.OneDecimal: + chartDataPoint[series.seriesName] = parseFloat(((chartDataPoint[series.seriesName]! as number).toFixed(1))); + break; + case YAxisPrecision.TwoDecimals: + chartDataPoint[series.seriesName] = parseFloat(((chartDataPoint[series.seriesName]! as number).toFixed(2))); + break; + case YAxisPrecision.ThreeDecimals: + chartDataPoint[series.seriesName] = parseFloat(((chartDataPoint[series.seriesName]! as number).toFixed(3))) + break; + default: + throw new BadDataException("YAxis precision not supported."); + } + } } } } } - + return arrayOfData; } diff --git a/Dashboard/src/Components/Metrics/MetricView.tsx b/Dashboard/src/Components/Metrics/MetricView.tsx index 99ddb5f63b..1d72241e7a 100644 --- a/Dashboard/src/Components/Metrics/MetricView.tsx +++ b/Dashboard/src/Components/Metrics/MetricView.tsx @@ -50,6 +50,8 @@ import Dictionary from "Common/Types/Dictionary"; import YAxisType from "Common/UI/Components/Charts/Types/YAxis/YAxisType"; import XAxisType from "Common/UI/Components/Charts/Types/XAxis/XAxisType"; import ChartCurve from "Common/UI/Components/Charts/Types/ChartCurve"; +import { XAxisAggregateType } from "Common/UI/Components/Charts/Types/XAxis/XAxis"; +import { YAxisPrecision } from "Common/UI/Components/Charts/Types/YAxis/YAxis"; export interface MetricViewData { queryConfigs: Array; @@ -156,6 +158,29 @@ const MetricView: FunctionComponent = ( continue; } + let xAxisAggregationType = XAxisAggregateType.Average; + + if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Sum) { + xAxisAggregationType = XAxisAggregateType.Sum; + } + + if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Count) { + xAxisAggregationType = XAxisAggregateType.Sum; + } + + if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Max) { + xAxisAggregationType = XAxisAggregateType.Max; + } + + if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Min) { + xAxisAggregationType = XAxisAggregateType.Min; + } + + if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Avg) { + xAxisAggregationType = XAxisAggregateType.Average; + } + + const chart: Chart = { id: index.toString(), type: ChartType.LINE, @@ -187,6 +212,7 @@ const MetricView: FunctionComponent = ( type: xAxisType, max: chartEndDate, min: chartStartDate, + aggregateType: xAxisAggregationType, }, }, yAxis: { @@ -196,6 +222,7 @@ const MetricView: FunctionComponent = ( formatter: (value: number) => { return `${value}`; }, + precision: YAxisPrecision.NoDecimals, max: "auto", min: "auto", }, diff --git a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx index ee2e17855a..c4b1478b05 100644 --- a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx +++ b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx @@ -14,7 +14,7 @@ import Probe from "Common/Models/DatabaseModels/Probe"; import DataPoint from "Common/UI/Components/Charts/Types/DataPoint"; import SeriesPoints from "Common/UI/Components/Charts/Types/SeriesPoints"; import YAxisType from "Common/UI/Components/Charts/Types/YAxis/YAxisType"; -import YAxis from "Common/UI/Components/Charts/Types/YAxis/YAxis"; +import YAxis, { YAxisPrecision } from "Common/UI/Components/Charts/Types/YAxis/YAxis"; import XAxisType from "Common/UI/Components/Charts/Types/XAxis/XAxisType"; import { XAxis, XAxisAggregateType } from "Common/UI/Components/Charts/Types/XAxis/XAxis"; import ChartCurve from "Common/UI/Components/Charts/Types/ChartCurve"; @@ -306,6 +306,7 @@ export class MonitorCharts { type: YAxisType.Number, min: 0, max: "auto", + precision: YAxisPrecision.NoDecimals, formatter: (value: number) => { return `${value} ms`; } @@ -318,6 +319,7 @@ export class MonitorCharts { type: YAxisType.Number, min: 0, max: 600, + precision: YAxisPrecision.NoDecimals, formatter: (value: number) => { return `${value}`; } @@ -334,6 +336,7 @@ export class MonitorCharts { type: YAxisType.Number, min: 0, max: 100, + precision: YAxisPrecision.TwoDecimals, formatter: (value: number) => { return `${value}%`; } @@ -347,6 +350,7 @@ export class MonitorCharts { type: YAxisType.Number, min: "auto", max: "auto", + precision: YAxisPrecision.NoDecimals, formatter: (value: number) => { return `${value}`; }