Trend Sparkline Leaderboard Stats Block for React

Edit SHOWS: a name, a genre and the weekly listeners in thousands, oldest first; the last reading is this week. The rows are ranked on the last reading, and the lines, the changes and the headline are computed from the same numbers. Use more weeks by adding readings to every show; the text under the headline reads the count from the data.

A shared scale would flatten a quiet show into a straight line next to a large one. Each line spans its own lowest to highest reading, so its shape tells the story, and the caption says so. The numbers beside it carry the real size, and the accessible name of each line gives its first, last, lowest and highest weeks.

They are this week against last week: an arrow up and a plus, an arrow down and a minus, a dash when nothing changed. They don't rely on colour and don't mirror in right-to-left pages, because they show a trend, not a direction of reading. A visually hidden "on last week" completes the phrase for a screen reader.

The ranking is an ordered list under a figure with a caption. Each line is an image with a name such as "Gravel Hour, last 8 weeks: from 31.5K to 47.3K, lowest 31.5K in week 1, highest 47.3K in week 8", and the same facts are in the row as text. The lines are drawn left to right in every language (dir="ltr"), and the numbers sit in bdi elements.

The copy comes first, then the chart. Each row keeps its rank, name, line and value; the lines shrink and the genre drops away, and a long name wraps to two lines. At 320 pixels nothing scrolls sideways.