Funnel Awards Block for React

Edit STAGES at the top of the file, widest first: each stage has an id, a name and a count. Every rate ("60 of 480, 12.5%"), every width, the header's headline number and the caption are made from that list, so there are no percentages to keep in step. Add a stage and the funnel gains a row, a trapezoid and a tone; add a tone to TONES if you go past five.

From 2,400 entries to one winner, a linear scale would draw every stage after the first as a sliver. The widths follow the logarithm of each count, with a small floor so the last stage can still be seen, and the caption says so. The numbers beside each row are exact; only the drawing is compressed.

It's how many of the stage before reached this one, with both numbers shown: "60 of 480, 12.5%" says that 60 of the 480 on the longlist made the shortlist. The first row has no stage before it. The rates are derived, so changing a count changes them.

The stages are an ordered list named after the prize and the year. Each item has the stage as a heading, its count and the rate written out. The trapezoids are a drawing hidden from assistive technology and carry nothing the text doesn't. Counts sit in bdi elements so they keep their order in a right-to-left layout; the funnel is symmetric and stays as drawn.

The drawing keeps a fixed small width in the first column and the text takes the rest, so each stage is still one row. Nothing scrolls sideways at 320 pixels.

No. The Cinderford Prize, its stages and the counts are made up, and Tregaron is a made-up product. Use your own pipeline, and a real programme's name in text only.