shadcn.io is not affiliated with official shadcn/ui
Half Donut Card Stats Block for React
A team's weekly capacity as a 180-degree arc of four segments with the total in its foot and a four-cell legend band, with no needle: one whole, shared out.
Installation
Overview
A half donut for React with Base UI. A centred header ("55% of our capacity goes to Build") sits over two bands that run from rail to rail and end the block. The first holds a 180-degree arc of the week's 720 hours of capacity in four segments (Build, Run, Support and Idle) in solid foreground weights, running from the start end of the arc over the top to the far end with a 2 px gap between neighbours, "0" and "100%" under its two ends and the total, rolling up once, in its foot. It has no needle: it shows one whole shared out, not a reading on a scale. The second band is a legend of four cells that share hairlines, each with its swatch, name, hours and share, four across from lg and two by two below it. The shares are whole numbers that add up to 100 (largest remainder), and every arc, share and the total is computed from one typed list of hours. The page's rails and top rule come from Guides, and the bands draw their rules with Guides too, so they carry the + marks.
FAQ
How do I change the segments?
Edit KINDS at the top of the file: each has a label and its hours; PEOPLE is the head count in the header's sentence. Up to four weights are defined in WEIGHTS. The total, the shares, the arcs, the cells and the header's headline are computed from the list.
How is the half ring drawn?
Each segment is a circle that is turned to start at nine o'clock and whose length is set to 200 units, so its first 100 units are the half that shows and 100 units are also 100 percent. A dash pattern draws each segment's share of those 100 units, less a two-unit gap, and the rest of the circle is left empty. It needs no chart library and no path maths beyond the shares.
Why is there no needle?
A needle reads a value on a scale (a gauge); this arc shows how one whole is divided, so its segments are the numbers and the ends are 0 and 100%. For a dial with a needle, use a gauge block.
Is it accessible?
The legend is a description list (a term for the kind of work, its hours and share as descriptions), so a screen reader reads every number. The arc is hidden from assistive technology because the list says the same, and a caption for screen readers says what the ring shows. The total is real text, and with reduced motion the arcs and the digits appear at once.
Related
- Pro
Donut Breakdown Stats
Parts of a wholeA budgeting app's month of spending as a framed donut with its total rolling up in the middle, beside a legend of five buckets with amount and share, the shares adding up to exactly 100%.
- Pro
Stacked Percentage Bar Stats
Parts of a wholeOne thick bar of a consultancy's week split into four segments at four weights with labels inside the wide ones, and a band of four legend cells under it; pointing at or focusing a cell brackets its segment.
- Pro
Dual Gauge Comparison Stats
ComparisonsTwo open 270-degree dials side by side for a sprint-tracking tool, each with its percent done, with a round chip on the divider that gives the gap between the two teams in points.
- Pro
Tick Dial Hero Metric Stats
Hero metricA hero figure for a crowdfunding page as a dial of sixty radial ticks, the share raised drawn at full weight, with the amount raised in the middle and the percent funded beside it.
- Pro
Concentric Rings Stats
Goals and progressA music-practice tracker's three daily goals as nested rings with rounded ends, each running clockwise as far as the minutes played, with a goal that is met drawn as a ring that has closed, and three hairline cells that read minutes against goal.
- Pro
Donut With Callouts Stats
Parts of a wholeA city's electricity mix as a framed donut with four callouts standing round it at twelve, three, six and nine o'clock, each joined to its arc by a thin leader line; on a phone, a two by two grid.