From 06e1c35e770d4b79b5b14155fa067106f92ad133 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 12 Sep 2024 20:08:04 -0400 Subject: [PATCH] Revamped performance section and removed redundant code --- Client/src/Pages/PageSpeed/Details/index.css | 16 -- Client/src/Pages/PageSpeed/Details/index.jsx | 256 ++++--------------- Client/src/assets/icons/spedometer-icon.svg | 3 + 3 files changed, 49 insertions(+), 226 deletions(-) create mode 100644 Client/src/assets/icons/spedometer-icon.svg diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css index 18b2f1f3a..2bd9bda44 100644 --- a/Client/src/Pages/PageSpeed/Details/index.css +++ b/Client/src/Pages/PageSpeed/Details/index.css @@ -1,14 +1,3 @@ -.page-speed-details h6 { - font-size: var(--env-var-font-size-large); -} -.page-speed-details h4, -.page-speed-details p > span { - font-size: var(--env-var-font-size-medium); -} -.page-speed-details h1 + span, -.page-speed-details h4 > span { - font-size: var(--env-var-font-size-small-plus); -} .page-speed-details button.MuiButtonBase-root { height: 34px; } @@ -27,8 +16,3 @@ .page-speed-details .MuiPieArc-root { stroke: inherit; } - -.page-speed-details .metric { - min-width: 200px; - flex: 1; -} diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index f5ab4c987..042347c67 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -21,104 +21,16 @@ import { logger } from "../../../Utils/Logger"; import { networkService } from "../../../main"; import SkeletonLayout from "./skeleton"; import SettingsIcon from "../../../assets/icons/settings-bold.svg?react"; +import SpedometerIcon from "../../../assets/icons/spedometer-icon.svg?react"; import MetricsIcon from "../../../assets/icons/ruler-icon.svg?react"; import ScoreIcon from "../../../assets/icons/monitor-graph-line.svg?react"; import PerformanceIcon from "../../../assets/icons/performance-report.svg?react"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import PulseDot from "../../../Components/Animated/PulseDot"; import PagespeedDetailsAreaChart from "./Charts/AreaChart"; -import "./index.css"; import Checkbox from "../../../Components/Inputs/Checkbox"; import PieChart from "./Charts/PieChart"; - -/** - * Renders a centered label within a pie chart. - * - * @param {Object} props - * @param {string | number} props.value - The value to display in the label. - * @param {string} props.color - The color of the text. - * @returns {JSX.Element} - */ -const PieCenterLabel = ({ value, color, setExpand }) => { - const { width, height } = useDrawingArea(); - return ( - setExpand(true)} - > - - - {value} - - - ); -}; - -PieCenterLabel.propTypes = { - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - color: PropTypes.string, - setExpand: PropTypes.func, -}; - -/** - * A component that renders a label on a pie chart slice. - * The label is positioned relative to the center of the pie chart and is optionally highlighted. - * - * @param {Object} props - * @param {number} props.value - The value to display inside the pie slice. - * @param {number} props.startAngle - The starting angle of the pie slice in degrees. - * @param {number} props.endAngle - The ending angle of the pie slice in degrees. - * @param {string} props.color - The color of the label text when highlighted. - * @param {boolean} props.highlighted - Determines if the label should be highlighted or not. - * @returns {JSX.Element} - */ -const PieValueLabel = ({ value, startAngle, endAngle, color, highlighted }) => { - const { width, height } = useDrawingArea(); - - // Compute the midpoint angle in radians - const angle = (((startAngle + endAngle) / 2) * Math.PI) / 180; - const radius = height / 3.5; // length from center of the circle to where the text is positioned - - // Calculate x and y positions - const x = Math.sin(angle) * radius; - const y = -Math.cos(angle) * radius; - - return ( - - - +{value} - - - ); -}; - -PieValueLabel.propTypes = { - value: PropTypes.number, - startAngle: PropTypes.number, - endAngle: PropTypes.number, - color: PropTypes.string, - highlighted: PropTypes.bool, -}; +import "./index.css"; const PageSpeedDetails = () => { const theme = useTheme(); @@ -174,38 +86,6 @@ const PageSpeedDetails = () => { setMetrics((prev) => ({ ...prev, [id]: !prev[id] })); }; - /** - * Retrieves color properties based on the performance value. - * - * @param {number} value - The performance score used to determine the color properties. - * @returns {{stroke: string, text: string, shape: string}} The color properties for the given performance value. - */ - const getColors = (value) => { - if (value >= 90 && value <= 100) - return { - stroke: theme.palette.success.main, - text: theme.palette.success.text, - shape: "circle", - }; - else if (value >= 50 && value < 90) - return { - stroke: theme.palette.warning.main, - text: theme.palette.warning.text, - shape: "square", - }; - else if (value >= 0 && value < 50) - return { - stroke: theme.palette.error.text, - text: theme.palette.error.text, - shape: "circle", - }; - return { - stroke: theme.palette.unresolved.main, - text: theme.palette.unresolved.main, - shape: "", - }; - }; - return ( {loading ? ( @@ -412,8 +292,7 @@ const PageSpeedDetails = () => { @@ -433,11 +312,17 @@ const PageSpeedDetails = () => { Values are estimated and may vary.{" "} See calculator @@ -445,84 +330,30 @@ const PageSpeedDetails = () => { - - The{" "} - - performance score is calculated - {" "} - directly from these{" "} - - metrics - - . - + + + + + Performance Metrics + {Object.keys(audits).map((key) => { if (key === "_id") return; let audit = audits[key]; - let metricParams = getColors(audit.score * 100); - - let shape = ( - - ); - if (metricParams.shape === "square") - shape = ( - - ); - else if (metricParams.shape === "triangle") - shape = ( - - ); + let score = audit.score * 100; + let bg = + score >= 90 + ? theme.palette.success.main + : score >= 50 + ? theme.palette.warning.main + : score >= 0 + ? theme.palette.error.text + : theme.palette.unresolved.main; // Find the position where the number ends and the unit begins const match = audit.displayValue.match( @@ -532,44 +363,49 @@ const PageSpeedDetails = () => { let unit; if (match) { value = match[1]; - unit = match[2]; + match[2] === "s" ? (unit = "seconds") : (unit = match[2]); } else { value = audit.displayValue; } return ( - {shape} - + {audit.title} {value} {unit} + ); })} diff --git a/Client/src/assets/icons/spedometer-icon.svg b/Client/src/assets/icons/spedometer-icon.svg new file mode 100644 index 000000000..19b13f44e --- /dev/null +++ b/Client/src/assets/icons/spedometer-icon.svg @@ -0,0 +1,3 @@ + + +