Weekly Pace Sparkline Stats Block for React

Edit LINES at the top of the file. Each line is a label, a target and a weeks array, oldest week first, both in thousands of dollars. The ratio, the bar's percent, the sparkline and the heading are all read from that. Every line in the sample has eight weeks; the header's "Week 8" is the length of the first line's array.

When the module loads, the eight readings are scaled into a 100 by 100 box, the lowest at 90 and the highest at 10, and the box stretches to the cell (preserveAspectRatio="none" with a non-scaling stroke, so the line stays about 1.5 pixels). The earlier weeks are drawn at 35% of the text colour and the last segment at full strength. The end dot is HTML, positioned from the same numbers, so it stays round. The readings are the week's bookings, so the line can fall from one week to the next. It is not the cumulative pace. That pace is the bar.

A week above the one before is not the same news as a line that is behind its quarter. The bar says the quarter, the line says the shape of the weeks, and both stay in the text colour so they survive every theme. Nothing here is an alert, so there is no status dot.

Yes. Each cell is a description list: the line of business, then the ratio, then the bar and the sparkline. The bar is a progressbar named with the booked and target amounts and the percent. The sparkline is an image whose name gives the first week, the last week, the low and the high, and which weeks those were. The chart box is dir="ltr", because a later week still follows an earlier one in every language, and the ratio sits in bdi.

The sparkline moves under the bar and takes the full width of the cell. From sm it sits at the end of the bar, in a column about 7.5 rems wide. The five cells stack, each with its own frame whose rules run a little past the corners. The gap keeps those rules from meeting.

The header fades up once. The cells and the lines do not: the later lines sit below a laptop's first screen, and a draw-on line there would be caught half drawn. With reduced motion the header simply appears. The bars don't grow in.