Pill Trend Sparkline Stats Block for React

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.

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.

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.

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.

The band fades up and each line draws from the start to the end, with CSS transitions. With reduced motion they are off and the chart simply appears.

Below lg each row stacks: the label and value first, then the line at full width with the pill still at its end. The line keeps its height and nothing scrolls sideways at 320 pixels.