shadcn.io is not affiliated with official shadcn/ui
Network Traffic Monitoring Block for React
A day of five-minute bandwidth samples sorted into a duration curve with the 95th percentile you are billed on, hatched free bursts, a direction toggle and a cursor that reads how long traffic stayed above a level.
Installation
Overview
See what a link is billed on, not just how busy it was, with this bandwidth panel for React with Base UI. It is Pipemeter, a bandwidth monitor (made up), showing 288 five-minute samples from one day on a 10 Gb/s link. They are sorted from the busiest to the quietest and drawn as a duration curve, so the start of the axis is the peak and its end is the quietest five minutes. The busiest 5% of samples are hatched as free bursts because 95th percentile billing ignores them, and a rule marks the billed level. A Toggle Group switches between inbound, outbound and the greater of both at each sample, and the curve and the figure under it follow. A hidden range over the plot is the cursor: it reads how much of the day traffic stayed at or above a level. Four figures give the billed rate, the free minutes, the peak as a share of the link and packet loss. Guides draw the frame and its bands; the entrance is CSS only. For network teams and anyone reading a transit invoice.
FAQ
How do I use my own samples?
Replace INBOUND and OUTBOUND with 288 numbers each, in megabits a second. In the demo they are generated from a daily curve plus three bursts. The greater-of-both series, the sorted curves and the billed level are derived, and LINK is the capacity in Mb/s used for the peak share.
How is the billed level worked out?
Sort the samples from highest to lowest, ignore the busiest 5% (14 of 288), and bill on the next one. That sample is where the hatched region ends and the rule is drawn. Greater of both takes the larger of inbound and outbound at each sample before sorting, which is a common way to bill but not the only one, so check your contract.
How does the cursor work?
It is a native range laid over the plot, named Share of the day, whose value text gives the share and the level. Arrow keys move it one sample, Home and End jump, and it starts on the first billed sample. The line under the plot updates at once; a polite status line speaks it about 600 ms after the last change.
What is real here and what is typed?
All the samples, the link speed and the packet loss are typed examples and nothing is measured. In your app, feed the same shape from your flow or SNMP counters; the curve and the billing maths do not need to change.