Handle NaN values in CircularProgress and UsageBox components

MatinDehghanian · Dec 16, 2024 · df03d1c · df03d1c
1 parent 665bee2
commit df03d1c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/CircularWithValueLabel.jsx b/src/components/CircularWithValueLabel.jsx
@@ -22,7 +22,7 @@ function CircularProgressWithLabel({ value }) {
   );
 
   const getStyles = (value) => {
-    if (value === Infinity) {
+    if (value === Infinity || Number.isNaN(value)) {
       return {
         gradientColors: theme.colors.gradients.high.colors[theme.palette.mode],
         backgroundColor: theme.colors.gradients.high.background,
@@ -52,7 +52,9 @@ function CircularProgressWithLabel({ value }) {
   };
 
   const processedValue =
-    value === Infinity ? Infinity : value > 100 ? 100 : value > 0 ? value : 0;
+    value === Infinity || isNaN(value)
+      ? Infinity
+      : Math.max(0, Math.min(value, 100));
 
   const { gradientColors, backgroundColor, typographyGradient } =
     getStyles(value);
@@ -61,7 +63,7 @@ function CircularProgressWithLabel({ value }) {
     <Box sx={{ position: "relative", display: "inline-flex" }}>
       <CircularProgress
         variant="determinate"
-        value={processedValue}
+        value={processedValue === Infinity ? 100 : processedValue}
         size={85}
         sx={{
           color: "transparent",

diff --git a/src/components/UsageBox.jsx b/src/components/UsageBox.jsx
@@ -16,7 +16,7 @@ const UsageBox = ({ type, value, total, remaining }) => {
   };
 
   const getTypographyGradient = (v) => {
-    if (v === Infinity) {
+    if (v === Infinity || Number.isNaN(v)) {
       return `linear-gradient(0deg, ${theme.palette.success.main}, ${theme.palette.success.dark})`;
     } else if (v <= 30) {
       return `linear-gradient(0deg, ${theme.palette.success.main}, ${theme.palette.success.dark})`;