From e3c13d93ec6f05e6e9f37d0901e629decc9793e3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 13:40:52 +0800
Subject: [PATCH] Fix label proptype to allow for dates and numbers, add
 comments

---
 Client/src/Components/Charts/Utils/chartUtils.jsx | 6 +++++-
 Client/src/Pages/Infrastructure/details/index.jsx | 9 +++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
index 0d87421b8..ad673e472 100644
--- a/Client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -162,7 +162,11 @@ export const InfrastructureTooltip = ({
 InfrastructureTooltip.propTypes = {
 	active: PropTypes.bool,
 	payload: PropTypes.array,
-	label: PropTypes.string,
+	label: PropTypes.oneOfType([
+		PropTypes.instanceOf(Date),
+		PropTypes.string,
+		PropTypes.number,
+	]),
 	yKey: PropTypes.string,
 	yIdx: PropTypes.number,
 	yLabel: PropTypes.string,
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index 783db2040..2922a20e9 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -186,7 +186,7 @@ const InfrastructureDetails = () => {
 						yKey="memory.usage_percent"
 						customTooltip={({ active, payload, label }) => (
 							<InfrastructureTooltip
-								label={label?.toString() ?? ""}
+								label={label}
 								yKey="memory.usage_percent"
 								yLabel="Memory Usage"
 								active={active}
@@ -207,7 +207,7 @@ const InfrastructureDetails = () => {
 						yKey="cpu.usage_percent"
 						customTooltip={({ active, payload, label }) => (
 							<InfrastructureTooltip
-								label={label?.toString() ?? ""}
+								label={label}
 								yKey="cpu.usage_percent"
 								yLabel="CPU Usage"
 								active={active}
@@ -222,16 +222,17 @@ const InfrastructureDetails = () => {
 						gradientEndColor="#ffffff"
 					/>
 					{latestCheck.disk.map((disk, idx) => {
+						// disk is an array of disks, so we need to map over it
 						return (
 							<AreaChart
 								key={disk._id}
 								data={testData}
 								dataKey={`disk[${idx}].usage_percent`}
 								xKey="createdAt"
-								yKey={`disk[${idx}].usage_percent`}
+								yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
 								customTooltip={({ active, payload, label }) => (
 									<InfrastructureTooltip
-										label={label?.toString() ?? ""}
+										label={label} // label must be a string
 										yKey={`disk.usage_percent`}
 										yLabel="Disk Usage"
 										yIdx={idx}