Retention Impact Changelog Block for React

Edit RELEASES (newest first) and DAYS. A release holds the percent of a signup cohort still active at each of those days, in order. The curves, the dots, the changes and the title are worked out from them. COMPARISONS says which releases the toggle compares with; MARKS lists the days that get a dot and a row.

It chooses the release the newest one is compared against. The dashed curve and its dots are redrawn, the three changes roll to their new values and a polite line says the day 30 result. This release's curve never changes. The choice stays local to the page.

The drawing is hidden from assistive technology. A table with a caption holds every reading for every release at every day, and each change is also written in words ("up 5 points") for screen readers. This release is solid and the comparison is dashed, so they are told apart without colour.

A smooth curve through the typed readings that never rises above its higher neighbour, so it bends between readings without inventing a bump. Replace the readings with your own cohort data and the curve follows.

Below the desktop width the order is the header, the chart, then the toggle and the changes. The chart is drawn left to right in a right-to-left layout too, because time reads that way, while the text and signed changes keep their own order.