add and update chartUtils

Client/src/Components/Charts/Utils/chartUtils.jsx

@@ -0,0 +1,170 @@
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useTheme } from "@mui/material";
+import { Text } from "recharts";
+import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { Box, Stack, Typography } from "@mui/material";
+
+/**
+ * Custom tick component for rendering time with timezone.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element} The rendered tick component.
+ */
+export const TzTick = ({ 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>
+	);
+};
+
+TzTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+};
+
+/**
+ * Custom tick component for rendering percentage values.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element|null} The rendered tick component or null for the first tick.
+ */
+export const PercentTick = ({ x, y, payload, index }) => {
+	const theme = useTheme();
+	if (index === 0) return null;
+	return (
+		<Text
+			x={x - 20}
+			y={y}
+			textAnchor="middle"
+			fill={theme.palette.text.tertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{`${payload?.value * 100}%`}
+		</Text>
+	);
+};
+
+PercentTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+};
+
+/**
+ * Custom tooltip component for displaying infrastructure data.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.active - Indicates if the tooltip is active.
+ * @param {Array} props.payload - The payload array containing tooltip data.
+ * @param {string} props.label - The label for the tooltip.
+ * @param {string} props.yKey - The key for the y-axis data.
+ * @param {string} props.yLabel - The label for the y-axis data.
+ * @param {string} props.dotColor - The color of the dot in the tooltip.
+ * @returns {JSX.Element|null} The rendered tooltip component or null if inactive.
+ */
+export const InfrastructureTooltip = ({
+	active,
+	payload,
+	label,
+	yKey,
+	yIdx = -1,
+	yLabel,
+	dotColor,
+}) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const theme = useTheme();
+	if (active && payload && payload.length) {
+		const [hardwareType, metric] = yKey.split(".");
+		return (
+			<Box
+				className="area-tooltip"
+				sx={{
+					backgroundColor: theme.palette.background.main,
+					border: 1,
+					borderColor: theme.palette.border.dark,
+					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={dotColor}
+						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 }}
+						>
+							{yIdx >= 0
+								? `${yLabel} ${payload[0].payload[hardwareType][yIdx][metric] * 100}%`
+								: `${yLabel} ${payload[0].payload[hardwareType][metric] * 100}%`}
+						</Typography>
+						<Typography component="span"></Typography>
+					</Stack>
+				</Box>
+				{/* Display original value */}
+			</Box>
+		);
+	}
+	return null;
+};
+
+InfrastructureTooltip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.array,
+	label: PropTypes.string,
+	yKey: PropTypes.string,
+	yIdx: PropTypes.number,
+	yLabel: PropTypes.string,
+	dotColor: PropTypes.string,
+};

Client/src/Components/Charts/Utils/gradientUtils.jsx

@@ -0,0 +1,47 @@
+/**
+ * Creates an SVG gradient definition for use in charts
+ * @param {Object} params - The gradient parameters
+ * @param {string} [params.id="colorUv"] - Unique identifier for the gradient
+ * @param {string} params.startColor - Starting color of the gradient (hex, rgb, or color name)
+ * @param {string} params.endColor - Ending color of the gradient (hex, rgb, or color name)
+ * @param {number} [params.startOpacity=0.8] - Starting opacity (0-1)
+ * @param {number} [params.endOpacity=0] - Ending opacity (0-1)
+ * @param {('vertical'|'horizontal')} [params.direction="vertical"] - Direction of the gradient
+ * @returns {JSX.Element} SVG gradient definition element
+ * @example
+ * createCustomGradient({
+ *   startColor: "#1976D2",
+ *   endColor: "#42A5F5",
+ *   direction: "horizontal"
+ * })
+ */
+
+export const createGradient = ({
+	id = "colorUv",
+	startColor,
+	endColor,
+	startOpacity = 0.8,
+	endOpacity = 0,
+	direction = "vertical", // or "horizontal"
+}) => (
+	<defs>
+		<linearGradient
+			id={id}
+			x1={direction === "vertical" ? "0" : "0"}
+			y1={direction === "vertical" ? "0" : "0"}
+			x2={direction === "vertical" ? "0" : "1"}
+			y2={direction === "vertical" ? "1" : "0"}
+		>
+			<stop
+				offset="0%"
+				stopColor={startColor}
+				stopOpacity={startOpacity}
+			/>
+			<stop
+				offset="100%"
+				stopColor={endColor}
+				stopOpacity={endOpacity}
+			/>
+		</linearGradient>
+	</defs>
+);