shadcn.io is not affiliated with official shadcn/ui
Gradient Trend Sparkline Stats Block for Svelte
Three ratings metrics for an app-store tracker in cells that share their hairlines, each with a twelve-week line filled beneath it when it climbs and above it when it falls.
Installation
Overview
A sparkline stats band for Svelte with Ark UI. A centred header states the headline (ratings up by a number of stars in twelve weeks), then three cells share their hairlines in a band that runs from rail to rail: average rating, new reviews a week and the one-star share. Each cell has its latest value, the change since the first week (an arrow and a sign) and a twelve-week line with a dot on the last week. The fill answers the direction without any colour: a line that climbs is filled beneath it, fading toward the foot; a line that falls is filled above it, fading toward the top. Both fills are your text colour at a weight, faded with a mask, so they follow any theme preset. Every figure and every shape comes from one set of weekly readings. Three across from md; on a phone the cells scroll sideways and snap. For ratings, growth and portfolio pages where the direction of a number should read before its size.
FAQ
How do I change the metrics and the weeks?
Edit WEEKS and METRICS at the top of the file. A metric is a label, a list of weekly readings (oldest first, one per week), how its change is written (percent, points or stars) and a function that writes a reading. The value, the change, the line, the fill's side and the line's accessible name are all computed from that list. Keep every series the same length as WEEKS.
How does the fill know which side to fill?
It compares the last reading with the first. A series that ended higher is filled between the line and the foot of the cell, with a mask that fades toward the foot; one that ended lower is filled between the line and the top, fading toward the top. The fill is the text colour at 30%, so no hue is involved and the look holds in light, dark and every preset.
Why aren't rises green and falls red?
Whether a change is good depends on the measure: a falling one-star share is good news, and a falling review count may not be. The block shows the direction with the side of the fill, an arrow and a sign, and leaves the judgement to the reader. It also stays correct in every theme.
Is it accessible?
Each line is an image with a text name that gives where it starts and ends, its lowest week and its highest, so the drawing never carries a number alone. Each cell is a description list: the label is the term, and the value and the change are its descriptions. Values sit in bdi elements and signed changes are kept left to right for right-to-left pages. On a phone the scroller takes focus, so the keyboard can reach every cell.