shadcn.io is not affiliated with official shadcn/ui
Capacity Planning Changelog Block for React
Four resource cells on shared hairlines, each with a ring for how full it is, what it was a release ago and how long until it is full at this rate, with a toggle that picks the release.
Installation
Overview
A capacity-planning block for React with Base UI, written for Gaugewell, a fictional capacity planner. A start-aligned header carries a title worked out from the newest readings (which resource fills first, and in about how many days) and a toggle that picks one of the last three releases. Under it four cells on shared hairlines, a 2 x 2 on a phone, one for each resource (CPU, memory, storage, network): a ring for how full it is with the percentage rolling to the new value, what it was at the release before and how long until it is full at that release's growth rate, or Not filling up when it shrank. It's built from Circular Progress, Toggle Group, Sliding Number and Guides, with your theme's tokens for every colour. For capacity reports, release reviews and infrastructure dashboards. The readings are example data.
FAQ
How do I change the readings?
Edit RELEASES (newest first, each with the day the readings were taken) and RESOURCES. A resource has one reading per release, in the same order: the percent in use and the percentage points it gained per week. The ring, the previous value, the days until full and the title are worked out from those numbers, so they cannot disagree.
How is the time until full worked out?
As the room left (100 minus the percent in use) divided by the weekly gain, in days. A resource that is not growing shows Not filling up, and one that would take more than a year shows Over a year. It is a straight-line projection from one release's rate, nothing more, and the header says the readings are projections of growth.
What does the toggle do?
It picks the release whose readings are shown. The percentages roll to their new digits, the rings follow and a polite line reads the result aloud, for example which resource fills first at that release. All three releases show the same cells, so the page's height never changes. The choice stays local.
How does a screen reader get the rings?
The rings are decorative and hidden. Each cell has a heading with the resource, and a description list with the previous value and the time until full in words. The percentage in use is read from the status line when the release changes.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the four cells become two rows of two, with the same ring size. The percentage inside each ring is always read left to right. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.
Related
- Pro
Error Budget Burn-Down Changelog
Incidents and uptimeA thirty-day error-budget burn-down with release flags you can pick, an incident ring, a table of each release's consumed share and burn rate, and a short list of figures.
- Pro
Segmented Bar Latency Budget
Metrics and chartsA single bar that slices a 250 ms request budget by hop (edge, auth, database, render), a switch between two releases that re-slices it, and a four-cell band with each hop's milliseconds and its change.
- Pro
Paired Bars Queue Metrics
Metrics and chartsFive message queues as rows of paired bars, the release before as an outline and the current release solid, with a three-way switch between throughput, lag and dead letters, and a header that counts the lagging queues.
- Pro
Release Pins Service Health Dashboard
Incidents and uptimeA health board for a hosting product: four service lanes of thirty daily cells, with a row of release pins above them that open a card of what shipped, and the month's uptime at the end of each lane.
- Pro
Donut Pill Legend Stats
Parts of a wholeA traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.
- Pro
Cost Optimization Changelog
Metrics and chartsNine cost savings grouped by category in one accordion: each row shows the category's dollars saved a month and a share bar, and opens to the wins and the release that shipped each.