From 1cba45c537511118ff55f543ba7ae83cab757c56 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 13 Feb 2025 14:49:03 -0800
Subject: [PATCH] use new charts

---
 .../DistributedUptimeResponseChart/index.jsx  | 247 +++---------------
 1 file changed, 36 insertions(+), 211 deletions(-)

diff --git a/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx
index b57d0f9dc..88beb258d 100644
--- a/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx
+++ b/Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx
@@ -1,225 +1,50 @@
-import PropTypes from "prop-types";
-import {
-	AreaChart,
-	Area,
-	XAxis,
-	Tooltip,
-	CartesianGrid,
-	ResponsiveContainer,
-	Text,
-} from "recharts";
+//Components
+import { Stack, Switch, Typography } from "@mui/material";
+import { useState } from "react";
+import DistributedUptimeResponseAreaChart from "./Area";
+import DistributedUptimeResponseBarChart from "./Bar";
 import ChartBox from "../../../../../Components/Charts/ChartBox";
 import ResponseTimeIcon from "../../../../../assets/icons/response-time-icon.svg?react";
-import { Box, Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import { useState } from "react";
-import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../../../../Utils/timeUtils";
-
-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 (
-			<Box
-				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>
-				<Box mt={theme.spacing(1)}>
-					<Box
-						display="inline-block"
-						width={theme.spacing(4)}
-						height={theme.spacing(4)}
-						backgroundColor={theme.palette.primary.main}
-						sx={{ borderRadius: "50%" }}
-					/>
-					<Stack
-						display="inline-flex"
-						direction="row"
-						justifyContent="space-between"
-						ml={theme.spacing(3)}
-						sx={{
-							"& span": {
-								color: theme.palette.text.tertiary,
-								fontSize: 11,
-								fontWeight: 500,
-							},
-						}}
-					>
-						<Typography
-							component="span"
-							sx={{ opacity: 0.8 }}
-						>
-							Response time
-						</Typography>
-						<Typography
-							ml={theme.spacing(4)}
-							component="span"
-						>
-							{Math.floor(responseTime)}
-							<Typography
-								component="span"
-								sx={{ opacity: 0.8 }}
-							>
-								{" "}
-								ms
-							</Typography>
-						</Typography>
-					</Stack>
-				</Box>
-				{/* Display original value */}
-			</Box>
-		);
-	}
-	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]),
-};
-const CustomTick = ({ x, y, payload, index }) => {
-	const theme = useTheme();
-
-	const uiTimezone = useSelector((state) => state.ui.timezone);
-	// Render nothing for the first tick
-	if (index === 0) return null;
-	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,
-};
 
+// Utils
+import PropTypes from "prop-types";
 const DistributedUptimeResponseChart = ({ checks }) => {
-	const theme = useTheme();
-	const [isHovered, setIsHovered] = useState(false);
-
-	if (checks.length === 0) return null;
+	const [chartType, setChartType] = useState("bar");
+	let Chart = null;
+	if (chartType === "area") {
+		Chart = DistributedUptimeResponseAreaChart;
+	}
+	if (chartType === "bar") {
+		Chart = DistributedUptimeResponseBarChart;
+	}
 	return (
-		<ChartBox
-			icon={<ResponseTimeIcon />}
-			header="Response Times"
-			sx={{ padding: 0 }}
-		>
-			<ResponsiveContainer
-				width="100%"
-				minWidth={25}
-				height={220}
+		<Stack>
+			<Stack
+				direction="row"
+				alignItems="center"
 			>
-				<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>
-		</ChartBox>
+				<Typography>Bar</Typography>
+				<Switch
+					color="main"
+					value={chartType}
+					onChange={(e) => setChartType(e.target.checked ? "area" : "bar")}
+				/>
+				<Typography>Area</Typography>
+			</Stack>
+			<ChartBox
+				icon={<ResponseTimeIcon />}
+				header="Response Times"
+				sx={{ padding: 0 }}
+			>
+				<Chart checks={checks} />
+			</ChartBox>
+		</Stack>
 	);
 };
 
 DistributedUptimeResponseChart.propTypes = {
 	checks: PropTypes.array,
+	type: PropTypes.string,
 };
 
 export default DistributedUptimeResponseChart;