Range Marker

100ms500ms
About this piece

Range Marker

Horizontal scale that drops a marker on the current reading and tints the expected window behind it.

Usage

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

import { Monitoring19 } from "@/components/beste/piece/monitoring19";

<Monitoring19
  min="100ms"
  max="500ms"
  position={38}
  bandStart={18}
  bandEnd={52}
  tone="violet"
/>

More Monitoring pieces

View all Monitoring
http.req
auth
db.query
cache.set

Trace Spans

Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.

87%
Cache hitlast 1h

Metric Ring

Circular progress dial holding a percentage at its center, captioned with a label and supporting hint.

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.

Requests
12.4Kreq/s
+12%

Throughput Counter

Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.

CPU
72%

Resource Meter

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

API latency122ms
p95 155ms

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.