shadcn.io is not affiliated with official shadcn/ui
Bandwidth Usage Dashboard Block for React Aria
Six hosting services as bars of this month's bandwidth against a cap tick, with a hatched projection to month end, the projected overage in dollars, a Daily or Monthly switch and a chart of the service you press.
Installation
Overview
See which services will pass their bandwidth cap and what that will cost, with this bandwidth usage panel for React with React Aria. A hairline frame with a plus mark on each corner lists six Tollpost services as rows: a bar for the month's use so far, a tick at the cap, a hatched stretch to where the mean daily use takes it by month end, and the projected overage in dollars at the service's per-GB rate. A Toggle Group in the header flips the rows between Monthly, which compares use to date with the cap, and Daily, which compares today's use with a thirty-first of the cap. Pressing a row draws it below: its running total against an even pace to the cap in the monthly view, or its daily bars against the daily share in the daily view. It's built from Toggle Group and Guides. For hosting consoles and usage pages.
FAQ
How do I fill it with my services?
Edit SPECS: a name, the cap in GB, the overage rate per GB, and the numbers the demo series is generated from (a base use, its growth and a seed). Replace the generated daily series with your metered GB for each elapsed day and keep ELAPSED and DAYS in step; the use, the projection, the overage and both charts are worked out from the daily values.
How are the projection and the overage worked out?
The projection is the mean daily use so far held flat for the rest of the month: use to date divided by the days elapsed, times the days in the month. Overage is whatever the projection passes the cap by, times the service's rate. A service on pace to stay under says so instead of showing a zero.
Why do the bars have different scales?
The caps run from 800 GB to 12 TB, so on one scale the small services would be a hairline. Each bar is scaled to its own cap or projection, whichever is larger, and the note under the list says so. The numbers beside each bar are the same scale for everyone.
What stays local, and how do I wire it for real?
Everything: the daily totals are typed and "now" is a fixed 18 October. To make it real, read daily egress per service from your billing or metering API, pass today's date in, and take caps and rates from the customer's plan.