Gradient Trend Sparkline Stats Block for React

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.

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.

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.

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.

On load the header and the band fade up, the line draws from the start to the end and the dot appears last, all with CSS transitions. With reduced motion every transition is off and the finished chart is simply there.

Below md the three cells become a snap scroller, each 85% of the width, so the next cell peeks in. The lines keep their height, and nothing scrolls the page sideways at 320 pixels.