Dumbbell Chart Stats Block for React

Edit ROLES at the top of the file: a name and the last and now readings for each. Set FROM, TO, MIDPOINT and TICKS to your axis; the axis uses five-point ticks, and the hairlines behind the rows are a gradient sized to match (bg-[length:20%_100%] for five steps), so change it with the number of ticks. The sort order, the gaps, the headline and the takeaway are computed.

So the direction reads without colour: the hollow dot is where the role was, the solid one is where it is now, and the line between them is the move. A role that slipped has its solid dot to the start of the hollow one, and its gap has a down arrow and a true minus sign. The arrow shows the way the number moved, so it never mirrors on right-to-left pages.

Each row is a list item with a heading for the role, its two readings as text ("88% to 97%") and its signed gap, so the dots only repeat what the text says and are hidden from assistive technology. The key is hidden for the same reason and the figure's caption names the chart. Numbers sit in bdi elements and the plot is forced left to right.

The chart column ends the block: its rows run from the divider to the rail and the last one draws no bottom rule, because the next section's top rule closes it. The divider reaches the top rule, with a + where they meet, and on a phone a rule separates the copy from the rows.

The columns tighten (the name, the plot and the gap share 320 pixels), the axis keeps 90, 100 and 110, and the takeaway comes before the rows so the story is at the top. The lines grow from the start of each row once on load; with reduced motion they appear at once.