shadcn.io is not affiliated with official shadcn/ui
Network Traffic Dashboard Block for Ark UI
A mirrored 24-hour chart with inbound above and outbound below the axis, a two-thumb slider that picks the hours to read, and totals, the busiest hour and the top three talkers for that range.
Installation
Overview
Read one stretch of the day in your network traffic with this flow panel for React with Ark UI. A hairline frame with a plus mark on each corner draws 24 hourly columns of Packetvale inbound traffic above a centre axis and outbound below it, in GB. A two-thumb Slider under the chart is the brush: the hours outside it fade, and the band below totals inbound and outbound for the range, names the busiest hour and lists the top three talkers with their address, region and GB, worked out from each address's hourly totals. A Toggle Group in the header shows both directions or fades one, and ranks the talkers by it. A hidden table lists every hour. For network and capacity teams.
FAQ
How do I fill it with my flows?
Replace ADDRESSES and the hourly series they are built from with your own per-address inbound and outbound GB for each of 24 hours, plus a series for the rest of the traffic. The chart, the totals, the busiest hour and the ranking are all worked out from those.
How does the slider work?
Each thumb is an hour from 00:00 to 23:00 and the range includes both ends. Arrow keys move a thumb by one hour, and the reading names the range, such as "From 08:00 to 17:00 (10 hours)". The two thumbs can meet on one hour.
What does the direction toggle do?
Inbound or Outbound fades the other side of the chart and ranks the talkers and picks the busiest hour by that side alone. Both ranks by the two together.
What stays local, and how do I wire it for real?
Everything: the series are seeded and typed, the addresses are from the documentation ranges and nothing is captured. To wire it, aggregate your flow logs by hour and address and keep the units, GB or bytes, the same in the chart and the table.