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

Fix formatting issues in MonitorChart and MonitorChartTooltip components

Browse Source
This commit is contained in:
Simon Larsen 2024-03-28 18:50:28 +00:00
parent 32473b0d51
commit e2da673f53
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
3 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CommonUI/src/Components/Charts/Line/LineChart.tsx
View File

@ -65,7 +65,7 @@ export enum AxisType {
export interface AxisBottom {
legend: string;
type: AxisType
type: AxisType;
}
export interface AxisLeft {

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

@ -28,14 +28,12 @@ export class MonitorCharts {
const charts: Array<Chart> = checkOns.map(
(checkOn: CheckOn, index: number) => {
const axisBottom: AxisBottom = MonitorCharts.getAxisBottomFor();
const axisLeft: AxisLeft = MonitorCharts.getAxisLeftFor({
checkOn: checkOn,
});
return {
id: `chart-${index}`,
type: ChartType.LINE,
@ -77,7 +75,12 @@ export class MonitorCharts {
...axisBottom,
legend: MonitorCharts.getAxisBottomLegend(),
}}
axisLeft={{...axisLeft, legend: MonitorCharts.getAxisLeftLegend({ checkOn })}}
axisLeft={{
...axisLeft,
legend: MonitorCharts.getAxisLeftLegend(
{ checkOn }
),
}}
points={data.points}
/>
);
@ -92,13 +95,10 @@ export class MonitorCharts {
}
private static getAxisBottomLegend(): string {
return 'Time'
return 'Time';
}
public static getAxisLeftLegend(data: {
checkOn: CheckOn;
}): string {
public static getAxisLeftLegend(data: { checkOn: CheckOn }): string {
return data.checkOn;
}
@ -109,7 +109,6 @@ export class MonitorCharts {
};
}
private static getAxisLeftFor(data: { checkOn: CheckOn }): AxisLeft {
return {
legend: data.checkOn,

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

@ -1,5 +1,12 @@
import React, { FunctionComponent, ReactElement } from 'react';
import { AxisBottom, AxisLeft, AxisType, LineChartPoint, XValue, YValue } from 'CommonUI/src/Components/Charts/Line/LineChart';
import {
AxisBottom,
AxisLeft,
AxisType,
LineChartPoint,
XValue,
YValue,
} from 'CommonUI/src/Components/Charts/Line/LineChart';
import OneUptimeDate from 'Common/Types/Date';
export interface ComponentProps {
@ -11,8 +18,10 @@ export interface ComponentProps {
const MonitorChartTooltip: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
const formatAxisValue = (value: XValue | YValue, type: AxisType): string => {
const formatAxisValue = (
value: XValue | YValue,
type: AxisType
): string => {
if (typeof value === 'number') {
return value.toFixed(2);
}
@ -26,26 +35,37 @@ const MonitorChartTooltip: FunctionComponent<ComponentProps> = (
}
return value.toString();
}
};
return (
<div className='bg-white rounded-md shadow-md p-5 text-sm'>
<div className="bg-white rounded-md shadow-md p-5 text-sm">
{props.points.map((point: LineChartPoint, index: number) => {
return (<div key={index} className='space-y-2'>
<div className="flex">
<div className="w-1/2 text-left font-medium">{props.axisLeft.legend}</div>
<div className="w-1/2 text-right">
{formatAxisValue(point.y.toString(), props.axisLeft.type)}
return (
<div key={index} className="space-y-2">
<div className="flex">
<div className="w-1/2 text-left font-medium">
{props.axisLeft.legend}
</div>
<div className="w-1/2 text-right">
{formatAxisValue(
point.y.toString(),
props.axisLeft.type
)}
</div>
</div>
<div className="flex">
<div className="w-1/2 text-left font-medium">
{props.axisBottom.legend}
</div>
<div className="w-1/2 text-right">
{formatAxisValue(
point.x.toString(),
props.axisBottom.type
)}
</div>
</div>
</div>
<div className="flex">
<div className="w-1/2 text-left font-medium">{props.axisBottom.legend}</div>
<div className="w-1/2 text-right">
{formatAxisValue(point.x.toString(), props.axisBottom.type)}
</div>
</div>
</div>)
);
})}
</div>
);