From 4ec51ca886133911fcdb0550e28d1f18f784d511 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 10 Sep 2024 13:20:33 -0400 Subject: [PATCH] Revamped chart boxes --- Client/src/Pages/PageSpeed/Details/index.css | 16 ----- Client/src/Pages/PageSpeed/Details/index.jsx | 64 ++++++++----------- Client/src/Pages/PageSpeed/Details/styled.jsx | 46 ++++++++++++- .../src/assets/icons/monitor-graph-line.svg | 3 + .../src/assets/icons/performance-report.svg | 3 + 5 files changed, 76 insertions(+), 56 deletions(-) create mode 100644 Client/src/assets/icons/monitor-graph-line.svg create mode 100644 Client/src/assets/icons/performance-report.svg diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css index e3279bdf9..18b2f1f3a 100644 --- a/Client/src/Pages/PageSpeed/Details/index.css +++ b/Client/src/Pages/PageSpeed/Details/index.css @@ -9,26 +9,10 @@ .page-speed-details h4 > span { font-size: var(--env-var-font-size-small-plus); } -.page-speed-details h6 { - line-height: 22px; -} -.page-speed-details h6 { - font-weight: 600; -} .page-speed-details button.MuiButtonBase-root { height: 34px; } -.page-speed-details .stat-box { - flex: 1; -} -.page-speed-details .stat-box:last-of-type { - flex-shrink: 1; -} -.page-speed-details .stat-box svg { - width: 22px; - height: 22px; -} .page-speed-details .MuiPieArcLabel-root { font-size: var(--env-var-font-size-small-plus); transition: fill 300ms ease; diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 85af38952..6de6d04d6 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -4,7 +4,6 @@ import { Button, Skeleton, Stack, - Toolbar, Tooltip, Typography, } from "@mui/material"; @@ -19,13 +18,12 @@ import { formatDurationRounded, formatDurationSplit, } from "../../../Utils/timeUtils"; -import { StatBox } from "./styled"; +import { ChartBox, IconBox, StatBox } from "./styled"; import { logger } from "../../../Utils/Logger"; import { networkService } from "../../../main"; import SettingsIcon from "../../../assets/icons/settings-bold.svg?react"; -import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react"; -import ClockIcon from "../../../assets/icons/maintenance.svg?react"; -import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react"; +import ScoreIcon from "../../../assets/icons/monitor-graph-line.svg?react"; +import PerformanceIcon from "../../../assets/icons/performance-report.svg?react"; import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import PulseDot from "../../../Components/Animated/PulseDot"; @@ -302,7 +300,7 @@ const PageSpeedDetails = () => { cx: pieSize.width / 2, }); - performance += Math.round(value); + performance += Math.floor(value); startAngle = endAngle + padding; } }); @@ -320,13 +318,6 @@ const PageSpeedDetails = () => { let loading = Object.keys(monitor).length === 0; const data = monitor?.checks ? [...monitor.checks].reverse() : []; - let sharedStyles = { - border: 1, - borderColor: theme.palette.border.light, - borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.main, - }; - console.log(monitor); const splitDuration = (duration) => { @@ -465,32 +456,27 @@ const PageSpeedDetails = () => { - - Score history - - - + + + Showing statistics for past 24 hours. + - - Performance report - - + + + + + + Score history + + + + + + + + + Performance report + { })} - + )} diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx index cae50839e..b067efa22 100644 --- a/Client/src/Pages/PageSpeed/Details/styled.jsx +++ b/Client/src/Pages/PageSpeed/Details/styled.jsx @@ -1,4 +1,48 @@ -import { Box, styled } from "@mui/material"; +import { Box, Stack, styled } from "@mui/material"; + +export const ChartBox = styled(Stack)(({ theme }) => ({ + flex: "1 30%", + gap: theme.spacing(8), + height: 300, + minWidth: 250, + padding: theme.spacing(8), + border: 1, + borderStyle: "solid", + borderColor: theme.palette.border.light, + borderRadius: 4, + backgroundColor: theme.palette.background.main, + "& h2": { + color: theme.palette.text.secondary, + fontSize: 15, + fontWeight: 500, + }, + "& p": { + color: theme.palette.text.secondary, + }, +})); + +export const IconBox = styled(Box)(({ theme }) => ({ + height: 34, + minWidth: 34, + width: 34, + position: "relative", + border: 1, + borderStyle: "solid", + borderColor: theme.palette.border.dark, + borderRadius: 4, + backgroundColor: theme.palette.background.accent, + "& svg": { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 20, + height: 20, + "& path": { + stroke: theme.palette.text.tertiary, + }, + }, +})); export const StatBox = styled(Box)(({ theme }) => ({ padding: `${theme.spacing(4)} ${theme.spacing(8)}`, diff --git a/Client/src/assets/icons/monitor-graph-line.svg b/Client/src/assets/icons/monitor-graph-line.svg new file mode 100644 index 000000000..86049eb9e --- /dev/null +++ b/Client/src/assets/icons/monitor-graph-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/Client/src/assets/icons/performance-report.svg b/Client/src/assets/icons/performance-report.svg new file mode 100644 index 000000000..8b7073ac3 --- /dev/null +++ b/Client/src/assets/icons/performance-report.svg @@ -0,0 +1,3 @@ + + +