shadcn.io is not affiliated with official shadcn/ui
Pill Trend Sparkline Stats Block for Radix UI
Three delivery measures as rail-to-rail rows, each with a wide twelve-week line whose change on the week before is a pill pinned to the end of the line, level with the last point.
Installation
Overview
A sparkline stats band for React with Radix UI. A start-aligned header states the headline (orders delivered rose by a number this week), then a band of three rows runs from rail to rail, divided by hairlines and ending the block. A row has a measure and its latest value at the start and a wide twelve-week line beside it. The change on the week before is not a figure next to the value: it is a pill pinned to the end of the line, level with the last point, so the eye reads the line and lands on what it did. The pill is filled for a rise, outlined for a fall and tinted for no change, and each carries its arrow and its sign, so colour tells nothing. The pill's height comes from the same geometry as the line. For operations, logistics and marketing reports where the question is what changed last. On a phone the line sits under the value and the pill stays at its end.
FAQ
How do I change the rows?
Edit MEASURES at the top of the file: a label, twelve weekly readings (oldest first), the decimals to show and a suffix. The value, the percent change on the week before, the line and the pill's height are computed from the list.
How is the pill kept level with the end of the line?
The geometry helper returns where the last point sits as a percent from the top of the box. The dot and the pill are HTML elements positioned at that percent, so they stay level (and the dot stays round) while the line's box stretches. The line stops short of the box's end to leave room for the pill.
How are rise, fall and flat told apart?
By glyph and fill, never by colour: a rise is a filled pill with an up arrow, a fall is an outlined pill with a down arrow, and no change is a muted pill with a dash. The sign is a real plus or minus sign and is kept left to right for right-to-left pages.
Is it accessible?
Each row is a description list and each line is an image with a text name giving its start, end, lowest and highest week. The pill's text reads as "+3.9% on the week before". Values sit in bdi elements. Nothing depends on colour.