Added pagespeed metrics

2026-01-16 06:39:43 -06:00 · 2024-08-06 13:00:56 -04:00
parent 7f5dae9dbd
commit d24e255b47
3 changed files with 184 additions and 28 deletions
--- 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;
+}
--- 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>
  );
 };
--- 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: "",
    },
  },
 });