List Growth Bridge Mailchimp Integration Block for React

From OPENING and MOVES at the top of the file: the audience at the start of the month and four signed steps. The closing figure, the net, the 3.8% growth, the removed count, each bar's start and end and the axis are all worked out from them, so changing a step changes every number and bar together. They are example figures; feed the arrays from your own reports.

Because 64 contacts is invisible on a bar that starts at zero and reaches 13,000. The axis starts at a floor under the lowest total, 12,000 here, and the caption under the bridge says so. The floor and the ceiling are rounded from the data, so the bars always fit.

Resubscribed counts people who had unsubscribed and chose to join again themselves, which only they can do. Cleaned counts addresses Mailchimp removed from the audience after they bounced. Both are Mailchimp's own words; the caption explains cleaned.

Each bar's name and signed amount are real text, in order, and the bars themselves are hidden from assistive technology. A visually hidden table lists every step with its change and the contacts after it, and the caption names the period. Totals, additions and removals differ by solid, mid-tone and hatched fills, not by hue.

The block names Mailchimp in text and ships no logo, colour or wordmark. Its tile is a neutral lettermark, Mc in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it under the owner's brand guidelines, and never redraw it.

Below md each bar is a row: the name, a bar drawn along a line, and the amount. From md they stand in columns with the amounts on top and the names under the baseline. The chart keeps its left-to-right direction in a right-to-left layout, with the amounts held in isolated spans. Nothing in it moves, and the entrance is a CSS transition dropped under reduced motion.