Live Latency Bars

API latency122ms
p95 155ms
About this piece

Live Latency Bars

Streaming bar chart that pushes a fresh sample every few hundred milliseconds, flags spikes in amber, and keeps a rolling p95 in the corner.

Usage

The import and the props worth knowing about, in one place.

import { Monitoring21 } from "@/components/beste/piece/monitoring21";

<Monitoring21
  label="API latency"
  unit="ms"
  baseline={120}
  spread={60}
  warnAt={200}
  tone="sky"
/>

More Monitoring pieces

View all Monitoring
p95Response time
182ms

Latency Sparkline

Compact response-time card pairing a percentile pill, the latest reading, and a smoothed sparkline trail.

web-01fra1
CPU42%
MEM61%
web-02iad1
CPU67%
MEM58%
worker-01sfo1
CPU23%
MEM74%

Server Pulse

Three server rows whose CPU and memory bars breathe with fresh readings every second, turning amber and red past their thresholds beside a live status dot.

CPU
72%

Resource Meter

Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.

api
42ms
db

Service Link

Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.

auth.beste.co99.92%
30d agoToday

Uptime Heartbeat

Thirty-tick history strip in the style of a status page, with pass, slow, and fail segments and a rolling availability number.

live

Pulse Wave

Bare ECG-style heartbeat trace with a pulsing live dot at the leading edge and no other chrome.