shadcn.io is not affiliated with official shadcn/ui
Disk I/O Latency Monitoring Block for React Aria
Disk latency as a heatmap of 30 two-minute windows by 10 latency buckets from 0.1 to 100 ms, a Read or Write switch, a range that picks a window and its p50, p99 and slow share, and written data and throughput.
Installation
Overview
Spot the minutes when a disk got slow with this latency heatmap for React with React Aria. It is Platterwick, a storage performance tool, and the header is worked out from the typed counts: "the slowest window starts at 13:58 UTC, when 16.8% of reads took 6.3 ms or longer". In a hairline frame with a plus mark on each corner, 30 two-minute windows run across and 10 latency buckets run down from 0.1 ms to 100 ms on a doubling scale; each cell is shaded in five steps by how many operations landed in it, so a slow band shows as a smear of darker cells near the bottom of the scale. Two radios switch between reads and writes. A native range selects a window, opening on the slowest one, and the side list reads its p50 and p99 (the bucket each falls under), how many operations it held and the share that took 6.3 ms or longer, with data written today and throughput below. Guides draw the frame and its bands; the entrance is CSS only. For databases, build disks and any volume where the average hides the tail.
FAQ
How do I load my own counts?
Each cell is an integer count of operations. countOf builds them from a shape per bucket (READ_SHAPE, WRITE_SHAPE), a total per window and a slow share per window (SLOW_BY_COLUMN) with a small fixed jitter. Replace it with your histogram counts, ten per window, and keep EDGES as your bucket boundaries. The shading, the percentiles, the slow share, the header and the opening window are all worked out from the counts.
How are p50 and p99 found?
By walking the buckets of the chosen window from the fastest and stopping at the first one that holds half, or 99 percent, of the operations. The block says which bucket that is ("under 0.8 ms"), because with doubling buckets that is all the counts can prove.
Is anything measured here?
No. The counts, the volume and the throughput figures are typed examples and nothing reads a disk; the foot says so. In your app read a latency histogram from your storage agent, for example the bucketed counters of blktrace or an eBPF tool.
What does a screen reader get?
The heatmap is hidden from assistive technology and a caption says what it shows: the span, the bucket range, the p50 and p99 for the hour and the slowest window. The range is a native slider whose value text reads the window ("13:58 to 14:00 UTC"), and the side list gives that window's exact figures.