Rate Display Awards Block for React

Edit EDITIONS at the top of the file. Each edition has a year (fixed), the number of entries submitted and how many were shortlisted. The totals, the declined count (submitted less shortlisted), the rate to one decimal, the ring, the bar and the header sentence are all counted from those rows.

A rate without its base misleads: 7.5% of 120 is not 7.5% of 20. The caption, the header and the list all say "9 of 120", so the percentage is never alone. The ring and the bar draw the same share, so the drawing can't disagree with the text.

The ring is the catalog's circular progress, given your theme's foreground for its arc. Set its size and thickness in pixels on the component; the value is the rate, 0 to 100. The text in its middle is drawn by the block and sits over the ring, so change its size with the ring's.

The ring is a drawing hidden from assistive technology; the figure's caption and the description list carry the same facts in text ("9 of 120 entries shortlisted", then the three counts). The stacked bar is hidden too, with its legend written out underneath. Counts sit in bdi elements so they keep their order in a right-to-left layout.

The arc moves with a short transition when its value changes, and the transition is off with reduced motion. The block's own entrance (a small fade and lift on load) is also off under reduced motion.

No. The Heronstead Standard, its editions and the counts are made up, and Ingleby is a made-up portal. Use your own figures, and a real programme's name in text only.