Refactor line chart tooltip and monitor view

OneUptime · Mar 28, 2024 · ed404df · ed404df
1 parent 57b99e2
commit ed404df
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 47 deletions.
diff --git a/CommonUI/src/Components/Charts/Line/LineChart.tsx b/CommonUI/src/Components/Charts/Line/LineChart.tsx
@@ -147,12 +147,14 @@ const LineChart: FunctionComponent<ComponentProps> = (
                         return <></>;
                     }
 
-                    return props.getHoverTooltip({ points: data.slice.points.map((point) => {
-                        return {
-                            x: point.data.x as XValue,
-                            y: point.data.y as YValue,
-                        };
-                    })});
+                    return props.getHoverTooltip({
+                        points: data.slice.points.map((point) => {
+                            return {
+                                x: point.data.x as XValue,
+                                y: point.data.y as YValue,
+                            };
+                        }),
+                    });
                 }}
                 colors={[Indigo500.toString()]} // Set the line color to purple
             />

diff --git a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import OneUptimeDate from 'Common/Types/Date';
 import { CheckOn } from 'Common/Types/Monitor/CriteriaFilter';
@@ -7,6 +6,8 @@ import {
     ChartType,
 } from 'CommonUI/src/Components/Charts/ChartGroup/ChartGroup';
 import {
+    AxisBottom,
+    AxisLeft,
     ChartCurve,
     LineChartPoint,
     XScale,
@@ -28,6 +29,14 @@ 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,
@@ -57,21 +66,23 @@ export class MonitorCharts {
                         yScale: MonitorCharts.getYScaleFor({
                             checkOn: checkOn,
                         }),
-                        axisBottom: {
-                            legend: '',
-                            format: (value: XValue): string => {
-                                return OneUptimeDate.getLocalHourAndMinuteFromDate(
-                                    value as Date
-                                );
-                            },
-                        },
+                        axisBottom: axisBottom,
                         curve: MonitorCharts.getCurveFor({ checkOn: checkOn }),
-                        axisLeft: {
-                            legend: '',
+                        axisLeft: axisLeft,
+                        getHoverTooltip: (data: {
+                            points: Array<LineChartPoint>;
+                        }) => {
+                            return (
+                                <MonitorChartTooltip
+                                    axisBottom={{
+                                        ...axisBottom,
+                                        legend: MonitorCharts.getAxisBottomLegend(),
+                                    }}
+                                    axisLeft={{...axisLeft, legend: MonitorCharts.getAxisLeftLegend({ checkOn })}}
+                                    points={data.points}
+                                />
+                            );
                         },
-                        getHoverTooltip: (data: { points: Array<LineChartPoint> }) => {
-                            return <MonitorChartTooltip xLegend='Time' yLegend={checkOn} points={data.points}  />;
-                        }
                     },
                     sync: true,
                 };
@@ -81,6 +92,35 @@ export class MonitorCharts {
         return charts;
     }
 
+    private static getAxisBottomLegend(): string {
+       return 'Time'
+    }
+
+
+    public static getAxisLeftLegend(data: {
+        checkOn: CheckOn;
+    }): string {
+        return data.checkOn;
+    }
+
+    private static getAxisBottomFor(): AxisBottom {
+        return {
+            legend: '',
+            format: (value: XValue): string => {
+                return OneUptimeDate.getLocalHourAndMinuteFromDate(
+                    value as Date
+                );
+            },
+        };
+    }
+
+
+    private static getAxisLeftFor(data: { checkOn: CheckOn }): AxisLeft {
+        return {
+            legend: data.checkOn,
+        };
+    }
+
     private static getCurveFor(data: { checkOn: CheckOn }): ChartCurve {
         if (data.checkOn === CheckOn.ResponseStatusCode) {
             return ChartCurve.STEP_AFTER;
@@ -132,7 +172,11 @@ export class MonitorCharts {
                 min: 0,
                 max: 600,
             };
-        }else if (data.checkOn === CheckOn.DiskUsagePercent || data.checkOn === CheckOn.MemoryUsagePercent || data.checkOn === CheckOn.CPUUsagePercent) {
+        } else if (
+            data.checkOn === CheckOn.DiskUsagePercent ||
+            data.checkOn === CheckOn.MemoryUsagePercent ||
+            data.checkOn === CheckOn.CPUUsagePercent
+        ) {
             return {
                 type: YScaleType.LINEAR,
                 min: 0,

diff --git a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChartTooltip.tsx
@@ -1,36 +1,28 @@
 import React, { FunctionComponent, ReactElement } from 'react';
-import { LineChartPoint } from 'CommonUI/src/Components/Charts/Line/LineChart';
+import { AxisBottom, AxisLeft, LineChartPoint } from 'CommonUI/src/Components/Charts/Line/LineChart';
 
 export interface ComponentProps {
     points: Array<LineChartPoint>;
-    xAxis: {
-        legend: string;
-        type:  
-    };
-    yAxis: {
-        legend: string;
-    };
+    axisBottom: AxisBottom;
+    axisLeft: AxisLeft;
 }
 
 const MonitorChartTooltip: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
 
-
-
-
     return (
         <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.yAxis.legend}</div>
+                        <div className="w-1/2 text-left font-medium">{props.axisLeft.legend}</div>
                         <div className="w-1/2 text-right">
                             {point.y.toString()}
                         </div>
                     </div>
                     <div className="flex">
-                        <div className="w-1/2 text-left font-medium">{props.xAxis.legend}</div>
+                        <div className="w-1/2 text-left font-medium">{props.axisBottom.legend}</div>
                         <div className="w-1/2 text-right">
                             {point.x.toString()}
                         </div>

diff --git a/Dashboard/src/Pages/Monitor/View/Index.tsx b/Dashboard/src/Pages/Monitor/View/Index.tsx
@@ -183,12 +183,12 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
                 });
 
             let monitorMetricsByMinute: AnalyticsListResult<MonitorMetricsByMinute> =
-            {
-                data: [],
-                count: 0,
-                limit: 0,
-                skip: 0,
-            };
+                {
+                    data: [],
+                    count: 0,
+                    limit: 0,
+                    skip: 0,
+                };
 
             if (!item) {
                 setError(`Monitor not found`);
@@ -378,15 +378,15 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
                                         color={
                                             (
                                                 item[
-                                                'currentMonitorStatus'
+                                                    'currentMonitorStatus'
                                                 ] as JSONObject
                                             )['color'] as Color
                                         }
                                         shouldAnimate={true}
                                         text={
                                             (
                                                 item[
-                                                'currentMonitorStatus'
+                                                    'currentMonitorStatus'
                                                 ] as JSONObject
                                             )['name'] as string
                                         }
@@ -416,7 +416,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
                                         labels={
                                             BaseModel.fromJSON(
                                                 (item['labels'] as JSONArray) ||
-                                                [],
+                                                    [],
                                                 Label
                                             ) as Array<Label>
                                         }
@@ -437,8 +437,8 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
 
             {/* Heartbeat URL */}
             {monitorType === MonitorType.IncomingRequest &&
-                monitor?.incomingRequestSecretKey &&
-                !monitor.incomingRequestReceivedAt ? (
+            monitor?.incomingRequestSecretKey &&
+            !monitor.incomingRequestReceivedAt ? (
                 <IncomingMonitorLink
                     secretKey={monitor?.incomingRequestSecretKey}
                 />
@@ -447,8 +447,8 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
             )}
 
             {monitorType === MonitorType.Server &&
-                monitor?.serverMonitorSecretKey &&
-                !monitor.serverMonitorRequestReceivedAt ? (
+            monitor?.serverMonitorSecretKey &&
+            !monitor.serverMonitorRequestReceivedAt ? (
                 <ServerMonitorDocumentation
                     secretKey={monitor?.serverMonitorSecretKey}
                 />