shadcn.io is not affiliated with official shadcn/ui
API Usage Dashboard Block for React Aria
A month's 10M-call quota as a segmented bar by consumer and a running total against an even pace, with the projected run-out day and a cap field per consumer that moves it.
Installation
Overview
See who is burning the quota and when it runs out, with this API usage panel for React with React Aria. A hairline frame with a plus mark on each corner opens with a segmented bar of the month's 10M calls by consumer (Web app, Mobile app, Partner feed, Nightly sync and Others) in foreground weights, then a running-total chart against a straight pace line, a dashed projection and a diamond on the day the quota is reached. Each consumer row has a Number Input for a monthly cap that reads "No cap" until you set one: a cap stops that consumer's projection at its limit and moves the date. A Native Select in the header switches between October, which is open, and September, which is closed and only reads, and a Shine Button saves the caps. It's built from Number Input, Native Select, Button, Shine Button and Guides. For developer consoles and metering pages.
FAQ
How do I fill it with my usage?
Edit CONSUMERS and the periods. Each period has daily: calls made by each consumer on each elapsed day, the number of days in the month, a month and whether it is open. The bar, the chart, the shares, the projection and the header sentence are all worked out from those, and QUOTA is the plan's allowance.
How is the run-out day projected?
For each consumer, the mean of its last seven days is held flat for every remaining day. A consumer with a cap stops adding calls once it reaches the cap. The projection sums them day by day and reports the first day the total reaches the quota, or says the quota holds to month end. The note under the chart says the same thing.
Do the caps do anything?
They change the projection and nothing else: set a cap on the Partner feed and the dashed line bends, the month-end figure for that row drops and the run-out day moves later. Save caps keeps them in this page and says so; nothing is enforced. Caps are typed as whole calls, and anything else is tidied when the field loses focus, which is also when React Aria's field commits a value.