github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

refactor: Update YAxisOptions interface to include a precision property

Browse Source
This commit is contained in:
Simon Larsen
2024-08-21 14:06:19 +01:00
parent ba2a480d4f
commit 12e766e9d4
4 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Common/UI/Components/Charts/Types/YAxis/YAxis.ts
View File

@@ -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 {

38
Common/UI/Components/Charts/Utils/DataPoint.ts
View File

@@ -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<SeriesPoints>;
xAxis: XAxis
xAxis: XAxis;
yAxis: YAxis;
}): Array<ChartDataPoint> {
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;
}

27
Dashboard/src/Components/Metrics/MetricView.tsx
View File

@@ -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<MetricQueryConfigData>;
@@ -156,6 +158,29 @@ const MetricView: FunctionComponent<ComponentProps> = (
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<ComponentProps> = (
type: xAxisType,
max: chartEndDate,
min: chartStartDate,
aggregateType: xAxisAggregationType,
},
},
yAxis: {
@@ -196,6 +222,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
formatter: (value: number) => {
return `${value}`;
},
precision: YAxisPrecision.NoDecimals,
max: "auto",
min: "auto",
},

6
Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
View File

@@ -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}`;
}