shadcn.io is not affiliated with official shadcn/ui
Accordion Region Progress Stats Block for React
Quota attainment for a regional sales team, three regions in an accordion whose trigger shows the rolled-up bar and whose panel lists each territory.
Installation
Overview
Region progress for React with Base UI. Regionly, a sales desk, rolls eight territories into three regions. Each region is an Accordion item that can stay open with the others. The trigger shows the region, a decorative bar of its rolled-up percent and that percent; the panel lists the territories, each with its own Progress bar. North America starts open and the other two start closed, on every screen size. The heading's "76%" is every territory's closed revenue over every territory's quota. The block has no state of its own: it's Guides, Accordion, Progress and CSS transitions for the entrance. For the numbers section of a sales or revenue page.
FAQ
How do I change the regions?
Edit REGIONS at the top of the file. Each region has an id, a name and a list of territories, and each territory has a label, closed and quota in dollars. The region's percent, the heading and every bar are summed from the territories, so a trigger can't disagree with its panel. The first region's id is the one that starts open.
How is a region's percent rolled up?
Closed dollars are added, quota dollars are added, and the percent is the rounded share. North America is Atlantic, Lakes and Pacific: 182, 141 and 96 thousand closed, against 200, 160 and 140 thousand of quota, which is 84%. The heading does the same sum across all three regions. The row writes the dollars in thousands, $182k / $200k.
Can more than one region stay open?
Yes. North America starts open, and opening Europe or Asia Pacific leaves it open. The same is true on a phone: nothing expands or collapses the regions when the screen changes.
The Accordion takes multiple and defaultValue with that first id.
Are the closed regions in the page HTML?
Yes. The Accordion takes hiddenUntilFound, so a closed panel stays in the markup as hidden="until-found". The browser's find-in-page can open the region that holds a match.
Which bar is the real meter?
The one in the panel. The bar on the trigger is hidden from assistive technology, because a progressbar inside the button would be a second widget with the same news as the percent already in the button's name. Each territory bar is a progressbar named with its desk and its closed-to-quota ratio. The plus on the trigger turns into a minus while the region is open, and the catalog's chevron is hidden.
Related
- Pro
Progress Bar List Stats
Goals and progressSix launch milestones in one hairline frame, each with its owner and due week, its count against the target, the percentage and a Progress bar, under a headline that counts the milestones done.
- Pro
Dense Checklist Progress Stats
Goals and progressA dense onboarding checklist for a customer-success tool, ten steps in a three-part row beside a summary of how far new accounts get.
- Pro
Capacity Threshold Progress Stats
Goals and progressCloud capacity for an infrastructure team, resource bars whose fill weight steps at 70 and 90, with a status mark on anything past 90.
- Pro
Rep Attainment Table Stats
Goals and progressA quota table for a sales team, each rep's attainment bar beside a badge for the change on last week.
- Pro
OKR Target Cards Stats
Goals and progressThree objective cards for an OKR tool, each with a large completion percent that is the mean of its three key results, nested key-result bars with current and target, and a line naming the key result furthest from its goal.
- Pro
Goal Status Board Stats
Goals and progressA rail-to-rail status board for sales pace: four cells that lead with a state word and a glyph, Ahead, On pace, Behind or Missed, three figures each, and a legend row that defines the four glyphs.