shadcn.io is not affiliated with official shadcn/ui
Weekly Pace Sparkline Stats Block for Svelte
Weekly pacing for a sales team, each line of business with its quarter bar and an eight-week sparkline of that week's bookings.
Installation
Overview
Weekly pace for Svelte with Ark UI. Pacepost, a sales desk, gives each line of business its own cell: the name and the booked-to-target ratio, then a Progress bar for the quarter so far and an eight-week sparkline of that week's bookings at the bar's end. The line is the week's own number, not a running total, drawn as SVG in the text colour at two weights, with the latest week heavier and an HTML dot at the end. The heading's "88%" is every line's bookings over every line's target. On a phone the sparkline sits under the bar. The block has no chart library and no state: it's Guides, Progress, one small SVG per line and a CSS transition on the header. For the numbers section of a sales or revenue page.
FAQ
How do I change the lines of business?
Edit LINES at the top of the file. Each line is a label, a target and a weeks array, oldest week first, both in thousands of dollars. The ratio, the bar's percent, the sparkline and the heading are all read from that. Every line in the sample has eight weeks; the header's "Week 8" is the length of the first line's array.
How is the sparkline drawn?
When the module loads, the eight readings are scaled into a 100 by 100 box, the lowest at 90 and the highest at 10, and the box stretches to the cell (preserveAspectRatio="none" with a non-scaling stroke, so the line stays about 1.5 pixels). The earlier weeks are drawn at 35% of the text colour and the last segment at full strength. The end dot is HTML, positioned from the same numbers, so it stays round. The readings are the week's bookings, so the line can fall from one week to the next. It is not the cumulative pace. That pace is the bar.
Why doesn't a rising week turn green?
A week above the one before is not the same news as a line that is behind its quarter. The bar says the quarter, the line says the shape of the weeks, and both stay in the text colour so they survive every theme. Nothing here is an alert, so there is no status dot.
Is the sparkline accessible?
Yes. Each cell is a description list: the line of business, then the ratio, then the bar and the sparkline. The bar is a progressbar named with the booked and target amounts and the percent. The sparkline is an image whose name gives the first week, the last week, the low and the high, and which weeks those were. The chart box is dir="ltr", because a later week still follows an earlier one in every language, and the ratio sits in bdi.