shadcn.io is not affiliated with official shadcn/ui
API Usage Metrics Changelog Block for React
Six weeks of requests as stacked columns by API version, the legend and title reading the latest week's shares from the data, a Requests or Share toggle, and a three-cell band of requests, error rate and p95 latency with their changes.
Installation
Overview
An API usage changelog for React with Base UI, written for Countwell, a fictional API gateway. The title is computed from the data ("v1 is down to 8% of Countwell traffic"), with a toggle group (Requests, Share) at the header's end. A framed figure sits on the page's lines with + marks on its corners: a legend of the three versions with their share of the latest week (whole numbers that add up to 100), then six stacked columns, one segment per version (v1 hatched, v2 a mid grey, v3 solid, so none relies on tone alone), each with its total or v1's share above and its week under it. Under the chart a three-cell band gives the latest week's requests, error rate and p95 latency, each with its change as an arrow and a sign. Share redraws every column to full height so the segments read as shares. The drawing is hidden from assistive technology and an unseen table holds every number. On a phone the oldest week drops and the three cells stay in a row. It's built from Toggle Group and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For usage reports, deprecation campaigns and release notes about adoption. The traffic is example data.
FAQ
How do I change the weeks and versions?
Edit WEEKS at the top of the file: each week is an iso day, a label and the millions of requests for each entry of VERSIONS (v1, v2, v3), in that order. The column heights, the totals, the legend shares and the title are all computed from those numbers, and CEILING sets the chart's top, so keep every weekly total below it. The three figures under the chart sit in VITALS.
How are the shares worked out?
Each version's share of the latest week is rounded down to a whole number and the points left over go to the largest remainders, so the three always add up to exactly 100. The title reads v1's share from the same list.
How are the versions told apart without colour?
By fill, not hue: v1 is hatched, v2 a mid grey and v3 solid, with the same fills in the legend beside each version's name and share, and the stacking order is always v1 at the bottom. The numbers are also in an unseen table, so nothing depends on seeing the fills.
What does the toggle do?
Requests draws each column at its real height with its total above it; Share draws every column at the same height, so the segments read as shares, with v1's share above each. A polite line says which one is showing. The change is a CSS transition, off with reduced motion.
How does it fit on a phone and in a right-to-left layout?
Below sm the oldest week drops, leaving five columns, and the sentence under the title says five instead of six; the three cells stay in a row with smaller type. In a right-to-left layout the labels and figures stay left to right inside their own isolates, and the legend and cells follow the reading direction.
Related
- Pro
API Response Time Changelog
Metrics and chartsPaired bars for five endpoints on a shared 0 to 400 ms axis, the previous release pale and this one solid, with the change in rolling percent digits, the optimisation behind it and a p50, p95 or p99 toggle that redraws the bars.
- Pro
API Versioning Matrix Changelog
APIs and integrationsA framed table of API versions with a status badge (Current, Supported, Deprecated, End of life), release and support-end days and a check or minus per capability, with a toggle group that rings one capability's column and says which versions have it.
- Pro
API Deprecation Timeline Changelog
APIs and integrationsA v2 API retired in four phases as read-only Steps in cells that share their hairlines, then a framed table of the five deprecated endpoints with a Copy button on each replacement.
- Pro
Plan Cells Rate Limit Dashboard Changelog
APIs and integrationsThree plan cells showing usage against a new hourly limit: a rolling count of requests, a progress bar with a tick at 80%, the remaining requests, the share used, the new limit with the old one struck through and the pace, with a toggle between the current hour and the peak hour.
- Pro
Tabbed Window Uptime History
Incidents and uptimeA tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.
- Pro
API Changes Changelog
APIs and integrationsA band of ruled rows listing changed API endpoints, each with its method, path, one line on what changed, a kind (Added, Changed, Removed) and its version, filtered by HTTP method with a toggle group that sums up what is showing.