Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.
The import and the props worth knowing about, in one place.
import { Monitoring2 } from "@/components/beste/piece/monitoring2";
<Monitoring2
surface="card"
bordered={true}
inverted={false}
resource="cpu"
value={72}
tone="emerald"
cpuLabel="CPU"
memoryLabel="Memory"
diskLabel="Disk"
networkLabel="Network"
/>Streaming bar chart that pushes a fresh sample every few hundred milliseconds, flags spikes in amber, and keeps a rolling p95 in the corner.
Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.
Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.
Circular progress dial holding a percentage at its center, captioned with a label and supporting hint.