WebVitalsPage

Code

import { WebVitalsPage } from "@fadymondy/nasaq/web";import { useState } from "react";export function Vitals({ service, data }: { service: React.ComponentProps<typeof WebVitalsPage>["service"]; data?: React.ComponentProps<typeof WebVitalsPage>["data"] }) {  const [period, setPeriod] = useState(28);  return <WebVitalsPage service={service} data={data} site="nasaq.dev" period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;}

Monitoring · beta

Live examples and controls: WebVitalsPage in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/web-vitals-page.json

The web vitals page opens with a verdict (passes Core Web Vitals only when LCP, INP and CLS are all good at the 75th percentile), then a WebVitalGauge per metric with the distribution of page loads, a TimeSeriesPanel for the selected metric with Google's good and poor limits drawn, and a table of the busiest pages rated per metric. A mobile / desktop switch appears when you pass device and onDeviceChange. Until connected it shows AnalyticsConnect.

When to useCopy Anchor Link

• Real-user performance reporting from CrUX or your own RUM.
• Deciding which pages to fix first.

When not to useCopy Anchor Link

• Server-side latency: use ApmPage.
• One-off Lighthouse audits.

ImportCopy Anchor Link

import { WebVitalsPage } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { WebVitalsPage } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Vitals({ service, data }: { service: React.ComponentProps<typeof WebVitalsPage>["service"]; data?: React.ComponentProps<typeof WebVitalsPage>["data"] }) {
  const [period, setPeriod] = useState(28);
  return <WebVitalsPage service={service} data={data} site="nasaq.dev" period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;
}

AnatomyCopy Anchor Link

WebVitalsPage          AnalyticsPageFrame
  verdict card         passes / does not pass / not enough data
  WebVitalGaugeGrid    five selectable gauges
  TimeSeriesPanel      selected metric + good/poor lines
  pages table          LCP, INP, CLS per page, rated

APICopy Anchor Link

WebVitalsPageCopy Anchor Link

WebVitalsDataCopy Anchor Link

vitals (per metric: { p75?, previous?, distribution? }; ms, CLS as a score), series (rows of date with each metric's p75 under its id) and pages ({ id, url, loads, vitals }).

ExamplesCopy Anchor Link

Device switch:

import { WebVitalsPage, type IntegrationService, type WebVitalsDevice } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Split({ service }: { service: IntegrationService }) {
  const [device, setDevice] = useState<WebVitalsDevice>("mobile");
  return <WebVitalsPage service={service} device={device} onDeviceChange={setDevice} period={28} onPeriodChange={() => {}} onConnect={async () => {}} onDisconnect={async () => {}} />;
}

AccessibilityCopy Anchor Link

The page has one h1; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through labels. The verdict is text with an icon, not colour alone.

RTL & i18nCopy Anchor Link

• The whole page mirrors; charts run right to left.
• URLs, paths and identifiers stay left-to-right inside Arabic text.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.
• Metric ids (LCP, INP, CLS) and page URLs stay left-to-right.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Composed from tokens only; extend with className.

Do / Don'tCopy Anchor Link

• Do pass the 75th percentile.
• Do send CLS as a plain score and the others in milliseconds.
• Don't call a page good when one Core Web Vital is not.

RelatedCopy Anchor Link

• web-vital-gauge
• time-series-panel
• status
• analytics-connect

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-monitoring-pages-web-vitals--docs