shadcn.io is not affiliated with official shadcn/ui
Waterfall Timeline Block for Svelte
A bakery production run as a staircase of eight jobs, each starting when its parents end, with the critical path drawn solid, slack worked out for the others, L-shaped connectors, and a job that lights its upstream chain.
Installation
Overview
Show which job holds up the rest with this waterfall timeline for Svelte with Ark UI. It is written for Doughline, a fictional bakery production planner. A hairline frame with a plus mark on each corner holds the eight jobs of a Saturday bake: Mix, Rest, Shape, Proof, Bake, Cool, Glaze and Pack. Each job is a bar that starts when the jobs it needs have ended, so the offset is its start and the width is its minutes, joined to its parents by L-shaped connectors on a clock axis from 05:00. The longest chain, the critical path, is drawn solid and named Critical in the job column; the other jobs are lighter and have slack, worked out by a forward and a backward pass over the typed dependencies. The header gives the total, 4 h 35 min from first mix to boxed. Pressing a job brings its whole upstream chain forward and lists when it starts, how long it takes, when it ends, its slack and what it waits on. It is built from Guides and native buttons, with an SVG for the connectors, a CSS entrance and your theme's tokens for every colour. For production planning, build pipelines and any work where one step waits on another. The jobs are example data.
FAQ
How do I change the jobs?
Edit SPECS at the top of the file. Each job has an id, a name, its minutes and needs, a list of job ids it waits on. List jobs so that every job comes after the ones it needs. Starts, ends, slack, the critical path, the total and the connectors are all derived from that list.
How is slack worked out?
With two passes. The forward pass starts each job when the last job it needs ends. The backward pass finds the latest each job could end without moving the total. Slack is the difference; a job with none is on the critical path. In the example Glaze has 20 minutes, because Pack waits for Cool, which takes longer.
What does pressing a job do?
It brings the job and everything it waits on, directly or not, to full strength and dims the rest, and the facts below show its numbers. Glaze is chosen when the page loads so you can see a job with slack.
Is it accessible?
The job column is an ordered list with each job's length and the word Critical where it applies. Every bar is a button named with its job, length and clock times, and the chosen job is reported as pressed. The connectors are decoration; the Waits on fact says the same in words. The chart is a named, focusable scroll region.