feat: rum config package (#790)

* feat: rum config package

* chore: update metrics label

* feat: category bar

* chore: clean up

apps/web/package.json

···
     "@openstatus/ui": "workspace:*",
     "@openstatus/upstash": "workspace:*",
     "@openstatus/utils": "workspace:*",
+    "@openstatus/rum": "workspace:*",
     "@sentry/integrations": "7.100.1",
     "@sentry/nextjs": "7.100.1",
     "@stripe/stripe-js": "2.1.6",

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/category-bar.tsx

···
+// TODO: move to @/components folder
+
+import React from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@openstatus/ui";
+
+import { cn } from "@/lib/utils";
+
+const MAX_VALUE_RATIO = 1.3; // avoiding Infinity as number
+
+interface CategoryBarProps {
+  values: {
+    color: string;
+    min: number;
+    max: number;
+  }[];
+  marker: number;
+}
+
+export function CategoryBar({ values, marker }: CategoryBarProps) {
+  const getMarkerColor = React.useCallback(() => {
+    for (const value of values) {
+      if (marker >= value.min && marker <= value.max) {
+        return value.color;
+      }
+    }
+    return "bg-gray-500";
+  }, [values, marker]);
+
+  /**
+   * Get the max value from the values array
+   * If the max value is not finite, calculate the max value based on the ratio
+   */
+  const getMaxValue = React.useCallback(() => {
+    const maxValue = values.reduce((acc, value) => {
+      if (Number.isFinite(value.max)) return Math.max(acc, value.max);
+      return acc * MAX_VALUE_RATIO;
+    }, 0);
+    return Math.max(maxValue, marker);
+  }, [values, marker]);
+
+  const valuesWithPercentage = React.useMemo(
+    () =>
+      values.map((value) => {
+        const max = Number.isFinite(value.max) ? value.max : getMaxValue();
+        return {
+          ...value,
+          percentage: (max - value.min) / getMaxValue(),
+        };
+      }),
+    [values, getMaxValue],
+  );
+
+  return (
+    <div className="relative w-full">
+      <div className="relative mb-1 flex w-full">
+        <div className="text-muted-foreground absolute bottom-0 left-0 flex items-center text-xs">
+          0
+        </div>
+        {valuesWithPercentage.slice(0, values.length - 1).map((value, i) => {
+          const width = `${(value.percentage * 100).toFixed(2)}%`;
+          return (
+            <div
+              key={i}
+              className="flex items-center justify-end"
+              style={{ width }}
+            >
+              <span className="text-muted-foreground left-1/2 translate-x-1/2 text-xs">
+                {value.max}
+              </span>
+            </div>
+          );
+        })}
+        {/* REMINDER: could be a thing - only display if maxValue !== Infinity */}
+        <div className="text-muted-foreground absolute bottom-0 right-0 flex items-center text-xs">
+          {getMaxValue()}
+        </div>
+      </div>
+      <div className="flex h-3 w-full overflow-hidden rounded-full">
+        {valuesWithPercentage.map((value, i) => {
+          const width = `${(value.percentage * 100).toFixed(2)}%`;
+          return <div key={i} className={cn(value.color)} style={{ width }} />;
+        })}
+      </div>
+      <div
+        className="absolute -bottom-0.5 right-1/2 w-5 -translate-x-1/2"
+        style={{ left: `${(marker / getMaxValue()) * 100}%` }}
+      >
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "ring-border mx-auto h-4 w-1 rounded-full ring-2",
+                  getMarkerColor(),
+                )}
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{marker}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/rum-metric-card.tsx

···
 import { Card } from "@tremor/react";
 
+import { getColorByType, webVitalsConfig } from "@openstatus/rum";
+import type { WebVitalEvents, WebVitalsValues } from "@openstatus/rum";
+
 import { api } from "@/trpc/server";
+import { CategoryBar } from "./category-bar";
 
-export const RUMMetricCard = async ({
-  event,
-}: {
-  event: "CLS" | "FCP" | "FID" | "INP" | "LCP" | "TTFB";
-}) => {
-  const data = await api.rumRouter.GetEventMetricsForWorkspace.query({
-    event: event,
-  });
+function prepareWebVitalValues(values: WebVitalsValues) {
+  return values.map((value) => ({
+    ...value,
+    color: getColorByType(value.type),
+  }));
+}
+
+export const RUMMetricCard = async ({ event }: { event: WebVitalEvents }) => {
+  const data = await api.rumRouter.GetEventMetricsForWorkspace.query({ event });
+  const eventConfig = webVitalsConfig[event];
   return (
     <Card>
-      <p className="text-muted-foreground text-sm">{event}</p>
+      <p className="text-muted-foreground text-sm">
+        {eventConfig.label} ({event})
+      </p>
       <p className="text-foreground text-3xl font-semibold">
         {data?.median || 0}
       </p>
+      <CategoryBar
+        values={prepareWebVitalValues(eventConfig.values)}
+        marker={data?.median || 0}
+      />
     </Card>
   );
 };

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/page.tsx

···
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
+import { webVitalEvents } from "@openstatus/rum";
 import { Button } from "@openstatus/ui";
 
 import { EmptyState } from "@/components/dashboard/empty-state";
···
   }
 
   return (
-    <div className="grid  grid-cols-1 gap-2 md:grid-cols-4">
-      <RUMMetricCard event="CLS" />
-      <RUMMetricCard event="FCP" />
-      <RUMMetricCard event="FID" />
-      <RUMMetricCard event="INP" />
-      <RUMMetricCard event="LCP" />
-      <RUMMetricCard event="TTFB" />
+    <div className="grid  grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
+      {webVitalEvents.map((event) => (
+        <RUMMetricCard key={event} event={event} />
+      ))}
     </div>
   );
 }

