Connected KPI Bar Stats Block for React

Edit MONTHS, REVENUE, CUSTOMERS and KPIS at the top of the file. Each KPI is a label, a series of monthly readings (oldest first, one per month), a write function that formats a reading, and a change kind: percent for a share of the month before (+8.4%), count for a difference (+126) or points for rates (−0.4 pts). The cell's value, its change, the sparkline and the headline's number are all read from the series. Revenue per customer is computed from the two series before it, so the four figures always agree. The month names have no year, so the copy never goes stale.

Each line is an SVG path computed when the module loads: the readings are scaled into a 100 by 100 box with a tenth left clear above and below, 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 months before are drawn at 35% of the text colour and the last month at full strength, so the eye goes to the change the cell reports. The end dot is an HTML element positioned from the same numbers, so it stays round. The lines run from the start to the end in every language: the chart box is dir="ltr", the way time series read.

Whether a change is good depends on the figure: churn going down is good news, revenue going down isn't. The block shows the direction with an arrow and a sign, in the text colour, and leaves the judgement to the reader. That also keeps it correct in every theme preset, light and dark, and readable without colour. If one figure needs to raise an alarm (a breached target), give that cell a status icon rather than tinting the numbers.

Yes. The figures are a description list: each label is a term and its value, change and trend are its descriptions. The value is shown first but read after its label, so a screen reader hears "Monthly recurring revenue, $184,320, +8.4% vs February". The arrows are hidden from assistive technology because the sign says the same; the minus is a true minus sign, read as "minus". Each sparkline is an image whose name gives its first and last readings and its low and high. Values sit in bdi elements and signed changes are kept left to right, so a right-to-left page doesn't move a sign or a percent to the wrong side.

The band ends the block. On a page, the next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule comes from the Guides component, with a + mark where it meets each rail. If nothing follows the block, add a bottom border to the list's wrapper.

The header and the band fade up once when the page loads, and each sparkline draws from start to end with a CSS clip-path transition. With reduced motion the transitions are off and everything simply appears. Below lg the four cells sit two by two, meeting at a hairline cross, and on a phone each comparison takes its own line under its change. Each cell lays its parts on rows it shares with the cells beside it (a CSS subgrid), so when one label wraps, the changes and the sparklines of that row still line up. Nothing scrolls sideways at 320 pixels.