From e2da673f53ed20b42bfd59a7a4adff7807b02e9e Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Thu, 28 Mar 2024 18:50:28 +0000
Subject: [PATCH] Fix formatting issues in MonitorChart and MonitorChartTooltip
 components

---
 .../src/Components/Charts/Line/LineChart.tsx  |  2 +-
 .../Monitor/MonitorCharts/MonitorChart.tsx    | 17 +++---
 .../MonitorCharts/MonitorChartTooltip.tsx     | 56 +++++++++++++------
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/CommonUI/src/Components/Charts/Line/LineChart.tsx b/CommonUI/src/Components/Charts/Line/LineChart.tsx
index a07afb0f22..4577439ed9 100644
--- a/CommonUI/src/Components/Charts/Line/LineChart.tsx
+++ b/CommonUI/src/Components/Charts/Line/LineChart.tsx
@@ -65,7 +65,7 @@ export enum AxisType {
 
 export interface AxisBottom {
     legend: string;
-    type: AxisType
+    type: AxisType;
 }
 
 export interface AxisLeft {
diff --git a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
index c42c1bcbf9..9460645804 100644
--- a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
+++ b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
@@ -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,
diff --git a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx
index ba5e991359..d4c820018d 100644
--- a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx
+++ b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx
@@ -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>
     );