Seven-row activity grid that bins each cell into one of five tonal steps for at-a-glance density.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Monitoring11 } from "@/components/beste/piece/monitoring11";
<Monitoring11
data={[
0,
1,
2,
1,
0,
1,
2,
3,
2,
1,
0,
1,
1,
2,
3,
2,
1,
2,
3,
4,
3,
2,
1,
0,
0,
1,
1,
2,
2,
3,
4,
4,
3,
2,
2,
1,
1,
0,
1,
2,
3,
3,
4,
3,
2,
1,
1,
2,
2,
1,
0,
1,
2,
2,
3,
4,
4,
3,
2,
1,
0,
1,
2,
1,
1,
2,
3,
3,
2,
1,
0,
1,
1,
0,
1,
2,
1,
2,
2,
3,
2,
1,
1,
0
]}
tone="emerald"
/>Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.
Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.
Compact service health row with operational state, pulsing dot, and uptime percentage on the right.
Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.
Vertical battery of segments rendering current queue fill against capacity, with a stacked numeric ratio beside it.
Circular progress dial holding a percentage at its center, captioned with a label and supporting hint.