From b1dfa0f1c010b8a8575726e952dcde30fa3a40f3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 13 Feb 2025 14:48:07 -0800
Subject: [PATCH] refactor area chart

---
 .../Area/index.jsx                            | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Area/index.jsx

diff --git a/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Area/index.jsx b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Area/index.jsx
new file mode 100644
index 000000000..ac6b770ac
--- /dev/null
+++ b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Area/index.jsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { useTheme } from "@emotion/react";
+import {
+	AreaChart,
+	Area,
+	XAxis,
+	Tooltip,
+	CartesianGrid,
+	ResponsiveContainer,
+} from "recharts";
+import CustomTick from "../Helpers/Tick";
+import CustomToolTip from "../Helpers/ToolTip";
+import PropTypes from "prop-types";
+
+const DistributedUptimeResponseAreaChart = ({ checks }) => {
+	const theme = useTheme();
+	const [isHovered, setIsHovered] = useState(false);
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={25}
+			height={220}
+		>
+			<AreaChart
+				width="100%"
+				height="100%"
+				data={checks}
+				margin={{
+					top: 10,
+					right: 0,
+					left: 0,
+					bottom: 0,
+				}}
+				onMouseMove={() => setIsHovered(true)}
+				onMouseLeave={() => setIsHovered(false)}
+			>
+				<CartesianGrid
+					stroke={theme.palette.primary.lowContrast}
+					strokeWidth={1}
+					strokeOpacity={1}
+					fill="transparent"
+					vertical={false}
+				/>
+				<defs>
+					<linearGradient
+						id="colorUv"
+						x1="0"
+						y1="0"
+						x2="0"
+						y2="1"
+					>
+						<stop
+							offset="0%"
+							stopColor={theme.palette.accent.darker}
+							stopOpacity={0.8}
+						/>
+						<stop
+							offset="100%"
+							stopColor={theme.palette.accent.main}
+							stopOpacity={0}
+						/>
+					</linearGradient>
+				</defs>
+				<XAxis
+					stroke={theme.palette.primary.lowContrast}
+					dataKey="_id"
+					tick={<CustomTick />}
+					minTickGap={0}
+					axisLine={false}
+					tickLine={false}
+					height={20}
+				/>
+				<Tooltip
+					cursor={{ stroke: theme.palette.primary.lowContrast }}
+					content={<CustomToolTip />}
+					wrapperStyle={{ pointerEvents: "none" }}
+				/>
+				<Area
+					type="monotone"
+					dataKey="avgResponseTime"
+					stroke={theme.palette.primary.accent}
+					fill="url(#colorUv)"
+					strokeWidth={isHovered ? 2.5 : 1.5}
+					activeDot={{ stroke: theme.palette.background.main, r: 5 }}
+				/>
+			</AreaChart>
+		</ResponsiveContainer>
+	);
+};
+
+DistributedUptimeResponseAreaChart.propTypes = {
+	checks: PropTypes.array,
+};
+
+export default DistributedUptimeResponseAreaChart;