From d24e255b47a08db541aedff52621150f78c0b7ad Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 6 Aug 2024 13:00:56 -0400
Subject: [PATCH] Added pagespeed metrics

---
 Client/src/Pages/PageSpeed/Details/index.css |  21 ++-
 Client/src/Pages/PageSpeed/Details/index.jsx | 187 +++++++++++++++++--
 Client/src/Utils/Theme.js                    |   4 +
 3 files changed, 184 insertions(+), 28 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css
index 96cd787c5..6f493db26 100644
--- a/Client/src/Pages/PageSpeed/Details/index.css
+++ b/Client/src/Pages/PageSpeed/Details/index.css
@@ -1,20 +1,23 @@
 .page-speed-details h1 {
   font-size: var(--env-var-font-size-large-plus);
+  color: var(--env-var-color-1);
 }
 .page-speed-details h2,
 .page-speed-details h6 {
   font-size: var(--env-var-font-size-large);
 }
 .page-speed-details h4,
-.page-speed-details p {
+.page-speed-details p,
+.page-speed-details p > span {
   font-size: var(--env-var-font-size-medium);
 }
-.page-speed-details svg + .MuiBox-root > p,
+.page-speed-details h1 + span,
 .page-speed-details h4 > span {
   font-size: var(--env-var-font-size-small-plus);
 }
 .page-speed-details h2,
-.page-speed-details h4 {
+.page-speed-details h4,
+.page-speed-details p {
   color: var(--env-var-color-5);
 }
 .page-speed-details h6 {
@@ -26,16 +29,12 @@
 .page-speed-details h6 {
   font-weight: 600;
 }
-.page-speed-details .MuiBox-root > h2 {
-  font-size: 18px;
-  color: var(--env-var-color-1);
-}
 .page-speed-details button.MuiButtonBase-root {
   height: 34px;
 }
 
 .page-speed-details .stat-box,
-.page-speed-details > .MuiBox-root {
+.page-speed-details > .MuiStack-root:last-child {
   border: solid 1px var(--env-var-color-6);
   border-radius: var(--env-var-radius-2);
   background-color: var(--env-var-color-8);
@@ -62,7 +61,11 @@
 .page-speed-details .pie-value-label {
   transition: all 400ms ease;
 }
-
 .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 f5671be2e..42c578d03 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -16,6 +16,7 @@ import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
+import { StatusLabel } from "../../../Components/Label";
 
 import "./index.css";
 
@@ -99,7 +100,7 @@ const PieValueLabel = ({ value, startAngle, endAngle, color, highlighted }) => {
 
   // Compute the midpoint angle in radians
   const angle = (((startAngle + endAngle) / 2) * Math.PI) / 180;
-  const radius = height / 3.7; // length from center of the circle to where the text is positioned
+  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;
@@ -288,12 +289,12 @@ const PageSpeedDetails = () => {
           arcLabelRadius: 95,
           startAngle: startAngle,
           endAngle: endAngle,
-          innerRadius: 70,
+          innerRadius: 73,
           outerRadius: 80,
-          cornerRadius: 3,
+          cornerRadius: 2,
           highlightScope: { faded: "global", highlighted: "series" },
           faded: {
-            innerRadius: 60,
+            innerRadius: 63,
             outerRadius: 70,
             additionalRadius: -20,
             arcLabelRadius: 5,
@@ -315,7 +316,6 @@ const PageSpeedDetails = () => {
 
   const [highlightedItem, setHighLightedItem] = useState(null);
   const [expand, setExpand] = useState(false);
-  console.log(expand);
 
   return (
     <Stack className="page-speed-details" gap={theme.gap.large}>
@@ -342,11 +342,11 @@ const PageSpeedDetails = () => {
       >
         <GreenCheck />
         <Box>
-          <Typography component="h1" sx={{ lineHeight: 1 }}>
-            google.com
+          <Typography component="h1" mb={theme.gap.xs} sx={{ lineHeight: 1 }}>
+            {monitor?.url}
           </Typography>
           <Typography
-            mt={theme.gap.small}
+            component="span"
             sx={{ color: "var(--env-var-color-17)" }}
           >
             Your pagespeed monitor is live.
@@ -361,7 +361,7 @@ const PageSpeedDetails = () => {
               style={{ width: theme.gap.mlplus, height: theme.gap.mlplus }}
             />
           }
-          onClick={() => navigate(`/monitors/configure/${monitorId}`)}
+          onClick={() => navigate(`/pagespeed/configure/${monitorId}`)}
           sx={{
             ml: "auto",
             alignSelf: "flex-end",
@@ -423,8 +423,15 @@ const PageSpeedDetails = () => {
       </Stack>
       <Typography component="h2">Score history</Typography>
       <Typography component="h2">Performance report</Typography>
-      <Box p={theme.gap.ml}>
-        <Stack mx="auto" width="fit-content" alignItems="center">
+      <Stack direction="row" alignItems="center" overflow="hidden">
+        <Stack
+          alignItems="center"
+          textAlign="center"
+          minWidth="400px"
+          flex={1}
+          px={theme.gap.xl}
+          py={theme.gap.ml}
+        >
           <Box onMouseLeave={() => setExpand(false)}>
             {expand ? (
               <PieChart
@@ -436,7 +443,7 @@ const PageSpeedDetails = () => {
                         color: colorMap.bg,
                       },
                     ],
-                    outerRadius: 65,
+                    outerRadius: 67,
                     cx: pieSize.width / 2,
                   },
                   ...pieData,
@@ -481,7 +488,7 @@ const PageSpeedDetails = () => {
                         color: colorMap.bg,
                       },
                     ],
-                    outerRadius: 65,
+                    outerRadius: 67,
                     cx: pieSize.width / 2,
                   },
                   {
@@ -491,10 +498,10 @@ const PageSpeedDetails = () => {
                         color: colorMap.stroke,
                       },
                     ],
-                    innerRadius: 60,
+                    innerRadius: 63,
                     outerRadius: 70,
                     paddingAngle: 5,
-                    cornerRadius: 5,
+                    cornerRadius: 2,
                     startAngle: 0,
                     endAngle: (performance / 100) * 360,
                     cx: pieSize.width / 2,
@@ -513,12 +520,154 @@ const PageSpeedDetails = () => {
               </PieChart>
             )}
           </Box>
-          <Typography component="h2" mt={theme.gap.xs}>
-            Performance
+          <Typography mt={theme.gap.medium}>
+            Values are estimated and may vary.{" "}
+            <Typography
+              component="span"
+              sx={{
+                color: theme.palette.primary.main,
+                fontWeight: 500,
+                textDecoration: "underline",
+                cursor: "pointer",
+              }}
+            >
+              See calculator
+            </Typography>
           </Typography>
-          <Typography>Values are estimated and may vary.</Typography>
         </Stack>
-      </Box>
+        <Box
+          px={theme.gap.xl}
+          py={theme.gap.ml}
+          height="100%"
+          flex={1}
+          sx={{
+            borderLeft: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+          }}
+        >
+          <Typography
+            mb={theme.gap.medium}
+            pb={theme.gap.ml}
+            color={theme.palette.secondary.main}
+            textAlign="center"
+            sx={{
+              borderBottom: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+              borderBottomStyle: "dashed",
+            }}
+          >
+            The{" "}
+            <Typography
+              component="span"
+              sx={{
+                color: theme.palette.primary.main,
+                fontWeight: 500,
+                textDecoration: "underline",
+                cursor: "pointer",
+              }}
+            >
+              performance score is calculated
+            </Typography>{" "}
+            directly from these{" "}
+            <Typography component="span" fontWeight={600}>
+              metrics
+            </Typography>
+            .
+          </Typography>
+          <Stack
+            direction="row"
+            flexWrap="wrap"
+            pt={theme.gap.ml}
+            gap={theme.gap.ml}
+          >
+            {Object.keys(data.audits).map((key) => {
+              if (key === "_id") return;
+
+              let audit = data.audits[key];
+              let metricParams = getColors(audit.score * 100);
+
+              let shape = (
+                <Box
+                  sx={{
+                    width: theme.gap.medium,
+                    height: theme.gap.medium,
+                    borderRadius: "50%",
+                    backgroundColor: metricParams.stroke,
+                  }}
+                ></Box>
+              );
+              if (metricParams.shape === "square")
+                shape = (
+                  <Box
+                    sx={{
+                      width: theme.gap.medium,
+                      height: theme.gap.medium,
+                      backgroundColor: metricParams.stroke,
+                    }}
+                  ></Box>
+                );
+              else if (metricParams.shape === "triangle")
+                shape = (
+                  <Box
+                    sx={{
+                      width: 0,
+                      height: 0,
+                      ml: `calc((${theme.gap.medium} - ${theme.gap.small}) / -2)`,
+                      borderLeft: `${theme.gap.small} solid transparent`,
+                      borderRight: `${theme.gap.small} solid transparent`,
+                      borderBottom: `${theme.gap.medium} solid ${metricParams.stroke}`,
+                    }}
+                  ></Box>
+                );
+
+              // Find the position where the number ends and the unit begins
+              const match = audit.displayValue.match(/(\d+\.?\d*)([a-zA-Z]+)/);
+              let value;
+              let unit;
+              if (match) {
+                value = match[1];
+                unit = match[2];
+              } else {
+                value = audit.displayValue;
+              }
+
+              return (
+                <Stack
+                  className="metric"
+                  key={`${key}-box`}
+                  direction="row"
+                  gap={theme.gap.small}
+                >
+                  {shape}
+                  <Box>
+                    <Typography sx={{ lineHeight: 1 }}>
+                      {audit.title}
+                    </Typography>
+                    <Typography
+                      component="span"
+                      sx={{
+                        color: metricParams.text,
+                        fontSize: "16px",
+                        fontWeight: 600,
+                      }}
+                    >
+                      {value}
+                      <Typography
+                        component="span"
+                        ml="2px"
+                        sx={{
+                          color: theme.palette.secondary.main,
+                          fontSize: "13px",
+                        }}
+                      >
+                        {unit}
+                      </Typography>
+                    </Typography>
+                  </Box>
+                </Stack>
+              );
+            })}
+          </Stack>
+        </Box>
+      </Stack>
     </Stack>
   );
 };
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index b5e70007b..72250bebb 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -140,24 +140,28 @@ const theme = createTheme({
       strokeBg: "#d4f4e1",
       text: "#079455",
       bg: "#ecfdf3",
+      shape: "circle",
     },
     yellow: {
       stroke: "#fdb022",
       strokeBg: "rgba(255, 192, 34, 0.3)",
       text: "#dc6803",
       bg: "#fffcf5",
+      shape: "square",
     },
     red: {
       stroke: "#f04438",
       strokeBg: "#ffecea",
       text: "#f04438",
       bg: "#ffeaea",
+      shape: "triangle",
     },
     default: {
       stroke: "#4e5ba6",
       strokeBg: "#f2f4f7",
       text: "#4e5ba6",
       bg: "#f2f4f7",
+      shape: "",
     },
   },
 });