Count By Year Awards Block for React

Edit AWARDS at the top of the file. Each entry is a programme and a year, a fixed number: an award given in 2024 stays 2024. The years on the list run from the earliest to the latest year in the data, a year with no awards shows a zero, and the header's tally is counted from the same list, so it can't disagree with the bars.

How many different programmes gave at least one award in that year, so a year with six awards from three programmes shows 6 under Awards and 3 under Programmes. Add a metric by adding an entry to METRICS whose rows come from rowsOf with a function that counts one year. The best year is the one with the highest count, and a tie goes to the newer year.

Its count divided by the highest count in the list, so the longest bar always fills its track and the others are in proportion. Bars change length with a short CSS transition, and under reduced motion they change at once. The bars are drawn in the same order on a right-to-left page; only the year and the count follow the reading direction.

The years are a list named after the metric. Each row reads as its year and count with the unit ("2024, 6 awards"), and the best row adds "Best year". The bars are drawings hidden from assistive technology. After each change the polite status line speaks the metric and the best year, so the change is announced without moving focus.

No. The best year is outlined, its bar is solid, and its row says "Best year" (on a phone the word moves into the status line under the toggle). Every other bar is a lighter step of your foreground colour. Nothing uses a status or brand colour.

No. Highwater, Amberdale, Russetholm and Cloverford are made up. Swap in your own awards, programmes and years; if you show a real award, use its name in text.