From 4ef11daa51d4067da416a59ceecf187c0760a636 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 13 Feb 2025 14:49:50 -0800
Subject: [PATCH] Refactor out chart helpers

---
 .../Helpers/Tick.jsx                          | 31 +++++++
 .../Helpers/ToolTip.jsx                       | 86 +++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/Tick.jsx
 create mode 100644 Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx

diff --git a/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/Tick.jsx b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/Tick.jsx
new file mode 100644
index 000000000..15efd5dfa
--- /dev/null
+++ b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/Tick.jsx
@@ -0,0 +1,31 @@
+import { useTheme } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { formatDateWithTz } from "../../../../../../Utils/timeUtils";
+import PropTypes from "prop-types";
+import { Text } from "recharts";
+const CustomTick = ({ x, y, payload, index }) => {
+	const theme = useTheme();
+
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.text.tertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
+		</Text>
+	);
+};
+
+CustomTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+};
+
+export default CustomTick;
diff --git a/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx
new file mode 100644
index 000000000..db8cb3890
--- /dev/null
+++ b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx
@@ -0,0 +1,86 @@
+import { Box, Stack, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { formatDateWithTz } from "../../../../../../Utils/timeUtils";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+const CustomToolTip = ({ active, payload, label }) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const theme = useTheme();
+	if (active && payload && payload.length) {
+		const responseTime = payload[0]?.payload?.originalAvgResponseTime
+			? payload[0]?.payload?.originalAvgResponseTime
+			: (payload[0]?.payload?.avgResponseTime ?? 0);
+		return (
+			<Stack
+				className="area-tooltip"
+				sx={{
+					backgroundColor: theme.palette.primary.main,
+					border: 1,
+					borderColor: theme.palette.primary.lowContrast,
+					borderRadius: theme.shape.borderRadius,
+					py: theme.spacing(2),
+					px: theme.spacing(4),
+				}}
+			>
+				<Typography
+					sx={{
+						color: theme.palette.text.tertiary,
+						fontSize: 12,
+						fontWeight: 500,
+					}}
+				>
+					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+				</Typography>
+
+				<Stack
+					direction="row"
+					alignItems="end"
+					gap={theme.spacing(2)}
+					sx={{
+						"& span": {
+							color: theme.palette.text.tertiary,
+							fontSize: 11,
+							fontWeight: 500,
+						},
+					}}
+				>
+					<AccessTimeIcon fontSize="small" />
+
+					<Typography
+						component="span"
+						sx={{ opacity: 0.8 }}
+					>
+						Response time:
+					</Typography>
+					<Typography component="span">
+						{Math.floor(responseTime)}
+						<Typography
+							component="span"
+							sx={{ opacity: 0.8 }}
+						>
+							ms
+						</Typography>
+					</Typography>
+				</Stack>
+			</Stack>
+		);
+	}
+	return null;
+};
+
+CustomToolTip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.arrayOf(
+		PropTypes.shape({
+			value: PropTypes.number,
+			payload: PropTypes.shape({
+				_id: PropTypes.string,
+				avgResponseTime: PropTypes.number,
+				originalAvgResponseTime: PropTypes.number,
+			}),
+		})
+	),
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+export default CustomToolTip;