From 2879126565e2c0b286a17d38689be73934d04377 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Wed, 19 Feb 2025 22:32:09 +0530 Subject: [PATCH 1/4] Feat: Empty View Low Level Component --- src/Components/Charts/ChartBox/EmptyView.jsx | 82 +++++++++++++++++++ src/Components/Charts/ChartBox/index.jsx | 8 ++ .../Details/Components/ChartBoxes/index.jsx | 3 + 3 files changed, 93 insertions(+) create mode 100644 src/Components/Charts/ChartBox/EmptyView.jsx diff --git a/src/Components/Charts/ChartBox/EmptyView.jsx b/src/Components/Charts/ChartBox/EmptyView.jsx new file mode 100644 index 000000000..4c5181b49 --- /dev/null +++ b/src/Components/Charts/ChartBox/EmptyView.jsx @@ -0,0 +1,82 @@ +// Components +import { Typography, Stack } from "@mui/material"; +import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; +import IconBox from "../../IconBox"; + +const EmptyView = ({ + icon, + header, + message = "No Data", + size = "h2", + borderRadiusRight = 4, + justifyContent = "flex-start", + height = "300px" +}) => { + const theme = useTheme(); + return ( + + + + {icon && {icon}} + {header && {header}} + + + + {message} + + + + + ); +}; + +EmptyView.propTypes = { + message: PropTypes.string, + icon: PropTypes.node, + header: PropTypes.string, + size: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2']) +}; + +export default EmptyView; \ No newline at end of file diff --git a/src/Components/Charts/ChartBox/index.jsx b/src/Components/Charts/ChartBox/index.jsx index bd27d4775..4b72fe16a 100644 --- a/src/Components/Charts/ChartBox/index.jsx +++ b/src/Components/Charts/ChartBox/index.jsx @@ -1,6 +1,7 @@ import { Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import IconBox from "../../IconBox"; +import EmptyView from "./EmptyView"; import PropTypes from "prop-types"; const ChartBox = ({ @@ -12,8 +13,13 @@ const ChartBox = ({ Legend, borderRadiusRight = 4, sx, + noDataMessage, + isEmpty = false, }) => { const theme = useTheme(); + if (isEmpty) { + return ; + } return ( } header="Uptime" + isEmpty={monitor?.uptimePercentage === 0 && !monitor?.upChecks?.length} > } header="Incidents" + noDataMessage="Great. No Incidents, yet!" + isEmpty={!monitor?.groupedDownChecks?.length} > From f4021e8cd5ebf28ca61679225ddea47e3ab8ac88 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Tue, 25 Feb 2025 23:10:35 +0530 Subject: [PATCH 2/4] 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, }} > - + {message} @@ -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={} header="Incidents" noDataMessage="Great. No Incidents, yet!" - isEmpty={!monitor?.groupedDownChecks?.length} + isEmpty={monitor?.groupedDownChecks?.length === 0} > From 3650a6162abd59657ac939d3e7136e7512d8b795 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Thu, 27 Feb 2025 11:00:36 +0530 Subject: [PATCH 3/4] Feat: Empty View Component --- src/Components/Charts/ChartBox/EmptyView.jsx | 30 ++++++++++++++++++- .../Details/Components/ChartBoxes/index.jsx | 3 +- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/Components/Charts/ChartBox/EmptyView.jsx b/src/Components/Charts/ChartBox/EmptyView.jsx index d980fbdb2..3913945ce 100644 --- a/src/Components/Charts/ChartBox/EmptyView.jsx +++ b/src/Components/Charts/ChartBox/EmptyView.jsx @@ -4,6 +4,32 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import IconBox from "../../IconBox"; +/** + * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message. + * + * @component + * @param {Object} props - The properties that define the `EmptyView` component. + * @param {React.ReactNode} [props.icon] - An optional icon to display at the top of the empty view. + * @param {string} [props.header] - An optional header text displayed next to the icon. + * @param {string} [props.message="No Data"] - The message to be displayed in the empty view. + * @param {'h1' | 'h2' | 'h3'} [props.headingLevel="h2"] - The heading level for the message text. + * @param {string} [props.justifyContent="flex-start"] - The CSS `justify-content` value to align elements vertically. + * @param {string} [props.height="100%"] - The height of the empty view container. + * + * @example + * // Example usage of EmptyView component: + * } + * header="Average Response Time" + * message="No Resposne Time Available" + * headingLevel="h2" + * justifyContent="center" + * height="50%" + * /> + * + * @returns {React.Element} The `EmptyView` component with customizable icon, header, and message. + */ + const EmptyView = ({ icon, header, @@ -74,7 +100,9 @@ EmptyView.propTypes = { message: PropTypes.string, icon: PropTypes.node, header: PropTypes.string, - headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3']) + headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3']), + justifyContent: PropTypes.string, + height: PropTypes.string }; 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 6e4cedbd7..1875ef760 100644 --- a/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx +++ b/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx @@ -35,6 +35,7 @@ const ChartBoxes = ({ const denominator = totalUpChecks + totalDownChecks > 0 ? totalUpChecks + totalDownChecks : 1; const groupedUptimePercentage = (totalUpChecks / denominator) * 100; + const noIncidentsMessage = "Great. No Incidents, yet!"; return ( } header="Incidents" - noDataMessage="Great. No Incidents, yet!" + noDataMessage={noIncidentsMessage} isEmpty={monitor?.groupedDownChecks?.length === 0} > From cd1b3043caaf87ba7204fa8d63d349ee1379abc6 Mon Sep 17 00:00:00 2001 From: Aryaman Sharma Date: Thu, 27 Feb 2025 11:04:27 +0530 Subject: [PATCH 4/4] Feat: Empty View Component --- src/Components/Charts/ChartBox/EmptyView.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Charts/ChartBox/EmptyView.jsx b/src/Components/Charts/ChartBox/EmptyView.jsx index 3913945ce..94b1af7b0 100644 --- a/src/Components/Charts/ChartBox/EmptyView.jsx +++ b/src/Components/Charts/ChartBox/EmptyView.jsx @@ -21,7 +21,7 @@ import IconBox from "../../IconBox"; * } * header="Average Response Time" - * message="No Resposne Time Available" + * message="No Response Time Available" * headingLevel="h2" * justifyContent="center" * height="50%" @@ -105,4 +105,4 @@ EmptyView.propTypes = { height: PropTypes.string }; -export default EmptyView; \ No newline at end of file +export default EmptyView;