shadcn.io is not affiliated with official shadcn/ui
Velocity Chart Team Block for React Aria
Six sprints of a QA team's velocity as paired bars (planned in a hatched outline, delivered solid, with a dashed average), a button per sprint that drives the figures and the five engineers' rows below, each opening its tickets and share.
Installation
Overview
A velocity section for React with React Aria, for Haverigg, a QA automation suite. A compact header leads into a split. At the start, a framed chart with + marks on its corners draws one pair of bars per sprint: the points planned as a hatched outline and the points delivered solid, with both numbers written above the bars and a dashed line for the average delivered. Every sprint is a button: pick one and, at the end of the split, the delivered points, the share of the plan and the points carried over follow, rolling to their new numbers. Under the split, the five engineers are hairline rows from rail to rail, each with their points that sprint and a bar; a Details button opens their tickets closed, their share of the sprint and what they usually work on. It's built from Avatar, Progress, Button, Sliding Number and Guides. Sprints are numbered, never dated. For engineering pages, retrospectives and any team that shows how steady its delivery is.
FAQ
How do I change the sprints and the people?
Edit SPRINTS (the number and the points planned) and PEOPLE (a name, a role, what they usually work on, and their points and tickets per sprint, in the same order as SPRINTS). The points delivered in a sprint are the sum of the people's points, so the chart, the figures and the rows can't disagree. The chart's top, its gridlines and the average are computed from the same lists.
How do I pick a sprint with a keyboard and a screen reader?
Each sprint is a button in a list, with aria-pressed. Tab through them; Enter or Space picks one. Its name is the sprint and its numbers ("Sprint 12: delivered 54 of 59 planned points"), which also serves as the chart's text twin, and a polite status line reads the result of a pick (delivered, share of the plan and carry-over) without moving focus. The drawn numbers and bars are hidden from assistive technology so nothing is read twice.
What do the three figures mean?
Points delivered against points planned for the picked sprint; the share of the plan that was delivered, as a whole percent; and what was carried over to the next sprint, the points planned that were not delivered (or None, when everything was). They roll to the new numbers when you pick another sprint.
How do the Details buttons work?
Each is a button that says whether its row is expanded and which panel it controls, and the panel opens in place: tickets closed, share of the sprint and what the person usually works on, for the sprint you picked. A closed panel has no height and is hidden from sight and from the keyboard. Opening a row makes the block taller; picking a sprint never does.
Why is the planned bar hatched?
The plan is a promise, the delivery is a result: so the plan is an outline with fine hatching and the result is solid, which reads without colour. The picked sprint's delivered bar is the full foreground tone and the others a step lighter. The average is a dashed line, named in the legend.
How does it fit on a phone?
The chart stays whole: the bars narrow, each label drops the word Sprint and keeps its number (the button's name still says Sprint), and the legend wraps. The figures stack under the chart and each row puts its bar under the name, with the Details button at the end of the name line. Nothing scrolls sideways at 320 pixels.