shadcn.io is not affiliated with official shadcn/ui
Sprint Summary Changelog Block for Svelte
An iteration picker over a velocity band (points, tasks, completion with a progress bar) and the iteration's entries in three columns, New, Improved and Fixed.
Installation
Overview
A sprint summary for Svelte with Ark UI, written for Cadencer, a fictional sprint planning tool. A compact header carries a Select at its end to choose an iteration (the latest three are Iteration 24, 23 and 22). Under it one inset frame holds the chosen iteration: a velocity band of three facts, the points completed against those planned, the tasks done against all of them, and the completion rate with a Progress bar; and below it the entries in three columns, New, Improved and Fixed, each marked with a filled square when done and an empty one, with the words "Carried over", when it moved to the next iteration. Every iteration sits unseen under the open one, so choosing another never changes the frame's height. It's built from Select, Progress, Guides and CSS, and takes your theme's tokens for every colour. On a phone the three columns stack. For sprint reviews, release train notes and any team that reports by iteration. The product and the entries are example data, and every figure is computed from the entries.
FAQ
How do I change the iterations and entries?
Edit ITERATIONS at the top of the file: an iteration has an id, a title, the span of days it ran and its entries, each with a kind, a title, its points and whether it is done. The velocity, the task counts, the completion rate, the column counts and the status line are all computed from the entries, so nothing is typed twice.
How is the completion rate worked out?
It is the points of the done entries divided by the points of all entries, rounded to a whole percent. The Progress bar, its screen-reader name and the large figure all use that one number. An entry that carried over counts toward the planned points but not the done ones.
How does the iteration picker work?
It is a Select: Enter or Space opens it, the arrow keys move through the three iterations, Enter chooses one and Escape closes it with focus back on the trigger. On a phone it fills the width. A polite status line says what is now showing, with its points and tasks.
How is a done entry told from a carried-over one without colour?
A filled square means done and an empty one means carried over, and a carried-over entry also says "Carried over" in words under its title. Screen readers hear "Done" or "Carried over" before each title, since the squares are decoration.