shadcn.io is not affiliated with official shadcn/ui
Bandwidth Usage Chart Billing Block for React Aria
A CDN bandwidth bill as running-total columns with a cache hit rate slider that re-derives the billed bytes, the day the allowance is crossed and the overage, plus an add-a-pack button.
Installation
Overview
Show customers why their bandwidth bill is what it is, inside your app, with this bandwidth usage chart for React with React Aria. A hairline frame with a plus mark on each corner holds fourteen columns of October's running traffic: the part that reaches the origin, and so is billed, is solid at the foot of each column, the part the cache served is a light tint above it, and a line marks the plan's allowance. The Slider sets the cache hit rate and everything under it follows: the billed terabytes, the overage and its price at $0.05 a gigabyte, and the day the allowance runs out. A Shine Button adds a 5 TB pack, the only colored control, which lifts the line, and an outline Button takes it off again. Each band's top rule is drawn with Guides. A screen reader gets the same figures as a table and as the sentence under the slider. For CDN, hosting and storage products that bill for egress.
FAQ
How do I fill the chart with my own traffic?
Edit TRAFFIC, the gigabytes served on each day of the period, and PLAN for the allowance, the pack and the overage rate. The running totals, the axis (rounded up to the next 5 TB), the columns and the sentence are all derived from those, so a different number of days only needs the labels under the chart changed. Dates are written in UTC.
What does the cache hit rate change?
The share of traffic your cache answers is not billed as origin egress, so the billed bytes are the traffic times one minus the hit rate. At 82% the 24 TB served so far bills as 4.3 TB, inside the 5 TB allowance; at 70% it bills as 7.2 TB, 2.2 TB over. The slider only moves what the chart assumes: your real hit rate comes from your cache metrics, so start it from that figure.
Is a pack really bought?
No. The button raises the allowance on this page from 5 TB to 10 TB, the line moves, and a status line says "Nothing was bought"; Remove pack puts it back. To wire it, send the purchase to your billing API on press and set the allowance from the response. The label says "Not needed" or "A pack would cover" so the customer isn't nudged to buy something the slider shows they don't need.
How is the chart read by a screen reader?
The drawing is one image with a label that gives the total, the billed amount and the allowance, and an sr-only table lists each day's running total and billed part. The slider is named "Cache hit rate" and speaks its value as a percentage; when you let go, a polite status line reads the new sentence once, so dragging doesn't produce a stream of announcements.