From 50c1896cfa3e5299c6817b8398acbe8f2ef5138b Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Tue, 29 Oct 2024 10:24:03 -0400 Subject: [PATCH 01/12] - Create Gauge component --- Client/src/Components/Charts/Gauge/index.jsx | 77 ++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 Client/src/Components/Charts/Gauge/index.jsx diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx new file mode 100644 index 000000000..5743049bb --- /dev/null +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -0,0 +1,77 @@ +import React from "react"; +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 = { + textAnchor: "middle", + dominantBaseline: "middle", + style: myStyle + }; + const data = [{ value: 100 }]; + return ( + + + + + + {`${progressValue}%`} + + + {`${displayText}`} + + + + ); +}; + +Gauge.propTypes = { + progressValue: PropTypes.string, + displayText: PropTypes.string, + theme: PropTypes.object, +}; +export default Gauge; From fe5f2af6496f81fe706bfe0d49ecb2a94fbf59dd Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Tue, 29 Oct 2024 14:03:41 -0400 Subject: [PATCH 02/12] - Update based on coderabbitai feedback --- Client/src/Components/Charts/Gauge/index.jsx | 42 ++++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index 5743049bb..1c65ba322 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/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 ( { data={data} > { {`${progressValue}%`} {`${displayText}`} @@ -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; From 09ba21245c4bc9a20ac3acf79d362127e2a1b95d Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Tue, 29 Oct 2024 14:55:35 -0400 Subject: [PATCH 03/12] - Update css font/color based on figma --- Client/src/Components/Charts/Gauge/index.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index 1c65ba322..26fa5f73b 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -10,7 +10,8 @@ const Gauge = ({ progressValue, displayText, theme }) => { const getStyles = (theme) => ({ text: { ...BASE_TEXT_STYLE, - style: { fontSize: "12px", fill: theme.palette.text.tertiary }, + style: { fontSize: "11px", fontWeight: 400, fill: theme.palette.text.tertiary + }, }, }); const data = [{ value: 100 }]; @@ -36,8 +37,8 @@ const Gauge = ({ progressValue, displayText, theme }) => { > { x="50%" y="55%" {...getStyles(theme).text} + style={{fontSize: 9 }} > {`${displayText}`} From 5e54f5c75763e49a3efb630e7baabf71a483f0c1 Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Tue, 29 Oct 2024 21:35:58 -0400 Subject: [PATCH 04/12] - 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 ( - + { > 50 + ? theme.palette.primary.main + : theme.palette.percentage.uptimePoor + } + background={{ fill: theme.palette.background.fill }} data={[{ value: progressValue }]} /> { {`${progressValue}%`} {`${displayText}`} 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: { From a2d31124ff9b4ff46c7414363effc78e0850113f Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Fri, 1 Nov 2024 11:06:25 -0400 Subject: [PATCH 05/12] - 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 ( - + { {`${progressValue}%`} {`${displayText}`} @@ -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: { From b3892759639e12c9820bf5a293d85fbb373073b8 Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Fri, 1 Nov 2024 13:39:02 -0400 Subject: [PATCH 06/12] - update based on review 1. Extract out all hardcoded values to consts 2. Add arial labels to text 3. Handle error boundary when progressValue is not within 0 -100 --- Client/src/Components/Charts/Gauge/index.jsx | 75 ++++++++++++-------- 1 file changed, 47 insertions(+), 28 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index baa5b13e7..f173c17fb 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -2,14 +2,38 @@ import React from "react"; import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts"; import PropTypes from "prop-types"; -const data = [{ value: 100 }]; -const commonRadialBarProps = { +const DATA = [{ value: 100 }]; +const PRGRESS_THRESHOLD = 50; +const DEFAULT_CONTAINER_HEIGHT = 160; +const DEFAULT_HEADER_FONT = { fontSize: "11px" }; +const DEFAULT_SUBHEADER_FONT = { fontSize: "9px" }; +const TEXT_POSITIONS = { + value: { x: "50%", y: "45%" }, + label: { x: "50%", y: "55%" }, +}; +const COMMON_RADIALBAR_PROPS = { minAngle: 15, clockWise: true, dataKey: "value", cornerRadius: 0, }; +const RADIALBARCHART_PROPS = { + cx: "50%", + cy: "50%", + innerRadius: "45%", + outerRadius: "100%", + startAngle: 90, + endAngle: -270, +}; + +const RADIALBAR_OVERLAY_PROPS = { + transform: "rotate(180deg)", + position: "absolute", + top: "0", + left: "0", +}; + const Gauge = ({ progressValue, displayText, @@ -18,49 +42,44 @@ const Gauge = ({ gaugeHeader, gaugeSubheader, }) => { - const header = gaugeHeader ?? { fontSize: "11px" }; - const subheader = gaugeSubheader ?? { fontSize: "9px" }; + const header = gaugeHeader ?? DEFAULT_HEADER_FONT; + const subheader = gaugeSubheader ?? DEFAULT_SUBHEADER_FONT; + const myProgressValue = + progressValue < 0 ? 0 : progressValue > DATA[0].value ? DATA[0].value : progressValue; + return ( - + 50 + progressValue > PRGRESS_THRESHOLD ? theme.palette.primary.main : theme.palette.percentage.uptimePoor } background={{ fill: theme.palette.background.fill }} - data={[{ value: progressValue }]} + data={[{ value: myProgressValue }]} /> - {`${progressValue}%`} + {`${myProgressValue}%`} {`${displayText}`} From 4939428d2b4ee7822c5f46c6860e105003e90ea3 Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Fri, 1 Nov 2024 13:44:55 -0400 Subject: [PATCH 07/12] fix typo --- Client/src/Components/Charts/Gauge/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index f173c17fb..8f34084fc 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -3,7 +3,7 @@ import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts"; import PropTypes from "prop-types"; const DATA = [{ value: 100 }]; -const PRGRESS_THRESHOLD = 50; +const PROGRESS_THRESHOLD = 50; const DEFAULT_CONTAINER_HEIGHT = 160; const DEFAULT_HEADER_FONT = { fontSize: "11px" }; const DEFAULT_SUBHEADER_FONT = { fontSize: "9px" }; @@ -56,7 +56,7 @@ const Gauge = ({ PRGRESS_THRESHOLD + progressValue > PROGRESS_THRESHOLD ? theme.palette.primary.main : theme.palette.percentage.uptimePoor } From fb458b279dc511cedb60911469e53fd2c0548ccb Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Tue, 5 Nov 2024 10:33:20 -0500 Subject: [PATCH 08/12] - Replace theme param with useTheme - Remove used import - use Clamp to check value boundary - Naming changes --- Client/src/Components/Charts/Gauge/index.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index 8f34084fc..febbe222b 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -1,12 +1,14 @@ -import React from "react"; import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts"; import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; -const DATA = [{ value: 100 }]; +const MINIMUM_VALUE = 0 ; +const MAXIMUM_VALUE = 100 ; +const DATA = [{ value: MAXIMUM_VALUE }]; const PROGRESS_THRESHOLD = 50; const DEFAULT_CONTAINER_HEIGHT = 160; -const DEFAULT_HEADER_FONT = { fontSize: "11px" }; -const DEFAULT_SUBHEADER_FONT = { fontSize: "9px" }; +const DEFAULT_HEADER = { fontSize: "11px" }; +const DEFAULT_SUBHEADER = { fontSize: "9px" }; const TEXT_POSITIONS = { value: { x: "50%", y: "45%" }, label: { x: "50%", y: "55%" }, @@ -37,15 +39,14 @@ const RADIALBAR_OVERLAY_PROPS = { const Gauge = ({ progressValue, displayText, - theme, containerHeight, gaugeHeader, gaugeSubheader, }) => { - const header = gaugeHeader ?? DEFAULT_HEADER_FONT; - const subheader = gaugeSubheader ?? DEFAULT_SUBHEADER_FONT; - const myProgressValue = - progressValue < 0 ? 0 : progressValue > DATA[0].value ? DATA[0].value : progressValue; + const theme = useTheme(); + const header = gaugeHeader ?? DEFAULT_HEADER; + const subheader = gaugeSubheader ?? DEFAULT_SUBHEADER; + const myProgressValue = Math.max(MINIMUM_VALUE, Math.min(progressValue, MAXIMUM_VALUE)); return ( @@ -92,7 +93,6 @@ const Gauge = ({ Gauge.propTypes = { progressValue: PropTypes.number.isRequired, displayText: PropTypes.string.isRequired, - theme: PropTypes.object.isRequired, containerHeight: PropTypes.number, gaugeHeader: PropTypes.object, gaugeSubheader: PropTypes.object, From 94e4d1b1cb9497d56bca5c59a3734595bffb57bd Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Wed, 6 Nov 2024 12:48:01 -0500 Subject: [PATCH 09/12] - move font size and color to theme - move Gauge specific props back to component --- Client/src/Components/Charts/Gauge/index.jsx | 13 +++++++------ Client/src/Utils/Theme/darkTheme.js | 11 ++++++++++- Client/src/Utils/Theme/lightTheme.js | 15 +++++++++++---- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index febbe222b..e324a4dcc 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -7,8 +7,6 @@ const MAXIMUM_VALUE = 100 ; const DATA = [{ value: MAXIMUM_VALUE }]; const PROGRESS_THRESHOLD = 50; const DEFAULT_CONTAINER_HEIGHT = 160; -const DEFAULT_HEADER = { fontSize: "11px" }; -const DEFAULT_SUBHEADER = { fontSize: "9px" }; const TEXT_POSITIONS = { value: { x: "50%", y: "45%" }, label: { x: "50%", y: "55%" }, @@ -36,6 +34,11 @@ const RADIALBAR_OVERLAY_PROPS = { left: "0", }; +const COMMON_HEADER_PROPS = { + textAnchor: "middle", + dominantBaseline: "middle", +}; + const Gauge = ({ progressValue, displayText, @@ -44,8 +47,6 @@ const Gauge = ({ gaugeSubheader, }) => { const theme = useTheme(); - const header = gaugeHeader ?? DEFAULT_HEADER; - const subheader = gaugeSubheader ?? DEFAULT_SUBHEADER; const myProgressValue = Math.max(MINIMUM_VALUE, Math.min(progressValue, MAXIMUM_VALUE)); return ( @@ -73,7 +74,7 @@ const Gauge = ({ {...TEXT_POSITIONS.value} role="text" aria-label={`${myProgressValue}%`} - style={{ ...theme.palette.gaugeHeaderCommon, ...header }} + style={{...COMMON_HEADER_PROPS, ...theme.chart.header, ...gaugeHeader }} > {`${myProgressValue}%`} @@ -81,7 +82,7 @@ const Gauge = ({ {...TEXT_POSITIONS.label} role="text" aria-label={`${displayText}`} - style={{ ...theme.palette.gaugeHeaderCommon, ...subheader }} + style={{...COMMON_HEADER_PROPS, ...theme.chart.subheader, ...gaugeSubheader }} > {`${displayText}`} diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index ec5d352cd..72f7dba10 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -1,6 +1,5 @@ import { createTheme } from "@mui/material"; import { gaugeHeaderCommon } from "./lightTheme" -export { gaugeHeaderCommon } const text = { primary: "#fafafa", @@ -31,6 +30,16 @@ const darkTheme = createTheme({ body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 }, body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, }, + chart: { + header :{ + ...gaugeHeaderCommon, + fontSize: 11, + }, + subheader :{ + ...gaugeHeaderCommon, + fontSize: 9 + } + }, palette: { mode: "dark", primary: { main: "#1570ef" }, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index ae61a35aa..8ea1e285b 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -15,9 +15,7 @@ const background = { export const gaugeHeaderCommon = { fontWeight: 400, - fill: text.tertiary, - textAnchor: "middle", - dominantBaseline: "middle", + fill: text.tertiary } const border = { light: "#eaecf0", dark: "#d0d5dd" }; @@ -36,11 +34,20 @@ const lightTheme = createTheme({ body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 }, body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, }, + chart: { + header :{ + ...gaugeHeaderCommon, + fontSize: 11, + }, + subheader :{ + ...gaugeHeaderCommon, + fontSize: 9 + } + }, palette: { primary: { main: "#1570EF" }, secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" }, text: text, - gaugeHeaderCommon: gaugeHeaderCommon, background: background, border: border, info: { From 00ee054ab27cca735684f1385704afdf712f43cf Mon Sep 17 00:00:00 2001 From: Mend Renovate Date: Thu, 7 Nov 2024 00:12:48 +0000 Subject: [PATCH 10/12] fix(deps): update react-router monorepo to v6.28.0 --- Client/package-lock.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index ffe529997..145d2783b 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -1725,9 +1725,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", - "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", "license": "MIT", "engines": { "node": ">=14.0.0" @@ -5442,12 +5442,12 @@ } }, "node_modules/react-router": { - "version": "6.27.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", - "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.20.0" + "@remix-run/router": "1.21.0" }, "engines": { "node": ">=14.0.0" @@ -5457,13 +5457,13 @@ } }, "node_modules/react-router-dom": { - "version": "6.27.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", - "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.20.0", - "react-router": "6.27.0" + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" }, "engines": { "node": ">=14.0.0" From 19c06321439adb76e3ef258eba0c325c8342da0e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 7 Nov 2024 10:34:01 +0800 Subject: [PATCH 11/12] decoupled light and dark theme --- Client/src/Utils/Theme/darkTheme.js | 17 +++++++++-------- Client/src/Utils/Theme/lightTheme.js | 19 ++++++++----------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 72f7dba10..6eca20aa3 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -1,5 +1,4 @@ import { createTheme } from "@mui/material"; -import { gaugeHeaderCommon } from "./lightTheme" const text = { primary: "#fafafa", @@ -31,15 +30,17 @@ const darkTheme = createTheme({ body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, }, chart: { - header :{ - ...gaugeHeaderCommon, + header: { + fontWeight: 400, + fill: text.tertiary, fontSize: 11, }, - subheader :{ - ...gaugeHeaderCommon, - fontSize: 9 - } - }, + subheader: { + fontWeight: 400, + fill: text.tertiary, + fontSize: 9, + }, + }, palette: { mode: "dark", primary: { main: "#1570ef" }, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 8ea1e285b..e6335a062 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -13,11 +13,6 @@ const background = { accent: "#f9fafb", }; -export const gaugeHeaderCommon = { - fontWeight: 400, - fill: text.tertiary -} - const border = { light: "#eaecf0", dark: "#d0d5dd" }; const fontFamilyDefault = @@ -35,14 +30,16 @@ const lightTheme = createTheme({ body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, }, chart: { - header :{ - ...gaugeHeaderCommon, + header: { + fontWeight: 400, + fill: text.tertiary, fontSize: 11, }, - subheader :{ - ...gaugeHeaderCommon, - fontSize: 9 - } + subheader: { + fontWeight: 400, + fill: text.tertiary, + fontSize: 9, + }, }, palette: { primary: { main: "#1570EF" }, From da5ecb2b8354a4bfc22988679629d0aac781633c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 7 Nov 2024 10:52:19 +0800 Subject: [PATCH 12/12] Add JSdoc, add underscores to variables --- Client/src/Components/Charts/Gauge/index.jsx | 47 +++++++++++++++----- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index e324a4dcc..0ae872e3f 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -2,8 +2,8 @@ import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -const MINIMUM_VALUE = 0 ; -const MAXIMUM_VALUE = 100 ; +const MINIMUM_VALUE = 0; +const MAXIMUM_VALUE = 100; const DATA = [{ value: MAXIMUM_VALUE }]; const PROGRESS_THRESHOLD = 50; const DEFAULT_CONTAINER_HEIGHT = 160; @@ -11,14 +11,14 @@ const TEXT_POSITIONS = { value: { x: "50%", y: "45%" }, label: { x: "50%", y: "55%" }, }; -const COMMON_RADIALBAR_PROPS = { +const COMMON_RADIAL_BAR_PROPS = { minAngle: 15, clockWise: true, dataKey: "value", cornerRadius: 0, }; -const RADIALBARCHART_PROPS = { +const RADIAL_BAR_CHART_PROPS = { cx: "50%", cy: "50%", innerRadius: "45%", @@ -27,7 +27,7 @@ const RADIALBARCHART_PROPS = { endAngle: -270, }; -const RADIALBAR_OVERLAY_PROPS = { +const RADIAL_BAR_OVERLAY_PROPS = { transform: "rotate(180deg)", position: "absolute", top: "0", @@ -39,6 +39,29 @@ const COMMON_HEADER_PROPS = { dominantBaseline: "middle", }; +/** + * A circular gauge component that displays a progress value and text. + * The gauge fills based on the progress value and changes color at a 50% threshold. + * + * @component + * @param {Object} props - Component props + * @param {number} props.progressValue - The value to display in the gauge (0-100) + * @param {string} props.displayText - The text to display below the progress value + * @param {number} [props.containerHeight=160] - Height of the gauge container in pixels + * @param {Object} [props.gaugeHeader] - Custom styles to apply to the progress value text + * @param {Object} [props.gaugeSubheader] - Custom styles to apply to the display text + * + * @returns {JSX.Element} A circular gauge chart with progress value and text + * + * @example + * + */ const Gauge = ({ progressValue, displayText, @@ -46,17 +69,17 @@ const Gauge = ({ gaugeHeader, gaugeSubheader, }) => { - const theme = useTheme(); + const theme = useTheme(); const myProgressValue = Math.max(MINIMUM_VALUE, Math.min(progressValue, MAXIMUM_VALUE)); return ( PROGRESS_THRESHOLD ? theme.palette.primary.main @@ -66,15 +89,15 @@ const Gauge = ({ data={[{ value: myProgressValue }]} /> {`${myProgressValue}%`} @@ -82,7 +105,7 @@ const Gauge = ({ {...TEXT_POSITIONS.label} role="text" aria-label={`${displayText}`} - style={{...COMMON_HEADER_PROPS, ...theme.chart.subheader, ...gaugeSubheader }} + style={{ ...COMMON_HEADER_PROPS, ...theme.chart.subheader, ...gaugeSubheader }} > {`${displayText}`}