- Update based on coderabbitai feedback

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

@@ -3,13 +3,23 @@ import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 import PropTypes from "prop-types";
 
 const Gauge = ({ progressValue, displayText, theme }) => {
-	const myStyle = { fontSize: "12px", fill: theme.palette.text.tertiary };
-	const textStyle = {
+	const BASE_TEXT_STYLE = {
 		textAnchor: "middle",
 		dominantBaseline: "middle",
-		style: myStyle
 	};
+	const getStyles = (theme) => ({
+		text: {
+			...BASE_TEXT_STYLE,
+			style: { fontSize: "12px", fill: theme.palette.text.tertiary },
+		},
+	});
 	const data = [{ value: 100 }];
+	const commonRadialBarProps = {
+		minAngle: 15,
+		clockWise: true,
+		dataKey: "value",
+		cornerRadius: 0
+	};
 	return (
 		<ResponsiveContainer
 			width="100%"
@@ -25,19 +35,13 @@ const Gauge = ({ progressValue, displayText, theme }) => {
 				data={data}
 			>
 				<RadialBar
-					minAngle={15}
-					clockWise={true}
-					dataKey="value"
+					{...commonRadialBarProps}
 					fill="#8884d8"
 					background={{ fill: "#bed2ea" }}
-					cornerRadius={0}
-					data={[{ value: progressValue ?? 50 }]}
+					data={[{ value: progressValue }]}
 				/>
 				<RadialBar
-					minAngle={15}
-					clockWise={true}
-					dataKey="value"
-					cornerRadius={0}
+					{...commonRadialBarProps}
 					data={data}
 					style={{
 						transform: "rotate(180deg)",
@@ -49,18 +53,14 @@ const Gauge = ({ progressValue, displayText, theme }) => {
 				<text
 					x="50%"
 					y="45%"
-					textAnchor={textStyle.textAnchor}
-					dominantBaseline={textStyle.dominantBaseline}
-					style={textStyle.style}
+					{...getStyles(theme).text}
 				>
 					{`${progressValue}%`}
 				</text>
 				<text
 					x="50%"
 					y="55%"
-					textAnchor={textStyle.textAnchor}
-					dominantBaseline={textStyle.dominantBaseline}
-					style={textStyle.style}
+					{...getStyles(theme).text}
 				>
 					{`${displayText}`}
 				</text>
@@ -70,8 +70,8 @@ const Gauge = ({ progressValue, displayText, theme }) => {
 };
 
 Gauge.propTypes = {
-	progressValue: PropTypes.string,
-	displayText: PropTypes.string,
-	theme: PropTypes.object,
+	progressValue: PropTypes.number.isRequired,
+	displayText: PropTypes.string.isRequired,
+	theme: PropTypes.object.isRequired,
 };
 export default Gauge;