diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
new file mode 100644
index 000000000..0d87421b8
--- /dev/null
+++ b/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 (
+
+ {formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
+
+ );
+};
+
+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 (
+
+ {`${payload?.value * 100}%`}
+
+ );
+};
+
+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 (
+
+
+ {formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+
+
+
+
+
+ {yIdx >= 0
+ ? `${yLabel} ${payload[0].payload[hardwareType][yIdx][metric] * 100}%`
+ : `${yLabel} ${payload[0].payload[hardwareType][metric] * 100}%`}
+
+
+
+
+ {/* Display original value */}
+
+ );
+ }
+ 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,
+};
diff --git a/Client/src/Components/Charts/Utils/gradientUtils.jsx b/Client/src/Components/Charts/Utils/gradientUtils.jsx
new file mode 100644
index 000000000..ef967b7ed
--- /dev/null
+++ b/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"
+}) => (
+
+
+
+
+
+
+);