Top Artists by Range Profile Block for React

Edit ARTISTS in the Ark file: each artist has a name and, for each range (w4, m6, all), a pair of numbers, the plays in that range and the plays in the period before it. The ranks, the moves, the shares, the totals and the top artist are worked out from the pairs. LAST_PLAYED and AS_OF_AT give the last song and "now", and the "2 h 18 min ago" is the difference between them.

Each artist is ranked by the plays in the range and again by the plays in the period before it; the move is the difference between the two ranks, shown as a sign and an arrow, and an artist with no plays before is marked "New". The percentage is each artist's plays over the ten's total, shares add to exactly 100 by the largest-remainder rule, and the bar is scaled to the leader so the longest bar is always full. The caption under the list says which period the moves are against.

The rows are keyed by their place in the ranking, not by the artist, so changing the range changes the words in ten fixed rows instead of moving rows around. Each row is the same height, the bars animate their width (and not under reduced motion), and the status line says who leads ("6 months: Quiet Cartographers leads with 702 plays.").

The ranking is an ordered list named by the range, each row reads "rank, artist, plays, share" and its move is said in words ("Up 2 places", "No change", "New in the top ten") while the arrows themselves are hidden from screen readers. The segmented control is named by its heading. The status line is a polite live region present from the start. The numbers stay left to right in a right-to-left layout, the names are isolated, and arrows are text characters that do not mirror.

The listener row, the last-played line and the segmented control come first, then the ten rows with the move under the plays. The two summary facts (plays in the range, top artist) and the note are hidden on phones to keep the list near the top; the rows keep their bars and their numbers.

Everything is typed sample data and changing the range only changes the page. There is no audio, no now-playing bar and no connection to a streaming service. To wire it up, load your history into ARTISTS for the three ranges (a server component can pass it in), keep the helpers that rank, compare and share, and replace the fixed "now" with the real time.