From 5e54f5c75763e49a3efb630e7baabf71a483f0c1 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 29 Oct 2024 21:35:58 -0400
Subject: [PATCH] - Move styles to theme - Use different color for above and
 below 50%

---
 Client/src/Components/Charts/Gauge/index.jsx | 44 ++++++++------------
 Client/src/Utils/Theme/darkTheme.js          |  9 ++++
 Client/src/Utils/Theme/lightTheme.js         | 16 +++++++
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx
index 26fa5f73b..5299a3421 100644
--- a/Client/src/Components/Charts/Gauge/index.jsx
+++ b/Client/src/Components/Charts/Gauge/index.jsx
@@ -2,30 +2,17 @@ import React from "react";
 import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 import PropTypes from "prop-types";
 
+const data = [{ value: 100 }];
+const commonRadialBarProps = {
+	minAngle: 15,
+	clockWise: true,
+	dataKey: "value",
+	cornerRadius: 0
+};
+
 const Gauge = ({ progressValue, displayText, theme }) => {
-	const BASE_TEXT_STYLE = {
-		textAnchor: "middle",
-		dominantBaseline: "middle",
-	};
-	const getStyles = (theme) => ({
-		text: {
-			...BASE_TEXT_STYLE,
-			style: { fontSize: "11px", fontWeight: 400, fill: theme.palette.text.tertiary				
-			 },
-		},
-	});
-	const data = [{ value: 100 }];
-	const commonRadialBarProps = {
-		minAngle: 15,
-		clockWise: true,
-		dataKey: "value",
-		cornerRadius: 0
-	};
 	return (
-		<ResponsiveContainer
-			width="100%"
-			height={150}
-		>
+		<ResponsiveContainer>
 			<RadialBarChart
 				cx="50%"
 				cy="50%"
@@ -37,8 +24,12 @@ const Gauge = ({ progressValue, displayText, theme }) => {
 			>
 				<RadialBar
 					{...commonRadialBarProps}
-					fill="#1570EF"
-					background={{ fill: "#CDE2FF" }}
+					fill={
+						progressValue > 50
+							? theme.palette.primary.main
+							: theme.palette.percentage.uptimePoor
+					}
+					background={{ fill: theme.palette.background.fill }}
 					data={[{ value: progressValue }]}
 				/>
 				<RadialBar
@@ -54,15 +45,14 @@ const Gauge = ({ progressValue, displayText, theme }) => {
 				<text
 					x="50%"
 					y="45%"
-					{...getStyles(theme).text}
+					style={theme.palette.gaugePercentageText}
 				>
 					{`${progressValue}%`}
 				</text>
 				<text
 					x="50%"
 					y="55%"
-					{...getStyles(theme).text}
-					style={{fontSize: 9 }}
+					style={theme.palette.gaugeDisplayText}
 				>
 					{`${displayText}`}
 				</text>
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index d182f0496..756a8a11b 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -1,4 +1,5 @@
 import { createTheme } from "@mui/material";
+import { gaugeText } from "./lightTheme"
 
 const text = {
 	primary: "#fafafa",
@@ -34,6 +35,14 @@ 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 d2bfafaf4..7b00079e5 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -12,6 +12,14 @@ const background = {
 	fill: "#F4F4F4",
 	accent: "#f9fafb",
 };
+
+export const gaugeText = {
+	fontWeight: 400,
+	fill: text.tertiary,
+	textAnchor: "middle",
+	dominantBaseline: "middle",
+}
+
 const border = { light: "#eaecf0", dark: "#d0d5dd" };
 
 const fontFamilyDefault =
@@ -32,6 +40,14 @@ const lightTheme = createTheme({
 		primary: { main: "#1570EF" },
 		secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
 		text: text,
+		gaugePercentageText: {
+			...gaugeText,
+			fontSize: "11px"			
+		},
+		gaugeDisplayText: {
+			...gaugeText,
+			fontSize: "9px"
+		},
 		background: background,
 		border: border,
 		info: {