Skip to content

Commit 12e766e

Browse files
simlarsensimlarsen
committed
refactor: Update YAxisOptions interface to include a precision property
1 parent ba2a480 commit 12e766e

File tree

4 files changed

+71
-8
lines changed

4 files changed

+71
-8
lines changed

‎Common/UI/Components/Charts/Types/YAxis/YAxis.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import YAxisMaxMin from "./YAxisMaxMin";
22
import YAxisType from "./YAxisType";
33

4+
export enum YAxisPrecision {
5+
NoDecimals = "NoDecimals",
6+
OneDecimal = "OneDecimal",
7+
TwoDecimals = "TwoDecimals",
8+
ThreeDecimals = "ThreeDecimals",
9+
}
10+
411
export interface YAxisOptions {
512
type: YAxisType;
613
min: YAxisMaxMin;
714
max: YAxisMaxMin;
815
formatter: (value: number) => string;
16+
precision:
917
}
1018

1119
export default interface YAxis {

‎Common/UI/Components/Charts/Utils/DataPoint.ts

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
1212
import SeriesPoints from "../Types/SeriesPoints";
1313
import { XAxis, XAxisAggregateType } from "../Types/XAxis/XAxis";
1414
import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
15+
import YAxis, { YAxisPrecision } from "../Types/YAxis/YAxis";
1516
import XAxisUtil from "./XAxis";
1617

1718

1819

1920
export default class DataPointUtil {
2021
public static getChartDataPoints(data: {
2122
seriesPoints: Array<SeriesPoints>;
22-
xAxis: XAxis
23+
xAxis: XAxis;
24+
yAxis: YAxis;
2325
}): Array<ChartDataPoint> {
2426

2527
const xAxisMax: XAxisMaxMin = data.xAxis.options.max;
@@ -52,30 +54,30 @@ export default class DataPointUtil {
5254
max: number;
5355
min: number;
5456
}
55-
57+
5658
// Initialize a new data structure to store sum, count, max, and min for each series
5759
const seriesDataMap: { [key: string]: SeriesData } = {};
58-
60+
5961
// now we need to add the data points.
6062
for (const series of data.seriesPoints) {
6163
for (const dataPoint of series.data) {
6264
const date: Date = dataPoint.x;
6365
const value: number = dataPoint.y;
6466
const formattedDate: string = formatter(date);
65-
67+
6668
for (const chartDataPoint of arrayOfData) {
6769
if (chartDataPoint[xAxisLegend] === formattedDate) {
6870
// Initialize series data if it doesn't exist
6971
if (!seriesDataMap[series.seriesName]) {
7072
seriesDataMap[series.seriesName] = { sum: 0, count: 0, max: Number.NEGATIVE_INFINITY, min: Number.POSITIVE_INFINITY };
7173
}
72-
74+
7375
// Update sum, count, max, and min
7476
seriesDataMap[series.seriesName]!.sum += value;
7577
seriesDataMap[series.seriesName]!.count += 1;
7678
seriesDataMap[series.seriesName]!.max = Math.max(seriesDataMap[series.seriesName]!.max, value);
7779
seriesDataMap[series.seriesName]!.min = Math.min(seriesDataMap[series.seriesName]!.min, value);
78-
80+
7981
// Calculate the average, sum, max, or min based on the aggregate type
8082
if (data.xAxis.options.aggregateType === XAxisAggregateType.Average) {
8183
chartDataPoint[series.seriesName] = seriesDataMap[series.seriesName]!.sum / seriesDataMap[series.seriesName]!.count;
@@ -88,11 +90,33 @@ export default class DataPointUtil {
8890
} else {
8991
throw new BadDataException("Aggregate type not supported.");
9092
}
93+
94+
if (chartDataPoint[series.seriesName] && typeof chartDataPoint[series.seriesName] === "number") {
95+
96+
// Format the series data based on yAxis precision
97+
const yAxisPrecision = data.yAxis.options.precision;
98+
switch (yAxisPrecision) {
99+
case YAxisPrecision.NoDecimals:
100+
chartDataPoint[series.seriesName] = parseFloat((chartDataPoint[series.seriesName]! as number).toFixed(0));
101+
break;
102+
case YAxisPrecision.OneDecimal:
103+
chartDataPoint[series.seriesName] = parseFloat(((chartDataPoint[series.seriesName]! as number).toFixed(1)));
104+
break;
105+
case YAxisPrecision.TwoDecimals:
106+
chartDataPoint[series.seriesName] = parseFloat(((chartDataPoint[series.seriesName]! as number).toFixed(2)));
107+
break;
108+
case YAxisPrecision.ThreeDecimals:
109+
chartDataPoint[series.seriesName] = parseFloat(((chartDataPoint[series.seriesName]! as number).toFixed(3)))
110+
break;
111+
default:
112+
throw new BadDataException("YAxis precision not supported.");
113+
}
114+
}
91115
}
92116
}
93117
}
94118
}
95-
119+
96120
return arrayOfData;
97121

98122
}

‎Dashboard/src/Components/Metrics/MetricView.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ import Dictionary from "Common/Types/Dictionary";
5050
import YAxisType from "Common/UI/Components/Charts/Types/YAxis/YAxisType";
5151
import XAxisType from "Common/UI/Components/Charts/Types/XAxis/XAxisType";
5252
import ChartCurve from "Common/UI/Components/Charts/Types/ChartCurve";
53+
import { XAxisAggregateType } from "Common/UI/Components/Charts/Types/XAxis/XAxis";
54+
import { YAxisPrecision } from "Common/UI/Components/Charts/Types/YAxis/YAxis";
5355

5456
export interface MetricViewData {
5557
queryConfigs: Array<MetricQueryConfigData>;
@@ -156,6 +158,29 @@ const MetricView: FunctionComponent<ComponentProps> = (
156158
continue;
157159
}
158160

161+
let xAxisAggregationType = XAxisAggregateType.Average;
162+
163+
if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Sum) {
164+
xAxisAggregationType = XAxisAggregateType.Sum;
165+
}
166+
167+
if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Count) {
168+
xAxisAggregationType = XAxisAggregateType.Sum;
169+
}
170+
171+
if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Max) {
172+
xAxisAggregationType = XAxisAggregateType.Max;
173+
}
174+
175+
if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Min) {
176+
xAxisAggregationType = XAxisAggregateType.Min;
177+
}
178+
179+
if(queryConfig.metricQueryData.filterData.aggegationType === MetricsAggregationType.Avg) {
180+
xAxisAggregationType = XAxisAggregateType.Average;
181+
}
182+
183+
159184
const chart: Chart = {
160185
id: index.toString(),
161186
type: ChartType.LINE,
@@ -187,6 +212,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
187212
type: xAxisType,
188213
max: chartEndDate,
189214
min: chartStartDate,
215+
aggregateType: xAxisAggregationType,
190216
},
191217
},
192218
yAxis: {
@@ -196,6 +222,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
196222
formatter: (value: number) => {
197223
return `${value}`;
198224
},
225+
precision: YAxisPrecision.NoDecimals,
199226
max: "auto",
200227
min: "auto",
201228
},

