Realtime streamPro

• Watching a metric as it happens: latency, requests, sensor readings, active users.
• Status pages and dashboards where the last minute matters most.

• History over hours or days: use a line or area chart.
• Values that change less than once a minute: a stat card is clearer.

Import it from @/components/ui/realtime-stream after installing.

import { RealtimeStream } from "@/components/ui/realtime-stream";

export function Latency() {
  // Return the latest reading; called every interval.
  const next = () => readLatency();
  return <RealtimeStream next={next} unit="ms" threshold={220} label="p95 latency" />;
}

• The chart has a text summary of the latest value, average and peak.
• Values are not announced on every tick, so screen readers aren't flooded.

• The line slides one step across each interval, so it glides instead of jumping.
• With reduced motion the line updates in place and the live dot doesn't pulse.

• Width follows the container; the stats wrap under the value on narrow screens.

• Sampling stops when the chart is off screen or the tab is hidden.
• One SVG path; the slide runs on the compositor.

• Keep next() cheap and synchronous: read the latest value pushed by a WebSocket into a ref.
• Pass a stable next (useState or useCallback) so the timer isn't reset on every render.