mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 07:10:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor MonitorChart and MonitorChartTooltip components

Browse Source
This commit is contained in:
Simon Larsen 2024-03-28 17:57:37 +00:00
parent c188d23e0c
commit 87ad6dd73b
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
2 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.ts → Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
View File

@ -1,3 +1,5 @@
import React from 'react';
import OneUptimeDate from 'Common/Types/Date';
import { CheckOn } from 'Common/Types/Monitor/CriteriaFilter';
import {
@ -6,6 +8,7 @@ import {
} from 'CommonUI/src/Components/Charts/ChartGroup/ChartGroup';
import {
ChartCurve,
LineChartPoint,
XScale,
XScalePrecision,
XScaleType,
@ -14,8 +17,9 @@ import {
YScaleType,
} from 'CommonUI/src/Components/Charts/Line/LineChart';
import MonitorMetricsByMinute from 'Model/AnalyticsModels/MonitorMetricsByMinute';
import MonitorChartTooltip from './MonitorChartTooltip';
export default class MonitorCharts {
export class MonitorCharts {
public static getMonitorCharts(data: {
monitorMetricsByMinute: Array<MonitorMetricsByMinute>;
checkOns: Array<CheckOn>;
@ -23,13 +27,13 @@ export default class MonitorCharts {
const { monitorMetricsByMinute, checkOns } = data;
const charts: Array<Chart> = checkOns.map(
(dataType: CheckOn, index: number) => {
(checkOn: CheckOn, index: number) => {
return {
id: `chart-${index}`,
type: ChartType.LINE,
title: MonitorCharts.getChartTitle({ checkOn: dataType }),
title: MonitorCharts.getChartTitle({ checkOn: checkOn }),
description: MonitorCharts.getChartDescription({
checkOn: dataType,
checkOn: checkOn,
}),
props: {
data: [
@ -37,7 +41,7 @@ export default class MonitorCharts {
id: `line-${index}`,
data: monitorMetricsByMinute
.filter((item: MonitorMetricsByMinute) => {
return item.metricType === dataType;
return item.metricType === checkOn;
})
.map((item: MonitorMetricsByMinute) => {
return {
@ -51,7 +55,7 @@ export default class MonitorCharts {
monitorMetricsByMinute,
}),
yScale: MonitorCharts.getYScaleFor({
checkOn: dataType,
checkOn: checkOn,
}),
axisBottom: {
legend: '',
@ -61,9 +65,12 @@ export default class MonitorCharts {
);
},
},
curve: MonitorCharts.getCurveFor({ checkOn: dataType }),
curve: MonitorCharts.getCurveFor({ checkOn: checkOn }),
axisLeft: {
legend: '',
},
getHoverTooltip: (data: { points: Array<LineChartPoint> }) => {
return <MonitorChartTooltip xLegend='Time' yLegend={checkOn} points={data.points} />;
}
},
sync: true,

30
Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx
View File

@ -2,7 +2,7 @@ import React, { FunctionComponent, ReactElement } from 'react';
import { LineChartPoint } from 'CommonUI/src/Components/Charts/Line/LineChart';
export interface ComponentProps {
point: LineChartPoint;
points: Array<LineChartPoint>;
xLegend: string;
yLegend: string;
}
@ -12,18 +12,22 @@ const MonitorChartTooltip: FunctionComponent<ComponentProps> = (
): ReactElement => {
return (
<div>
<div className="flex">
<div className="w-1/2 text-left">{props.yLegend}</div>
<div className="w-1/2 text-right">
{props.point.y.toString()}
</div>
</div>
<div className="flex">
<div className="w-1/2 text-left">{props.xLegend}</div>
<div className="w-1/2 text-right">
{props.point.x.toString()}
</div>
</div>
{props.points.map((point: LineChartPoint, index: number) => {
return (<div key={index}>
<div className="flex">
<div className="w-1/2 text-left">{props.yLegend}</div>
<div className="w-1/2 text-right">
{point.y.toString()}
</div>
</div>
<div className="flex">
<div className="w-1/2 text-left">{props.xLegend}</div>
<div className="w-1/2 text-right">
{point.x.toString()}
</div>
</div>
</div>)
})}
</div>
);
};