mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 15:24:55 +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 OneUptimeDate from 'Common/Types/Date';
import { CheckOn } from 'Common/Types/Monitor/CriteriaFilter'; import { CheckOn } from 'Common/Types/Monitor/CriteriaFilter';
import { import {
@ -6,6 +8,7 @@ import {
} from 'CommonUI/src/Components/Charts/ChartGroup/ChartGroup'; } from 'CommonUI/src/Components/Charts/ChartGroup/ChartGroup';
import { import {
ChartCurve, ChartCurve,
LineChartPoint,
XScale, XScale,
XScalePrecision, XScalePrecision,
XScaleType, XScaleType,
@ -14,8 +17,9 @@ import {
YScaleType, YScaleType,
} from 'CommonUI/src/Components/Charts/Line/LineChart'; } from 'CommonUI/src/Components/Charts/Line/LineChart';
import MonitorMetricsByMinute from 'Model/AnalyticsModels/MonitorMetricsByMinute'; import MonitorMetricsByMinute from 'Model/AnalyticsModels/MonitorMetricsByMinute';
import MonitorChartTooltip from './MonitorChartTooltip';
export default class MonitorCharts { export class MonitorCharts {
public static getMonitorCharts(data: { public static getMonitorCharts(data: {
monitorMetricsByMinute: Array<MonitorMetricsByMinute>; monitorMetricsByMinute: Array<MonitorMetricsByMinute>;
checkOns: Array<CheckOn>; checkOns: Array<CheckOn>;
@ -23,13 +27,13 @@ export default class MonitorCharts {
const { monitorMetricsByMinute, checkOns } = data; const { monitorMetricsByMinute, checkOns } = data;
const charts: Array<Chart> = checkOns.map( const charts: Array<Chart> = checkOns.map(
(dataType: CheckOn, index: number) => { (checkOn: CheckOn, index: number) => {
return { return {
id: `chart-${index}`, id: `chart-${index}`,
type: ChartType.LINE, type: ChartType.LINE,
title: MonitorCharts.getChartTitle({ checkOn: dataType }), title: MonitorCharts.getChartTitle({ checkOn: checkOn }),
description: MonitorCharts.getChartDescription({ description: MonitorCharts.getChartDescription({
checkOn: dataType, checkOn: checkOn,
}), }),
props: { props: {
data: [ data: [
@ -37,7 +41,7 @@ export default class MonitorCharts {
id: `line-${index}`, id: `line-${index}`,
data: monitorMetricsByMinute data: monitorMetricsByMinute
.filter((item: MonitorMetricsByMinute) => { .filter((item: MonitorMetricsByMinute) => {
return item.metricType === dataType; return item.metricType === checkOn;
}) })
.map((item: MonitorMetricsByMinute) => { .map((item: MonitorMetricsByMinute) => {
return { return {
@ -51,7 +55,7 @@ export default class MonitorCharts {
monitorMetricsByMinute, monitorMetricsByMinute,
}), }),
yScale: MonitorCharts.getYScaleFor({ yScale: MonitorCharts.getYScaleFor({
checkOn: dataType, checkOn: checkOn,
}), }),
axisBottom: { axisBottom: {
legend: '', legend: '',
@ -61,9 +65,12 @@ export default class MonitorCharts {
); );
}, },
}, },
curve: MonitorCharts.getCurveFor({ checkOn: dataType }), curve: MonitorCharts.getCurveFor({ checkOn: checkOn }),
axisLeft: { axisLeft: {
legend: '', legend: '',
},
getHoverTooltip: (data: { points: Array<LineChartPoint> }) => {
return <MonitorChartTooltip xLegend='Time' yLegend={checkOn} points={data.points} />;
} }
}, },
sync: true, 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'; import { LineChartPoint } from 'CommonUI/src/Components/Charts/Line/LineChart';
export interface ComponentProps { export interface ComponentProps {
point: LineChartPoint; points: Array<LineChartPoint>;
xLegend: string; xLegend: string;
yLegend: string; yLegend: string;
} }
@ -12,18 +12,22 @@ const MonitorChartTooltip: FunctionComponent<ComponentProps> = (
): ReactElement => { ): ReactElement => {
return ( return (
<div> <div>
<div className="flex"> {props.points.map((point: LineChartPoint, index: number) => {
<div className="w-1/2 text-left">{props.yLegend}</div> return (<div key={index}>
<div className="w-1/2 text-right"> <div className="flex">
{props.point.y.toString()} <div className="w-1/2 text-left">{props.yLegend}</div>
</div> <div className="w-1/2 text-right">
</div> {point.y.toString()}
<div className="flex"> </div>
<div className="w-1/2 text-left">{props.xLegend}</div> </div>
<div className="w-1/2 text-right"> <div className="flex">
{props.point.x.toString()} <div className="w-1/2 text-left">{props.xLegend}</div>
</div> <div className="w-1/2 text-right">
</div> {point.x.toString()}
</div>
</div>
</div>)
})}
</div> </div>
); );
}; };