shadcn.io is not affiliated with official shadcn/ui
Velocity Chart Team Block for React
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 Base UI, 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.
Related
- Pro
Burndown Chart Card Stats
Area and lineA sprint burndown in a card in a card: the ideal burn as a dashed line, the actual remaining work as a solid one, the gap shaded, a tick where scope was added and a band of three figures under the chart.
- Pro
Grouped Bar Chart Stats
Bar and columnTwo bars per month, this year solid and last year lighter, with a Chart and Table switch that swaps the drawing for a real table of the same numbers in the same box.
- Pro
Utilisation Bars Team
Projects and workloadSeven designers' utilisation as hairline rows with a bar under each name and one line through every bar at 85%, tasks and points beside it, a word and an icon for who is over the line, a team average and a switch that sorts by load or by name.
- Pro
Capacity Planner Team
Projects and workloadA capacity planner for an engineering team: six people as stacked bars, a segment per project and the free capacity as a muted track, with a slider for incoming work that draws a hatched piece in the free space of everyone who could take it.
- Pro
Goal Rings Team
Learning and mentoringFour goal rings for a quarterly-planning tool in cells that share their hairlines: each ring fills to the goal's progress with a tick where the quarter stands, so ahead and behind read at a glance, over a band that counts goals done, in progress and blocked.
- Pro
Target Line Bar Chart Stats
Bar and columnFourteen daily bars against a labelled quota line in a framed chart, days at or above the quota solid and days below it outlined, with a two-cell band under it for days met and the average against the quota.