From 947f5ff773310ae76ba694f08d543a08c2822d09 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 08:10:16 +0530 Subject: [PATCH 1/5] Added a new HOC in status bar in order to make sure it works on both the resolution, high and low. --- .../Charts/StatusPageBarChart/index.jsx | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 5acf4c3d6..46e8ae2a1 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -24,6 +24,21 @@ const StatusPageBarChart = ({ checks = [] }) => { checks = [...checks, ...placeholders]; } + const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => ( + + {children} + + ); + return ( { /* TODO what is the purpose of this box? */ // CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars // even if there are less than 25 checks - ) : ( { }, }} > - { transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> - + ) )} From da64cd0a56341cbfc040cfdfc44f57d2338a51d4 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Mon, 3 Mar 2025 23:12:17 +0530 Subject: [PATCH 2/5] FIX-1725 minor UI changes. --- src/Components/Charts/Bar/index.jsx | 47 +++++++++++++++++++ .../Charts/StatusPageBarChart/index.jsx | 26 +++------- 2 files changed, 53 insertions(+), 20 deletions(-) create mode 100644 src/Components/Charts/Bar/index.jsx diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx new file mode 100644 index 000000000..5826788a6 --- /dev/null +++ b/src/Components/Charts/Bar/index.jsx @@ -0,0 +1,47 @@ +import { Box } from "@mui/material"; +import { useTheme } from "@emotion/react"; +import PropTypes from "prop-types"; + +/** + * A customizable Bar component that renders a colored bar with optional children. + * + * @component + * + * @param {string} width The width of the bar (e.g., "100px"). + * @param {string} height The height of the bar (e.g., "50px"). + * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733"). + * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px"). + * @param {node} children The content to be rendered inside the bar. + * + * @returns {JSX.Element} The Bar component. + */ + +const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { + const theme = useTheme(); + + return ( + + {children} + + ); +}; + +Bar.propTypes = { + width: PropTypes.string.isRequired, + height: PropTypes.string.isRequired, + backgroundColor: PropTypes.string.isRequired, + borderRadius: PropTypes.string, + children: PropTypes.node, +}; + +export default Bar; diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 46e8ae2a1..84015da4a 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -3,6 +3,7 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material"; import { formatDateWithTz } from "../../../Utils/timeUtils"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; +import Bar from "../Bar"; /* TODO add prop validation and jsdocs */ const StatusPageBarChart = ({ checks = [] }) => { @@ -24,21 +25,6 @@ const StatusPageBarChart = ({ checks = [] }) => { checks = [...checks, ...placeholders]; } - const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => ( - - {children} - - ); - return ( { /* TODO what is the purpose of this box? */ // CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars // even if there are less than 25 checks - @@ -151,8 +137,8 @@ const StatusPageBarChart = ({ checks = [] }) => { }, }} > - @@ -171,7 +157,7 @@ const StatusPageBarChart = ({ checks = [] }) => { transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> - + ) )} From 8dc353ce90df6b3a3cdf37c39c3a6aab97ec35ea Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Mon, 3 Mar 2025 23:14:21 +0530 Subject: [PATCH 3/5] Removed the constant values. --- src/Components/Charts/Bar/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx index 5826788a6..e6d5fbea3 100644 --- a/src/Components/Charts/Bar/index.jsx +++ b/src/Components/Charts/Bar/index.jsx @@ -27,8 +27,6 @@ const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { backgroundColor={backgroundColor} sx={{ borderRadius: borderRadius || theme.spacing(1.5), - gap: "2px", - display: "flex", }} > {children} From f3537131efbfb598c1ca30d25d1dcca3e82f4c2d Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Tue, 4 Mar 2025 06:09:54 +0530 Subject: [PATCH 4/5] made the component to come outside of the main function. --- src/Components/Charts/Bar/index.jsx | 45 ------------------- .../Charts/StatusPageBarChart/index.jsx | 44 ++++++++++++++++-- 2 files changed, 41 insertions(+), 48 deletions(-) delete mode 100644 src/Components/Charts/Bar/index.jsx diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx deleted file mode 100644 index e6d5fbea3..000000000 --- a/src/Components/Charts/Bar/index.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Box } from "@mui/material"; -import { useTheme } from "@emotion/react"; -import PropTypes from "prop-types"; - -/** - * A customizable Bar component that renders a colored bar with optional children. - * - * @component - * - * @param {string} width The width of the bar (e.g., "100px"). - * @param {string} height The height of the bar (e.g., "50px"). - * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733"). - * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px"). - * @param {node} children The content to be rendered inside the bar. - * - * @returns {JSX.Element} The Bar component. - */ - -const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { - const theme = useTheme(); - - return ( - - {children} - - ); -}; - -Bar.propTypes = { - width: PropTypes.string.isRequired, - height: PropTypes.string.isRequired, - backgroundColor: PropTypes.string.isRequired, - borderRadius: PropTypes.string, - children: PropTypes.node, -}; - -export default Bar; diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 84015da4a..29a52b053 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -3,7 +3,45 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material"; import { formatDateWithTz } from "../../../Utils/timeUtils"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; -import Bar from "../Bar"; +import PropTypes from "prop-types"; + +/** + * A customizable Bar component that renders a colored bar with optional children. + * @component + * + * @param {string} width The width of the bar (e.g., "100px"). + * @param {string} height The height of the bar (e.g., "50px"). + * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733"). + * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px"). + * @param {node} children The content to be rendered inside the bar. + * @returns {JSX.Element} The Bar component. + */ + +const Bar = ({ width, height, backgroundColor, borderRadius, children }) => { + const theme = useTheme(); + + return ( + + {children} + + ); +}; + +Bar.propTypes = { + width: PropTypes.string.isRequired, + height: PropTypes.string.isRequired, + backgroundColor: PropTypes.string.isRequired, + borderRadius: PropTypes.string, + children: PropTypes.node, +}; /* TODO add prop validation and jsdocs */ const StatusPageBarChart = ({ checks = [] }) => { @@ -44,7 +82,7 @@ const StatusPageBarChart = ({ checks = [] }) => { // even if there are less than 25 checks @@ -138,7 +176,7 @@ const StatusPageBarChart = ({ checks = [] }) => { }} > From c5326e5d6a19777b38792c2b35af4f348b636ab0 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Tue, 4 Mar 2025 15:53:40 +0530 Subject: [PATCH 5/5] Added a constant and utilised a responsive-values in MUI. --- src/Components/Charts/StatusPageBarChart/index.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 29a52b053..e912934a0 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -49,6 +49,11 @@ const StatusPageBarChart = ({ checks = [] }) => { const [animate, setAnimate] = useState(false); const uiTimezone = useSelector((state) => state.ui.timezone); + const barWidth = { + xs: "calc(60% / 25)", + xl: "calc(40% / 25)", + }; + useEffect(() => { setAnimate(true); }, []); @@ -82,7 +87,7 @@ const StatusPageBarChart = ({ checks = [] }) => { // even if there are less than 25 checks @@ -176,7 +181,7 @@ const StatusPageBarChart = ({ checks = [] }) => { }} >