shadcn.io is not affiliated with official shadcn/ui
Usage History Billing Block for Vue
Six billing periods in a table, each with its total requests, a sparkline of daily requests against a dashed limit line, the busiest day as a share of the limit and a status, narrowed by a filter and downloadable as JSON.
Installation
Overview
Show how usage has moved from one period to the next, with this usage history for Vue with Ark UI. Inside a hairline frame with a plus mark on each corner, a table has a row for each of the last six billing periods: its dates and length, its total requests in millions, a sparkline of its daily requests in foreground weight with the 90,000 a day limit as a faint dashed line behind it, the busiest day as a share of that limit, and a status in words with an outline Badge and a dot that is hollow for Normal, half for Near limit and solid for Over. A Segment Group in the header narrows the table to the periods near or over the limit; the other rows keep their space, so the panel never changes height. The action foot says how many periods are showing beside the only Shine Button, wrapped in a Download Trigger, which saves the periods on show as a real JSON file with their daily counts. Below the medium breakpoint each period is a card with the sparkline under its dates. For observability, analytics and API products with a plan limit.
FAQ
How do I fill it with my own periods?
Replace the PERIODS list with your closed periods, each with its start date, its length and its daily request counts (the demo generates them from a fixed seed so the page reads the same every time). LIMIT is the daily limit the dashed line and the percentages use. The totals, the busiest day, the standing and the JSON are all worked out from the daily counts.
How is the status decided?
From the busiest day of the period as a whole percent of the limit: under 80 is Normal, 80 to 99 is Near limit and 100 or more is Over. The status is written out, with a dot that differs in weight rather than colour, so it reads the same in any theme and without colour vision. The share shows beside the sparkline.
Does the filter really filter?
Yes, and it keeps the layout still. Choosing Near or over hides the Normal periods, and their rows stay in place, empty, so the table, the footer and the page below never jump. The count in the header, the status line and the JSON all follow the filter.
Is the download real?
Yes. The Shine Button sits inside a Download Trigger and saves a JSON file of the periods on show, each with its dates, total, busiest day, share, status and daily counts, built in the browser from the typed data. The status line says how many periods were saved. Nothing is uploaded.
What stays local, and how do I wire it for real?
The figures are example data and nothing is read from an account. To make it real, load the closed periods from your metering, keep the daily counts you want in the sparkline, and let the download call your own export when the log is too large for the browser.