Sparkline Stats Block for React

Edit METRICS: each is a label, a kind (total for counts, average for rates), a unit and a series of thirty daily readings, oldest first. The series here come from dailyOf, which draws a steady climb with a weekday pattern and a little seeded noise; replace it with your own arrays. The cell's figure, its change, the line and the headline are computed from the series.

The fill is its own SVG path under the line, faded toward the foot with a CSS mask, so there are no gradient definitions to keep unique. The line is a second SVG on top with a non-scaling stroke, so it stays 2 pixels at any width. The end dot is HTML, so it stays round.

Whether a change is good depends on the figure: a falling bounce rate is good news. Each change is an arrow and a sign in the text colour, so the block is correct in every theme and readable without colour.

Yes. Each cell is a description list: the label, the value and the change are read together. Each line is an image whose name gives where it starts and ends, its lowest and its highest, and the days under it say what it covers. Values sit in bdi elements and the lines are dir="ltr", so a right-to-left page keeps time running the same way.

The header and the cells fade up once, the numbers roll up when they scroll into view and each line draws from start to end. With reduced motion the transitions are off and everything appears at once.

The three cells stack, one per row, each keeping its line; nothing scrolls sideways at 320 pixels.