packages/rum/package.json

···
+{
+  "name": "@openstatus/rum",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.ts",
+  "scripts": {},
+  "dependencies": {
+    "zod": "3.22.4"
+  },
+  "devDependencies": {
+    "@openstatus/tsconfig": "workspace:*",
+    "typescript": "5.4.5"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

packages/rum/src/config.ts

···
+import type { WebVitalsConfig } from "./types";
+
+export const webVitalEvents = [
+  "CLS",
+  "FCP",
+  "FID",
+  "INP",
+  "LCP",
+  "TTFB",
+] as const;
+
+export const webVitalsConfig: WebVitalsConfig = {
+  CLS: {
+    unit: "",
+    label: "Cumulative Layout Shift",
+    description:
+      "CLS measures the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.",
+    values: [
+      {
+        type: "good",
+        label: "Good",
+        min: 0,
+        max: 0.1,
+      },
+      {
+        type: "needs-improvement",
+        label: "Needs Improvement",
+        min: 0.1,
+        max: 0.25,
+      },
+      {
+        type: "poor",
+        label: "Poor",
+        min: 0.25,
+        max: Infinity,
+      },
+    ],
+  },
+  FCP: {
+    unit: "ms",
+    label: "First Contentful Paint",
+    description:
+      "FCP measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.",
+    values: [
+      {
+        type: "good",
+        label: "Good",
+        min: 0,
+        max: 1000,
+      },
+      {
+        type: "needs-improvement",
+        label: "Needs Improvement",
+        min: 1000,
+        max: 2500,
+      },
+      {
+        type: "poor",
+        label: "Poor",
+        min: 2500,
+        max: Infinity,
+      },
+    ],
+  },
+  FID: {
+    unit: "ms",
+    label: "First Input Delay",
+    description:
+      "FID measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction.",
+    values: [
+      {
+        type: "good",
+        label: "Good",
+        min: 0,
+        max: 100,
+      },
+      {
+        type: "needs-improvement",
+        label: "Needs Improvement",
+        min: 100,
+        max: 300,
+      },
+      {
+        type: "poor",
+        label: "Poor",
+        min: 300,
+        max: Infinity,
+      },
+    ],
+  },
+  INP: {
+    unit: "ms",
+    label: "Input Delay",
+    description:
+      "INP measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction.",
+    values: [
+      {
+        type: "good",
+        label: "Good",
+        min: 0,
+        max: 50,
+      },
+      {
+        type: "needs-improvement",
+        label: "Needs Improvement",
+        min: 50,
+        max: 250,
+      },
+      {
+        type: "poor",
+        label: "Poor",
+        min: 250,
+        max: Infinity,
+      },
+    ],
+  },
+  LCP: {
+    unit: "ms",
+    label: "Largest Contentful Paint",
+    description:
+      "LCP measures the time from when the page starts loading to when the largest content element is rendered on the screen.",
+    values: [
+      {
+        type: "good",
+        label: "Good",
+        min: 0,
+        max: 2500,
+      },
+      {
+        type: "needs-improvement",
+        label: "Needs Improvement",
+        min: 2500,
+        max: 4000,
+      },
+      {
+        type: "poor",
+        label: "Poor",
+        min: 4000,
+        max: Infinity,
+      },
+    ],
+  },
+  TTFB: {
+    unit: "ms",
+    label: "Time to First Byte",
+    description:
+      "TTFB measures the time from when the browser starts requesting a page to when the first byte of the page is received by the browser.",
+    values: [
+      {
+        type: "good",
+        label: "Good",
+        min: 0,
+        max: 200,
+      },
+      {
+        type: "needs-improvement",
+        label: "Needs Improvement",
+        min: 200,
+        max: 500,
+      },
+      {
+        type: "poor",
+        label: "Poor",
+        min: 500,
+        max: Infinity,
+      },
+    ],
+  },
+};

packages/rum/src/index.ts

···
+export * from "./config";
+export * from "./utils";
+export * from "./types";

packages/rum/src/types.ts

···
+import type { webVitalEvents } from "./config";
+
+export type WebVitalEvents = (typeof webVitalEvents)[number];
+
+export type WebVitalsValueTypes = "good" | "needs-improvement" | "poor";
+
+export type WebVitalsValues = {
+  type: WebVitalsValueTypes;
+  label: string;
+  min: number;
+  max: number;
+}[];
+
+export type WebVitalsConfig = Record<
+  WebVitalEvents,
+  {
+    unit: string;
+    label: string;
+    description: string;
+    values: WebVitalsValues;
+  }
+>;

packages/rum/src/utils.ts

···
+import type { WebVitalsValueTypes } from "./types";
+
+export function getColorByType(type: WebVitalsValueTypes) {
+  switch (type) {
+    case "good":
+      return "bg-green-500";
+    case "needs-improvement":
+      return "bg-yellow-500";
+    case "poor":
+      return "bg-rose-500";
+    default:
+      const _check: never = type;
+      return _check;
+  }
+}

packages/rum/tsconfig.json

···
+{
+  "extends": "@openstatus/tsconfig/base.json",
+  "include": ["src", "*.ts"]
+}

pnpm-lock.yaml

···
       '@openstatus/react':
         specifier: workspace:*
         version: link:../../packages/react
+      '@openstatus/rum':
+        specifier: workspace:*
+        version: link:../../packages/rum
       '@openstatus/tinybird':
         specifier: workspace:*
         version: link:../../packages/tinybird
···
       tsup:
         specifier: 7.2.0
         version: 7.2.0(postcss@8.4.31)(ts-node@10.9.1(@types/node@20.8.0)(typescript@5.4.5))(typescript@5.4.5)
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+
+  packages/rum:
+    dependencies:
+      zod:
+        specifier: 3.22.4
+        version: 3.22.4
+    devDependencies:
+      '@openstatus/tsconfig':
+        specifier: workspace:*
+        version: link:../tsconfig
       typescript:
         specifier: 5.4.5
         version: 5.4.5