From 03375067d0f465ed86ac4fa20d0d4d5a6b7b3dbc Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 5 Aug 2024 13:18:00 -0400 Subject: [PATCH] Fixed hacky positioning and added pie sections --- Client/src/Pages/PageSpeed/Details/index.css | 14 ++ Client/src/Pages/PageSpeed/Details/index.jsx | 141 ++++++++++++++----- Client/src/Utils/Theme.js | 28 +++- 3 files changed, 143 insertions(+), 40 deletions(-) diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css index 39f0c60a5..bf6c62c25 100644 --- a/Client/src/Pages/PageSpeed/Details/index.css +++ b/Client/src/Pages/PageSpeed/Details/index.css @@ -51,3 +51,17 @@ width: 22px; height: 22px; } +.page-speed-details .MuiPieArcLabel-root { + font-size: var(--env-var-font-size-small-plus); + transition: fill 300ms ease; +} +.page-speed-details .MuiPieArcLabel-faded { + fill: rgba(0, 0, 0, 0.3); +} +.page-speed-details .pie-label { + transition: all 400ms ease; +} + +.page-speed-details .MuiPieArc-root { + stroke: inherit; +} diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 8dcf240b6..7ca8a1746 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -59,14 +59,15 @@ const StatBox = ({ icon, title, value }) => { * @returns {JSX.Element} */ const PieCenterLabel = ({ value, color }) => { - const { width, height, left, top } = useDrawingArea(); + const { width, height } = useDrawingArea(); return ( { title: "Cumulative Layout Shift", description: "Cumulative Layout Shift measures the movement of visible elements within the viewport.", - score: 1, + score: 0.1, scoreDisplayMode: "numeric", displayValue: "0", numericValue: 0, @@ -126,7 +127,7 @@ const PageSpeedDetails = () => { title: "Speed Index", description: "Speed Index shows how quickly the contents of a page are visibly populated.", - score: 1, + score: 0.9, scoreDisplayMode: "numeric", displayValue: "0.6s", numericValue: 567.8934352052013, @@ -138,7 +139,7 @@ const PageSpeedDetails = () => { title: "First Contentful Paint", description: "First Contentful Paint marks the time at which the first text or image is painted.", - score: 0.1, + score: 0.8, scoreDisplayMode: "numeric", displayValue: "0.4s", numericValue: 419, @@ -150,7 +151,7 @@ const PageSpeedDetails = () => { title: "Largest Contentful Paint", description: "Largest Contentful Paint marks the time at which the largest text or image is painted.", - score: 1, + score: 0.6, scoreDisplayMode: "numeric", displayValue: "0.4s", numericValue: 422.5, @@ -162,7 +163,7 @@ const PageSpeedDetails = () => { title: "Total Blocking Time", description: "Sum of all time periods between FCP and Time to Interactive", - score: 1, + score: 0.9, scoreDisplayMode: "numeric", displayValue: "20ms", numericValue: 16, @@ -188,24 +189,6 @@ const PageSpeedDetails = () => { cls: 25, }; - /** - * Calculates the performance score based on the provided audit data and weights. - * - * @param {Object} audits - An object containing audit data. - * @param {Object} audits. - An object for each performance metric. - * @param {number} audits..score - The score for the specific metric. - * @returns {number} The calculated performance score, rounded to the nearest integer. - */ - const calculatePerformance = (audits) => { - let sum = 0; - Object.keys(audits).forEach((key) => { - if (audits[key].score) sum += audits[key].score * weights[key]; - }); - return Math.round(sum); - }; - - var performance = calculatePerformance(data.audits); - /** * Retrieves color properties based on the performance value. * @@ -219,8 +202,64 @@ const PageSpeedDetails = () => { return theme.pie.default; }; + let performance = 0; + const getPieData = (audits) => { + let props = []; + let startAngle = 0; + const padding = 3; // padding between arcs + const max = 360 - padding * (Object.keys(audits).length - 1); // _id is a child of audits + + Object.keys(audits).forEach((key) => { + if (audits[key].score) { + let value = audits[key].score * weights[key]; + let endAngle = startAngle + (weights[key] * max) / 100; + + let theme = getColors(audits[key].score * 100); + props.push({ + id: key, + data: [ + { + value: value, + color: theme.stroke, + label: key.toUpperCase(), + }, + { + value: weights[key] - value, + color: theme.strokeBg, + label: "", + }, + ], + arcLabel: (item) => `${item.label}`, + arcLabelRadius: 95, + startAngle: startAngle, + endAngle: endAngle, + innerRadius: 70, + outerRadius: 80, + cornerRadius: 3, + highlightScope: { faded: "global", highlighted: "series" }, + faded: { + innerRadius: 60, + outerRadius: 70, + additionalRadius: -20, + arcLabelRadius: 5, + }, + cx: pieSize.width / 2, + }); + + performance += Math.round(value); + startAngle = endAngle + padding; + } + }); + + return props; + }; + + const pieSize = { width: 300, height: 205 }; + const pieData = getPieData(data.audits); const colorMap = getColors(performance); + const [highlightedItem, setHighLightedItem] = useState(null); + return (