Period Comparison Table Stats Block for React

Edit NOW, BEFORE and SOURCES at the top of the file. Each source is a label, a value for this period, a value for the period before, and a write function that formats it. The percent, the arrow, the bar, the headline and the pill are all read from those pairs. The month names have no year, so the copy never goes stale.

It is not typed in. The row divides net revenue by orders and keeps the result in cents, then writes it as dollars and cents. Change either of those two rows and the average, its percent and its bar move with them. The same formula is used for both months.

The size of the change, ignoring whether it rose or fell. The widest absolute percent fills the bar, and the others are a fraction of it. In this data that widest move is refunds, which is why the sentence under the headline names them. The caption says the same thing, and both are computed from the rows, so a different set of numbers renames the widest move on its own.

A fall is not always bad: refunds going down is good news, revenue going down is not. The table shows the direction with an arrow and a sign, in the text colour, and leaves the judgement to the reader. The pill in the header uses the same rule, filled when the headline rose and outlined when it fell. That also keeps the block correct in every theme preset.

The February column hides. The change cell adds a short "vs February" so the comparison is still named, and the March figures stay. From md both periods are columns and that hint hides. The header fades in once; the table does not, because on a short screen it can start below the fold.

Only the header's entrance. The table is static: there is no switch, no tick and no control. The pill is the headline's change, not a control. Values sit in bdi elements, signed changes are kept in order in every language, and the minus is a true minus sign. The bars are decorative, because the percent next to them is the change.