KPI Bar with Trends Stats Block for React

Edit SALES, ORDERS, RETURNING and KPIS at the top of the file. Each KPI is a label, a series of weekly readings (oldest first, one per week), its prefix, suffix and decimals, and a change kind: percent for a share of the week before (+6.2%), count for a difference (+22) or points for rates (+0.5 pts). The value, the change, the chart and the headline's number are read from the series. The average basket is computed from the two series before it.

Each chart is an SVG path computed when the module loads: the readings are scaled into a 100 by 100 box and the box stretches to the cell (preserveAspectRatio="none" with a non-scaling stroke, so the line stays 1.5 pixels at any width). The line starts at the cell's start edge and ends at its end edge, where the end dot, an HTML element so it stays round, sits just inside. The weeks before are drawn at 35% of the text colour and the last week at full strength. The box is dir="ltr", because time runs from the start to the end in every language.

Whether a change is good depends on the figure. The block shows direction with an arrow and a sign, in the text colour, and leaves the judgement to the reader. That keeps it correct in every theme preset and readable without colour.

Yes. The figures are a description list: each label is a term, and the value, the change and the chart are its descriptions, so a screen reader hears "Weekly sales, $12,970, +6.2% vs week 11". Each chart is an image whose name gives its first and last readings, its low and its high, week by week. The arrows are hidden from assistive technology because the sign says the same, and values sit in bdi elements for right-to-left pages.

The values roll up when they scroll into view, and each chart draws from start to end with a CSS clip-path transition, then its end dot appears. With reduced motion the transitions are off and everything simply appears. The chart is complete in either case.

Two by two, with the charts still running edge to edge and the comparison on its own line under the change, so the cells of a row match. Each cell lays its parts on rows it shares with the cell beside it (a CSS subgrid), so a wrapped label moves the rows below it in both cells and the charts stay level.