From b0a3f1fe525f4cb53fb0bcd21db8dcc93a737187 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 6 Aug 2024 13:39:24 -0400 Subject: [PATCH 1/2] Initial changes --- Client/src/Components/Charts/PagespeedLineChart/index.jsx | 2 +- Client/src/Pages/PageSpeed/Details/index.jsx | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Charts/PagespeedLineChart/index.jsx b/Client/src/Components/Charts/PagespeedLineChart/index.jsx index de01e35ad..c3f974f0d 100644 --- a/Client/src/Components/Charts/PagespeedLineChart/index.jsx +++ b/Client/src/Components/Charts/PagespeedLineChart/index.jsx @@ -49,7 +49,7 @@ const PageSpeedLineChart = ({ pageSpeedChecks = [] }) => { }; PageSpeedLineChart.propTypes = { - pageSpeedChecks: PropTypes.array.isRequired, + pageSpeedChecks: PropTypes.array, }; export default PageSpeedLineChart; diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index ac455cd16..dc183bac6 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -18,6 +18,7 @@ import GreenCheck from "../../../assets/icons/checkbox-green.svg?react"; import RedCheck from "../../../assets/icons/checkbox-red.svg?react"; import "./index.css"; +import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart"; /** * Displays a box with an icon, title, and value. @@ -142,11 +143,12 @@ const PageSpeedDetails = () => { }, } ); + console.log(monitor); setMonitor(res.data.data); }; fetchMonitor(); - }, []); + }, [monitorId]); const data = { _id: "66ad34001d483d284550e8cb", @@ -421,6 +423,9 @@ const PageSpeedDetails = () => { > Score history + + + Performance report Date: Tue, 6 Aug 2024 14:36:34 -0400 Subject: [PATCH 2/2] Removed dummy data and connected pie chart to monitor audits --- .../Charts/PagespeedLineChart/index.jsx | 16 ++++ Client/src/Pages/PageSpeed/Details/index.css | 3 +- Client/src/Pages/PageSpeed/Details/index.jsx | 88 ++----------------- 3 files changed, 25 insertions(+), 82 deletions(-) diff --git a/Client/src/Components/Charts/PagespeedLineChart/index.jsx b/Client/src/Components/Charts/PagespeedLineChart/index.jsx index c3f974f0d..270cbaca0 100644 --- a/Client/src/Components/Charts/PagespeedLineChart/index.jsx +++ b/Client/src/Components/Charts/PagespeedLineChart/index.jsx @@ -44,6 +44,22 @@ const PageSpeedLineChart = ({ pageSpeedChecks = [] }) => { dataset={pageSpeedChecks} {...customize} grid={{ vertical: true, horizontal: true }} + tooltip={{ trigger: "none" }} + slotProps={{ + legend: { + direction: "row", + position: { vertical: "bottom", horizontal: "middle" }, + padding: 2, + itemMarkWidth: 8, + itemMarkHeight: 8, + markGap: 5, + itemGap: 15, + labelStyle: { + fontSize: 13, + color: "#344054" + } + }, + }} /> ); }; diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css index 6f493db26..5d4d037b7 100644 --- a/Client/src/Pages/PageSpeed/Details/index.css +++ b/Client/src/Pages/PageSpeed/Details/index.css @@ -34,7 +34,8 @@ } .page-speed-details .stat-box, -.page-speed-details > .MuiStack-root:last-child { +.page-speed-details > .MuiStack-root:last-child, +.page-speed-details > .MuiBox-root:nth-last-child(3) { border: solid 1px var(--env-var-color-6); border-radius: var(--env-var-radius-2); background-color: var(--env-var-color-8); diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index dc183bac6..1af0fbba1 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -130,6 +130,7 @@ const PageSpeedDetails = () => { const theme = useTheme(); const navigate = useNavigate(); const [monitor, setMonitor] = useState({}); + const [audits, setAudits] = useState({}); const { monitorId } = useParams(); const { authToken } = useSelector((state) => state.auth); @@ -143,89 +144,14 @@ const PageSpeedDetails = () => { }, } ); - console.log(monitor); + setMonitor(res.data.data); + setAudits(res.data.data.checks[0].audits); }; fetchMonitor(); }, [monitorId]); - const data = { - _id: "66ad34001d483d284550e8cb", - monitorId: "66ad2f5b4dfcd19cdbfc7205", - status: true, - accessibility: 100, - bestPractices: 79, - seo: 100, - performance: 100, - audits: { - cls: { - id: "cumulative-layout-shift", - title: "Cumulative Layout Shift", - description: - "Cumulative Layout Shift measures the movement of visible elements within the viewport.", - score: 0.1, - scoreDisplayMode: "numeric", - displayValue: "0", - numericValue: 0, - numericUnit: "unitless", - _id: "66ad34001d483d284550e8cd", - }, - si: { - id: "speed-index", - title: "Speed Index", - description: - "Speed Index shows how quickly the contents of a page are visibly populated.", - score: 0.9, - scoreDisplayMode: "numeric", - displayValue: "0.6s", - numericValue: 567.8934352052013, - numericUnit: "millisecond", - _id: "66ad34001d483d284550e8ce", - }, - fcp: { - id: "first-contentful-paint", - title: "First Contentful Paint", - description: - "First Contentful Paint marks the time at which the first text or image is painted.", - score: 0.8, - scoreDisplayMode: "numeric", - displayValue: "0.4s", - numericValue: 419, - numericUnit: "millisecond", - _id: "66ad34001d483d284550e8cf", - }, - lcp: { - id: "largest-contentful-paint", - title: "Largest Contentful Paint", - description: - "Largest Contentful Paint marks the time at which the largest text or image is painted.", - score: 0.6, - scoreDisplayMode: "numeric", - displayValue: "0.4s", - numericValue: 422.5, - numericUnit: "millisecond", - _id: "66ad34001d483d284550e8d0", - }, - tbt: { - id: "total-blocking-time", - title: "Total Blocking Time", - description: - "Sum of all time periods between FCP and Time to Interactive", - score: 0.9, - scoreDisplayMode: "numeric", - displayValue: "20ms", - numericValue: 16, - numericUnit: "millisecond", - _id: "66ad34001d483d284550e8d1", - }, - _id: "66ad34001d483d284550e8cc", - }, - createdAt: "2024-08-02T19:31:12.732Z", - updatedAt: "2024-08-02T19:31:12.732Z", - __v: 0, - }; - /** * Weight constants for different performance metrics. * @type {Object} @@ -312,7 +238,7 @@ const PageSpeedDetails = () => { }; const pieSize = { width: 200, height: 200 }; - const pieData = getPieData(data.audits); + const pieData = getPieData(audits); const colorMap = getColors(performance); const [highlightedItem, setHighLightedItem] = useState(null); @@ -582,10 +508,10 @@ const PageSpeedDetails = () => { pt={theme.gap.ml} gap={theme.gap.ml} > - {Object.keys(data.audits).map((key) => { + {Object.keys(audits).map((key) => { if (key === "_id") return; - let audit = data.audits[key]; + let audit = audits[key]; let metricParams = getColors(audit.score * 100); let shape = ( @@ -623,7 +549,7 @@ const PageSpeedDetails = () => { ); // Find the position where the number ends and the unit begins - const match = audit.displayValue.match(/(\d+\.?\d*)([a-zA-Z]+)/); + const match = audit.displayValue.match(/(\d+\.?\d*)\s*([a-zA-Z]+)/); let value; let unit; if (match) {