Thirty-tick history strip in the style of a status page, with pass, slow, and fail segments and a rolling availability number.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Monitoring4 } from "@/components/beste/piece/monitoring4";
<Monitoring4
endpoint="auth.beste.co"
history={[
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"slow",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"fail",
"ok",
"ok",
"ok",
"ok",
"ok",
"slow",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok"
]}
uptime="99.92%"
pastLabel="30d ago"
nowLabel="Today"
/>Bare ECG-style heartbeat trace with a pulsing live dot at the leading edge and no other chrome.
Compact service health row with operational state, pulsing dot, and uptime percentage on the right.
Compact response-time card pairing a percentile pill, the latest reading, and a smoothed sparkline trail.
Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.
Multi-region availability list with a status dot per cloud region and the round-trip latency rendered in mono.
Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.