From e7cf127fde4c10af20063f29b9cf2a84c8cffd49 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 1 Jan 2025 17:20:00 -0800
Subject: [PATCH] Fix tooltip and proptypes

---
 .../Charts/MonitorDetailsAreaChart/index.jsx  | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 947f776a4..980d72c23 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -20,6 +20,9 @@ const CustomToolTip = ({ active, payload, label }) => {
 	const dateFormat = label?.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
 	const theme = useTheme();
 	if (active && payload && payload.length) {
+		const responseTime = payload[0]?.payload?.originalAvgResponseTime
+			? payload[0]?.payload?.originalAvgResponseTime
+			: (payload[0]?.payload?.avgResponseTime ?? 0);
 		return (
 			<Box
 				className="area-tooltip"
@@ -73,7 +76,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 							Response Time
 						</Typography>{" "}
 						<Typography component="span">
-							{Math.floor(payload[0].payload.originalAvgResponseTime)}
+							{Math.floor(responseTime)}
 							<Typography
 								component="span"
 								sx={{ opacity: 0.8 }}
@@ -95,15 +98,16 @@ CustomToolTip.propTypes = {
 	active: PropTypes.bool,
 	payload: PropTypes.arrayOf(
 		PropTypes.shape({
+			value: PropTypes.number,
 			payload: PropTypes.shape({
-				_id: PropTypes.string.isRequired, // Add this line to validate _id
-				originalResponseTime: PropTypes.number.isRequired,
-			}).isRequired,
+				_id: PropTypes.string,
+				avgResponseTime: PropTypes.number,
+				originalAvgResponseTime: PropTypes.number,
+			}),
 		})
 	),
 	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
-
 const CustomTick = ({ x, y, payload, index }) => {
 	const theme = useTheme();
 
@@ -215,15 +219,4 @@ MonitorDetailsAreaChart.propTypes = {
 	checks: PropTypes.array,
 };
 
-CustomToolTip.propTypes = {
-	active: PropTypes.bool,
-	payload: PropTypes.arrayOf(
-		PropTypes.shape({
-			payload: PropTypes.shape({
-				originalAvgResponseTime: PropTypes.number,
-			}).isRequired,
-		})
-	),
-	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
 export default MonitorDetailsAreaChart;