Skip to content

Commit

Permalink
Feat: Empty View Component for Chartboxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Br0wnHammer
Br0wnHammer committed Feb 15, 2025
1 parent 32d07fe commit 002d0cc
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 65 deletions.
20 changes: 20 additions & 0 deletions Client/src/Pages/Uptime/Details/Components/ChartBoxes/EmptyView.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Components
import { Typography, Box } from "@mui/material";
import PropTypes from "prop-types";

const EmptyView = ({ message = "No Data", size = "h2" }) => {
return (
<Box m="auto" marginY="25%">
<Typography variant={size}>
{message}
</Typography>
</Box>
);
};

EmptyView.propTypes = {
message: PropTypes.string,
size: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2'])
};

export default EmptyView;
147 changes: 82 additions & 65 deletions Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import UpBarChart from "../Charts/UpBarChart";
import DownBarChart from "../Charts/DownBarChart";
import ResponseGaugeChart from "../Charts/ResponseGaugeChart";
import SkeletonLayout from "./skeleton";
import EmptyView from "./EmptyView";
// Utils
import { formatDateWithTz } from "../../../../../Utils/timeUtils";
import PropTypes from "prop-types";
Expand Down Expand Up @@ -36,6 +37,83 @@ const ChartBoxes = ({
totalUpChecks + totalDownChecks > 0 ? totalUpChecks + totalDownChecks : 1;
const groupedUptimePercentage = (totalUpChecks / denominator) * 100;

const renderUptime = () => {
const upCheck = monitor?.groupedUpChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0);
if (!hoveredUptimeData && !upCheck) {
return <EmptyView />;
}
return (
<>
<Box position="relative">
<Typography>Total Checks</Typography>
<Typography component="span">
{hoveredUptimeData !== null
? hoveredUptimeData.totalChecks
: upCheck}
</Typography>
{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
<Typography
component="h5"
position="absolute"
top="100%"
fontSize={11}
color={theme.palette.primary.contrastTextTertiary}
>
{formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)}
</Typography>
)}
</Box>
<Box>
<Typography>
{hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"}
</Typography>
<Typography component="span">
{hoveredUptimeData !== null
? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
: Math.floor(groupedUptimePercentage)}
<Typography component="span">
{hoveredUptimeData !== null ? " ms" : " %"}
</Typography>
</Typography>
</Box>
</>
);
};

const renderIncidents = () => {
const downChecks = monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0);
if (!downChecks && !hoveredIncidentsData) {
return <EmptyView message="Great. No incidents, yet!" />;
}
return (
<Box position="relative">
<Typography component="span">
{hoveredIncidentsData !== null
? hoveredIncidentsData.totalChecks
: downChecks}
</Typography>
{hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
<Typography
component="h5"
position="absolute"
top="100%"
fontSize={11}
color={theme.palette.primary.contrastTextTertiary}
>
{formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
</Typography>
)}
</Box>
);
}

const renderResponseTime = () => {
if (!monitor?.avgResponseTime) {
return <EmptyView />;
}
return <ResponseGaugeChart avgResponseTime={monitor.avgResponseTime} />;
};

return (
<Stack
direction="row"
Expand All @@ -51,40 +129,7 @@ const ChartBoxes = ({
justifyContent="space-between"
direction="row"
>
<Box position="relative">
<Typography>Total Checks</Typography>
<Typography component="span">
{hoveredUptimeData !== null
? hoveredUptimeData.totalChecks
: (monitor?.groupedUpChecks?.reduce((count, checkGroup) => {
return count + checkGroup.totalChecks;
}, 0) ?? 0)}
</Typography>
{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
<Typography
component="h5"
position="absolute"
top="100%"
fontSize={11}
color={theme.palette.primary.contrastTextTertiary}
>
{formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)}
</Typography>
)}
</Box>
<Box>
<Typography>
{hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"}
</Typography>
<Typography component="span">
{hoveredUptimeData !== null
? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
: Math.floor(groupedUptimePercentage)}
<Typography component="span">
{hoveredUptimeData !== null ? " ms" : " %"}
</Typography>
</Typography>
</Box>
{renderUptime()}
</Stack>
<UpBarChart
monitor={monitor}
Expand All @@ -96,36 +141,8 @@ const ChartBoxes = ({
icon={<IncidentsIcon />}
header="Incidents"
>
<Stack width={"100%"}>
{hoveredIncidentsData !== null ||
(monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0) > 0) ? (
// Original layout for when incidents exist
<Box position="relative">
<Typography component="span">
{hoveredIncidentsData !== null
? hoveredIncidentsData.totalChecks
: monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0)}
</Typography>
{hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
<Typography
component="h5"
position="absolute"
top="100%"
fontSize={11}
color={theme.palette.primary.contrastTextTertiary}
>
{formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
</Typography>
)}
</Box>
) : (
// Centered layout for "No incidents" message
<Box m="auto" marginY="25%">
<Typography variant="h2">
Great. No incidents, yet!
</Typography>
</Box>
)}
<Stack width="100%">
{renderIncidents()}
</Stack>
<DownBarChart
monitor={monitor}
Expand All @@ -137,7 +154,7 @@ const ChartBoxes = ({
icon={<AverageResponseIcon />}
header="Average Response Time"
>
<ResponseGaugeChart avgResponseTime={monitor?.avgResponseTime ?? 0} />
{renderResponseTime()}
</ChartBox>
</Stack>
);
Expand Down

0 comments on commit 002d0cc

Please sign in to comment.