From f4021e8cd5ebf28ca61679225ddea47e3ab8ac88 Mon Sep 17 00:00:00 2001
From: Aryaman Kumar Sharma <kumararyaman26@gmail.com>
Date: Tue, 25 Feb 2025 23:10:35 +0530
Subject: [PATCH] Feat: Empty View Component for Chart Boxes

---
 src/Components/Charts/ChartBox/EmptyView.jsx       | 14 ++++++--------
 .../Uptime/Details/Components/ChartBoxes/index.jsx |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/Components/Charts/ChartBox/EmptyView.jsx b/src/Components/Charts/ChartBox/EmptyView.jsx
index 4c5181b49..d980fbdb2 100644
--- a/src/Components/Charts/ChartBox/EmptyView.jsx
+++ b/src/Components/Charts/ChartBox/EmptyView.jsx
@@ -8,10 +8,9 @@ const EmptyView = ({
     icon,
     header,
     message = "No Data",
-    size = "h2",
-    borderRadiusRight = 4,
+    headingLevel = "h2",
     justifyContent = "flex-start",
-    height = "300px"
+    height = "100%"
 }) => {
     const theme = useTheme();
     return (
@@ -25,8 +24,8 @@ const EmptyView = ({
                 borderStyle: "solid",
                 borderColor: theme.palette.primary.lowContrast,
                 borderRadius: 2,
-                borderTopRightRadius: borderRadiusRight,
-                borderBottomRightRadius: borderRadiusRight,
+                borderTopRightRadius: 4,
+                borderBottomRightRadius: 4,
             }}
         >
             <Stack
@@ -37,7 +36,6 @@ const EmptyView = ({
                     justifyContent,
                     gap: theme.spacing(8),
                     height,
-                    minWidth: 250,
                     "& h2": {
                         color: theme.palette.primary.contrastTextSecondary,
                         fontSize: 15,
@@ -63,7 +61,7 @@ const EmptyView = ({
                     justifyContent="center"
                     alignItems="center"               
                 >
-                    <Typography component={size}>
+                    <Typography component={headingLevel}>
                         {message}
                     </Typography>
                 </Stack>
@@ -76,7 +74,7 @@ EmptyView.propTypes = {
     message: PropTypes.string,
     icon: PropTypes.node,
     header: PropTypes.string,
-    size: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2'])
+    headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3'])
 };
 
 export default EmptyView;
\ No newline at end of file
diff --git a/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx b/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
index edded4b72..6e4cedbd7 100644
--- a/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
+++ b/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
@@ -97,7 +97,7 @@ const ChartBoxes = ({
 				icon={<IncidentsIcon />}
 				header="Incidents"
 				noDataMessage="Great. No Incidents, yet!"
-				isEmpty={!monitor?.groupedDownChecks?.length}
+				isEmpty={monitor?.groupedDownChecks?.length === 0}
 			>
 				<Stack width={"100%"}>
 					<Box position="relative">