Refactor date format lookup to util functions, refactor x-axis for infra details charts

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -13,15 +13,14 @@ import { useTheme } from "@emotion/react";
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
+import {
+	tooltipDateFormatLookup,
+	tickDateFormatLookup,
+} from "../Utils/chartUtilFunctions";
+
 import "./index.css";
-// ddd, MMMM D, YYYY, h:mm A
 const CustomToolTip = ({ active, payload, label, dateRange }) => {
-	const formatLookup = {
-		day: "ddd. MMMM D, YYYY, hh:mm A",
-		week: "ddd. MMMM D, YYYY, hh:mm A",
-		month: "ddd. MMMM D, YYYY",
-	};
-	const format = formatLookup[dateRange];
+	const format = tooltipDateFormatLookup(dateRange);
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	const theme = useTheme();
 	if (active && payload && payload.length) {
@@ -111,12 +110,7 @@ CustomToolTip.propTypes = {
 	dateRange: PropTypes.string,
 };
 const CustomTick = ({ x, y, payload, index, dateRange }) => {
-	const formatLookup = {
-		day: "h:mm A",
-		week: "MM/D, h:mm A",
-		month: "ddd. M/D",
-	};
-	const format = formatLookup[dateRange];
+	const format = tickDateFormatLookup(dateRange);
 	const theme = useTheme();
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	return (

Client/src/Components/Charts/Utils/chartUtilFunctions.js

@@ -0,0 +1,25 @@
+export const tooltipDateFormatLookup = (dateRange) => {
+	const dateFormatLookup = {
+		day: "ddd. MMMM D, YYYY, hh:mm A",
+		week: "ddd. MMMM D, YYYY, hh:mm A",
+		month: "ddd. MMMM D, YYYY",
+	};
+	const format = dateFormatLookup[dateRange];
+	if (format === undefined) {
+		return "";
+	}
+	return format;
+};
+
+export const tickDateFormatLookup = (dateRange) => {
+	const tickFormatLookup = {
+		day: "h:mm A",
+		week: "MM/D, h:mm A",
+		month: "ddd. M/D",
+	};
+	const format = tickFormatLookup[dateRange];
+	if (format === undefined) {
+		return "";
+	}
+	return format;
+};

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

@@ -4,7 +4,7 @@ import { useTheme } from "@mui/material";
 import { Text } from "recharts";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import { Box, Stack, Typography } from "@mui/material";
-
+import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions";
 /**
  * Custom tick component for rendering time with timezone.
  *
@@ -15,9 +15,10 @@ import { Box, Stack, Typography } from "@mui/material";
  * @param {number} props.index - The index of the tick.
  * @returns {JSX.Element} The rendered tick component.
  */
-export const TzTick = ({ x, y, payload, index }) => {
+export const TzTick = ({ x, y, payload, index, dateRange }) => {
 	const theme = useTheme();
 	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const format = tickDateFormatLookup(dateRange);
 	return (
 		<Text
 			x={x}
@@ -27,7 +28,7 @@ export const TzTick = ({ x, y, payload, index }) => {
 			fontSize={11}
 			fontWeight={400}
 		>
-			{formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
 		</Text>
 	);
 };
@@ -37,6 +38,7 @@ TzTick.propTypes = {
 	y: PropTypes.number,
 	payload: PropTypes.object,
 	index: PropTypes.number,
+	dateRange: PropTypes.string,
 };
 
 /**
@@ -109,9 +111,12 @@ export const InfrastructureTooltip = ({
 	yIdx = -1,
 	yLabel,
 	dotColor,
+	dateRange,
 }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	const theme = useTheme();
+
+	const format = tooltipDateFormatLookup(dateRange);
 	if (active && payload && payload.length) {
 		const [hardwareType, metric] = yKey.split(".");
 		return (
@@ -133,7 +138,7 @@ export const InfrastructureTooltip = ({
 						fontWeight: 500,
 					}}
 				>
-					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+					{formatDateWithTz(label, format, uiTimezone)}
 				</Typography>
 				<Box mt={theme.spacing(1)}>
 					<Box
@@ -185,11 +190,20 @@ InfrastructureTooltip.propTypes = {
 	yIdx: PropTypes.number,
 	yLabel: PropTypes.string,
 	dotColor: PropTypes.string,
+	dateRange: PropTypes.string,
 };
 
-export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) => {
+export const TemperatureTooltip = ({
+	active,
+	payload,
+	label,
+	keys,
+	dotColor,
+	dateRange,
+}) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	const theme = useTheme();
+	const format = tooltipDateFormatLookup(dateRange);
 	const formatCoreKey = (key) => {
 		return key.replace(/^core(\d+)$/, "Core $1");
 	};
@@ -213,7 +227,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
 						fontWeight: 500,
 					}}
 				>
-					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+					{formatDateWithTz(label, format, uiTimezone)}
 				</Typography>
 
 				<Stack direction="column">
@@ -273,4 +287,6 @@ TemperatureTooltip.propTypes = {
 		PropTypes.string,
 		PropTypes.number,
 	]),
+	dotColor: PropTypes.string,
+	dateRange: PropTypes.string,
 };

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -13,9 +13,8 @@ import { useNavigate } from "react-router-dom";
 import Empty from "./empty";
 import { logger } from "../../../Utils/Logger";
 import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
+import { TzTick, PercentTick } from "../../../Components/Charts/Utils/chartUtils";
 import {
-	TzTick,
-	PercentTick,
 	InfrastructureTooltip,
 	TemperatureTooltip,
 } from "../../../Components/Charts/Utils/chartUtils";
@@ -414,12 +413,13 @@ const InfrastructureDetails = () => {
 				yLabel: "Memory usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
-				xTick: <TzTick />,
+				xTick: <TzTick dateRange={dateRange} />,
 				toolTip: (
 					<InfrastructureTooltip
 						dotColor={theme.palette.primary.main}
 						yKey={"avgMemoryUsage"}
 						yLabel={"Memory usage"}
+						dateRange={dateRange}
 					/>
 				),
 			},
@@ -433,12 +433,13 @@ const InfrastructureDetails = () => {
 				yLabel: "CPU usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
-				xTick: <TzTick />,
+				xTick: <TzTick dateRange={dateRange} />,
 				toolTip: (
 					<InfrastructureTooltip
 						dotColor={theme.palette.success.main}
 						yKey={"avgCpuUsage"}
 						yLabel={"CPU usage"}
+						dateRange={dateRange}
 					/>
 				),
 			},
@@ -450,7 +451,7 @@ const InfrastructureDetails = () => {
 				gradientStartColor: theme.palette.error.main,
 				heading: "CPU Temperature",
 				yLabel: "Temperature",
-				xTick: <TzTick />,
+				xTick: <TzTick dateRange={dateRange} />,
 				yDomain: [
 					0,
 					Math.max(
@@ -462,6 +463,7 @@ const InfrastructureDetails = () => {
 					<TemperatureTooltip
 						keys={tempKeys}
 						dotColor={theme.palette.error.main}
+						dateRange={dateRange}
 					/>
 				),
 			},
@@ -476,13 +478,14 @@ const InfrastructureDetails = () => {
 				yLabel: "Disk Usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
-				xTick: <TzTick />,
+				xTick: <TzTick dateRange={dateRange} />,
 				toolTip: (
 					<InfrastructureTooltip
 						dotColor={theme.palette.warning.main}
 						yKey={`disks.usagePercent`}
 						yLabel={"Disc usage"}
 						yIdx={idx}
+						dateRange={dateRange}
 					/>
 				),
 			})) || []),