Since Day One Figures About Block for React

They are GAINS at the top of the file: a label, the Year 1 from and today's to. The change is computed from the two (rounded to a whole percent, with a true minus sign for a fall), so the text can't disagree with the figures. All the figures are example data: replace the arrays at the top of the file with your own.

A falling number is good news for "seconds to identify a plant" and bad news elsewhere, so colour would have to guess. The block shows the direction as a sign and leaves the judgement to the label. The struck-through figure is muted, which also keeps the page in your theme's tokens.

Each cell is a term (the label) with two descriptions. The first reads "Year 1: 4,200" then "Today: 61,200" through hidden text beside the del element and the arrow, and the second reads the change and "since day one".

Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.

Two across. The Year 1 figure takes its own line above today's so every cell has the same shape, and the rows share their heights, so a label that wraps to three lines doesn't push its neighbour out of line.

Cells with overshooting lines and only empty space under them would read as a second rule above the next block's. The closing line sits under them, and below lg it carries the last band's rule.