From a2d31124ff9b4ff46c7414363effc78e0850113f Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 1 Nov 2024 11:06:25 -0400
Subject: [PATCH] - Updated to use configurable gaugeHeader, gaugeSubheader and
 containerHeight etc

---
 Client/src/Components/Charts/Gauge/index.jsx | 22 +++++++++++++++-----
 Client/src/Utils/Theme/darkTheme.js          | 11 ++--------
 Client/src/Utils/Theme/lightTheme.js         | 11 ++--------
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx
index 5299a3421..baa5b13e7 100644
--- a/Client/src/Components/Charts/Gauge/index.jsx
+++ b/Client/src/Components/Charts/Gauge/index.jsx
@@ -7,12 +7,21 @@ const commonRadialBarProps = {
 	minAngle: 15,
 	clockWise: true,
 	dataKey: "value",
-	cornerRadius: 0
+	cornerRadius: 0,
 };
 
-const Gauge = ({ progressValue, displayText, theme }) => {
+const Gauge = ({
+	progressValue,
+	displayText,
+	theme,
+	containerHeight,
+	gaugeHeader,
+	gaugeSubheader,
+}) => {
+	const header = gaugeHeader ?? { fontSize: "11px" };
+	const subheader = gaugeSubheader ?? { fontSize: "9px" };
 	return (
-		<ResponsiveContainer>
+		<ResponsiveContainer height={containerHeight ?? 160}>
 			<RadialBarChart
 				cx="50%"
 				cy="50%"
@@ -45,14 +54,14 @@ const Gauge = ({ progressValue, displayText, theme }) => {
 				<text
 					x="50%"
 					y="45%"
-					style={theme.palette.gaugePercentageText}
+					style={{ ...theme.palette.gaugeHeaderCommon, ...header }}
 				>
 					{`${progressValue}%`}
 				</text>
 				<text
 					x="50%"
 					y="55%"
-					style={theme.palette.gaugeDisplayText}
+					style={{ ...theme.palette.gaugeHeaderCommon, ...subheader }}
 				>
 					{`${displayText}`}
 				</text>
@@ -65,5 +74,8 @@ Gauge.propTypes = {
 	progressValue: PropTypes.number.isRequired,
 	displayText: PropTypes.string.isRequired,
 	theme: PropTypes.object.isRequired,
+	containerHeight: PropTypes.number,
+	gaugeHeader: PropTypes.object,
+	gaugeSubheader: PropTypes.object,
 };
 export default Gauge;
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 756a8a11b..ec5d352cd 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -1,5 +1,6 @@
 import { createTheme } from "@mui/material";
-import { gaugeText } from "./lightTheme"
+import { gaugeHeaderCommon } from "./lightTheme"
+export { gaugeHeaderCommon }
 
 const text = {
 	primary: "#fafafa",
@@ -35,14 +36,6 @@ const darkTheme = createTheme({
 		primary: { main: "#1570ef" },
 		secondary: { main: "#2D2D33" },
 		text: text,
-		gaugePercentageText: {
-			...gaugeText,
-			fontSize: "11px"			
-		},
-		gaugeDisplayText: {
-			...gaugeText,
-			fontSize: "9px"
-		},
 		background: background,
 		border: border,
 		info: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 7b00079e5..ae61a35aa 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -13,7 +13,7 @@ const background = {
 	accent: "#f9fafb",
 };
 
-export const gaugeText = {
+export const gaugeHeaderCommon = {
 	fontWeight: 400,
 	fill: text.tertiary,
 	textAnchor: "middle",
@@ -40,14 +40,7 @@ const lightTheme = createTheme({
 		primary: { main: "#1570EF" },
 		secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
 		text: text,
-		gaugePercentageText: {
-			...gaugeText,
-			fontSize: "11px"			
-		},
-		gaugeDisplayText: {
-			...gaugeText,
-			fontSize: "9px"
-		},
+		gaugeHeaderCommon: gaugeHeaderCommon,
 		background: background,
 		border: border,
 		info: {