caliper uidocs
DemoSign inGet Pro

Metrics replay

Pro

Rewind a whole dashboard with one scrubber. Every tile rolls to the value at that moment, lines draw solid up to the playhead and dashed after it, and what happened (a deploy, an alert, a rollback) lists as the playhead passes it.

Installs components/ui/metrics-replay.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/metrics-replay

Tuesday, replayed

Halden production, last 24 hours

  • Requests per minute84932.9%up, good since 00:00
  • p95 latency182 ms1.1%up, worse since 00:00
  • Error rate0.21%5.0%up, worse since 00:00
  • Active users1,91450.0%up, good since 00:00
  1. Evening peak: highest active users this week.
  2. Rolled back to v2.13.2. Latency recovering.
  3. Alert: error rate above 3% for the checkout service.
  4. Deployed v2.14.0 to all regions.
  5. Morning traffic ramps up across Europe.
  6. Nightly backup finished in 14 minutes.

When to use #

Use it for

  • Incident reviews and weekly metrics walkthroughs.
  • Showing a team what happened across several measures at once.

Skip it when

  • A single chart with one story; use the line replay.
  • Live monitoring; use the metrics dashboard.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/metrics-replay

Adds its 10 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { MetricsReplay } from "@/components/ui/metrics-replay"

The worked example comes with Pro

The 32-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

MetricsReplay

component
PropTypeDefaultDescription
titlestring"Replay"
descriptionstring—
steps *readonly string[]—Labels for each moment, e.g. hours of the day.
metrics *readonly ReplayMetric[]—
eventsreadonly ReplayEvent[][]
secondsnumber12Seconds for a full pass at 1×.
autoPlaybooleanfalse
classNamestring—

Accessibility #

It is built on native elements and keeps aria-label, aria-hidden and aria-valuetext in step with state.

KeyBehaviour
→Moves to the next item or value.
←Moves to the previous item or value.
SpaceActivates the focused control.

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.