Winning Streak Awards Block for React

Edit LEAD and CHAINS at the top of the file. Each chain has an id, a name and wins: the years it won, each a fixed number. FIRST_YEAR and LAST_YEAR set the window of editions drawn. The links, the streaks and the "5 of 7 editions won" lines are all counted from the lists; nothing else needs editing.

The unbroken run of wins that ends in the latest year in the window. A category that skipped the latest year has a streak of zero, and a category that missed a year in the middle starts counting again after it. runFrom counts back year by year until it finds a gap.

Seven nodes share a row in a grid, the nodes and their years shrink, and each row stacks its heading and streak above the chain. They fit down to 320 pixels, so nothing scrolls sideways. If you widen the window past about nine years, wrap each chain in a region that scrolls sideways and takes focus.

Each chain is an ordered list named with its category and the range of editions. Each item reads as its year followed by "won" or "not won", and the drawn nodes and links are hidden from assistive technology. The legend and the streak are plain text. Years sit in bdi elements and the chains are drawn left to right in a right-to-left layout too, since time reads that way.

A year won is a filled node with a check and a year not won a hollow one, so the difference is shape and fill, never hue. It reads the same in any theme and for anyone who can't tell colours apart.

No. The Slateton Awards, the categories and the wins are made up, and Barnabas is a made-up app. Use your own record, and a real programme's name in text only.