Revenue Funnel Stats Block for React

Edit STAGES at the top of the file: each stage has a name, the number of deals that reached it and the average deal size there in dollars. The step conversion, the value (deals times average), every bar and the headline are computed from those. The overall conversion in the header is the last stage over the first.

Yes. It is a native table with a visually hidden caption, column headers with scope="col" and the stage as a row header, so a screen reader announces "Qualified, Deals, 612". The markup is identical on every framework and every UI library, because the catalog's React Aria table is a grid without captions or scopes, and a native table gives all seven targets the same structure.

Each bar is drawn to the scale of its own column and is decoration: the number is always written next to it. Deals and value are drawn against the first stage, so they shrink down the table like a funnel. Step conversion is drawn against 100%, so a stage that keeps most of the stage before it has a long bar.

The table drops its value column below 640 pixels and keeps stage, deals and step conversion with their bars, so nothing scrolls sideways at 320 pixels. The column widths are fixed, so a long stage name such as "Proposal sent" wraps rather than pushing the others. The overall conversion sits under the header text on a phone, on one line.

Yes. Numbers are text and sit in bdi elements, the bars are hidden from assistive technology, the first stage's missing conversion is read as "First stage", and contrast passes in light and dark. The big conversion in the header rolls up once, and with reduced motion it simply shows its value.

The header and the table fade up once on load, and the overall conversion's digits roll up the first time it scrolls into view. Nothing else moves.