Split Cohorts Funnel Stats Block for React

Edit STAGES, MOBILE and DESKTOP at the top of the file: the stage names, and the number of people who reached each stage in each cohort. The widths, step conversions, the stronger cohort and the gap at each stage, the end-to-end rates and the ratio in the headline are all computed from the counts. To compare other segments rename the cohort labels (they appear in the column heads, the numbers, the arrows and the screen-reader text) and keep two cohorts; the layout is drawn for two.

The share of that cohort's own first stage that reached the stage: the mobile bar at "Created a workspace" is 19% of mobile visitors, the desktop bar 30% of desktop visitors. That is why both top bars are full width and the funnels can be compared by shape, even though one cohort is much bigger. The big figure beside each bar is a different number: the step conversion, the share of the stage before.

By comparing the two whole-percent step conversions at the stage: whichever is higher is the stronger, and the gap is the difference in points. The first stage has no step, so its cell is a dash, and a tie shows a dash too. The cell is a quiet pill with the cohort's name, the gap and an arrow towards that side of the funnel, in the text colour: it says which cohort did better, not whether that is good news.

Each stage is a list item with an h3 and a description list: for each cohort, its step conversion and its count, then the stronger cohort and the gap, in reading order. The bars are decorative because the numbers beside them say the same. The two cohorts differ by position and by weight (full strength and 45%) and are named in the column heads and, on a phone, above each pair of bars, so colour is never the only cue.

The band is a left-to-right box in every language, because it is a drawing with a fixed meaning (mobile at the start of the line, desktop at the end), and the arrows point at the real side of the chart. The header above it follows the page direction, and the numbers and percents sit in bdi elements.

Below lg the six columns become a single one: the stage name and the stronger cohort share the first line, then one line and one full-width bar for each cohort. Nothing scrolls sideways at 320 pixels. The bars grow in once on a wide screen only, so a phone shows them settled.