From 11cc2833cf478b71dd3a42b73609743ce748ca6e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:55:58 +0800
Subject: [PATCH] extract tooltip percentage formatting

---
 .../Components/Charts/Utils/chartUtils.jsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
index 0922d8b7d..043203525 100644
--- a/Client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -74,6 +74,22 @@ PercentTick.propTypes = {
 	index: PropTypes.number,
 };
 
+/**
+ * Converts a decimal value to a formatted percentage string.
+ *
+ * @param {number} value - The decimal value to convert (e.g., 0.75)
+ * @returns {string} Formatted percentage string (e.g., "75.00%") or original input if not a number
+ *
+ * @example
+ * getFormattedPercentage(0.7543)   // Returns "75.43%"
+ * getFormattedPercentage(1)        // Returns "100.00%"
+ * getFormattedPercentage("test")   // Returns "test"
+ */
+const getFormattedPercentage = (value) => {
+	if (typeof value !== "number") return value;
+	return `${(value * 100).toFixed(2)}.%`;
+};
+
 /**
  * Custom tooltip component for displaying infrastructure data.
  *
@@ -146,8 +162,8 @@ export const InfrastructureTooltip = ({
 							sx={{ opacity: 0.8 }}
 						>
 							{yIdx >= 0
-								? `${yLabel} ${(payload[0].payload[hardwareType][yIdx][metric] * 100).toFixed(2)}%`
-								: `${yLabel} ${(payload[0].payload[hardwareType][metric] * 100).toFixed(2)}%`}
+								? `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][yIdx][metric])}`
+								: `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][metric])}`}
 						</Typography>
 						<Typography component="span"></Typography>
 					</Stack>