‎Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import Probe from "Common/Models/DatabaseModels/Probe";
1414
import DataPoint from "Common/UI/Components/Charts/Types/DataPoint";
1515
import SeriesPoints from "Common/UI/Components/Charts/Types/SeriesPoints";
1616
import YAxisType from "Common/UI/Components/Charts/Types/YAxis/YAxisType";
17-
import YAxis from "Common/UI/Components/Charts/Types/YAxis/YAxis";
17+
import YAxis, { YAxisPrecision } from "Common/UI/Components/Charts/Types/YAxis/YAxis";
1818
import XAxisType from "Common/UI/Components/Charts/Types/XAxis/XAxisType";
1919
import { XAxis, XAxisAggregateType } from "Common/UI/Components/Charts/Types/XAxis/XAxis";
2020
import ChartCurve from "Common/UI/Components/Charts/Types/ChartCurve";
@@ -306,6 +306,7 @@ export class MonitorCharts {
306306
type: YAxisType.Number,
307307
min: 0,
308308
max: "auto",
309+
precision: YAxisPrecision.NoDecimals,
309310
formatter: (value: number) => {
310311
return `${value} ms`;
311312
}
@@ -318,6 +319,7 @@ export class MonitorCharts {
318319
type: YAxisType.Number,
319320
min: 0,
320321
max: 600,
322+
precision: YAxisPrecision.NoDecimals,
321323
formatter: (value: number) => {
322324
return `${value}`;
323325
}
@@ -334,6 +336,7 @@ export class MonitorCharts {
334336
type: YAxisType.Number,
335337
min: 0,
336338
max: 100,
339+
precision: YAxisPrecision.TwoDecimals,
337340
formatter: (value: number) => {
338341
return `${value}%`;
339342
}
@@ -347,6 +350,7 @@ export class MonitorCharts {
347350
type: YAxisType.Number,
348351
min: "auto",
349352
max: "auto",
353+
precision: YAxisPrecision.NoDecimals,
350354
formatter: (value: number) => {
351355
return `${value}`;
352356
}

0 commit comments

Comments
 (0)