shadcn.io is not affiliated with official shadcn/ui
Listening Stats Music Block for Radix UI
A listening-stats panel with plays, hours and the busiest block, a weekday by two-hour grid of pressable cells that read aloud, and genre shares for the morning, afternoon, evening or night.
Installation
Overview
Show listeners when they play what, with this listening-stats panel for React with Radix UI. It opens a hairline frame with a plus mark on each corner and three figures worked out from the typed plays: how many plays, the hours they add up to, and the busiest two-hour block. Under them sits a grid of seven weekdays by twelve blocks, every cell a button holding its count, shaded in five foreground steps; pressing one reads it in the status line ("Thursday 22:00 to 24:00: 27 plays, mostly Ambient"), and the arrow keys move between cells. At the end a Toggle Group picks all day, morning, afternoon, evening or night and the genre bars change with it, as whole percentages that always add up to 100. A last line says what kind of listener the plays describe. On a phone the grid scrolls sideways in a named region and the genres sit under it. It's built from Toggle Group and Guides, with a CSS entrance only. For music players, stats pages and year-in-review features.
FAQ
How do I fill it with my listening?
Edit ROWS: one string per weekday, Monday first, with twelve cells for the two-hour blocks from midnight, each cell a few genre+count pairs such as amb16,ele6, and - for none. GENRES names the codes, AVERAGE_SECONDS turns plays into hours, and AS_OF and WEEKS set the period in the header. The figures, the shading, the shares and the closing line are all worked out from those rows, so nothing is typed twice.
How are the genre shares worked out?
For the chosen part of the day the block adds each genre's plays across the blocks in it, and turns the counts into whole percentages with the largest-remainder method, so the five bars always total exactly 100 and a rounded share never leaves a gap. Night runs from 22:00 to 06:00, so it joins the last block of the grid to the first three.
What is the night owl line based on?
It compares two shares of all plays: the plays between 22:00 and 06:00 and the plays between 06:00 and 12:00. Thirty percent or more at night gives "Night owl", thirty or more in the morning gives "Early bird", and anything else is "Steady listener". The thresholds are two constants, OWL_AT and EARLY_AT.
Is the grid readable without seeing the shading?
Yes. The shading is a second signal: every cell shows its play count as text and has a name such as "Thursday 22:00 to 24:00: 27 plays", the table has a caption and column names for each block, and pressing a cell speaks it through the polite status line. The five steps differ in weight, never in hue, so they hold up in a dark theme and for colour-blind readers.
Is this my real listening, and how do I wire it up?
No. The plays are typed for the demo and nothing is read from an account or sent anywhere. To make it real, aggregate your play events into the same weekday by block counts per genre on your server, return them as rows in that shape, and feed them to the grid; the rest of the block needs no change.
How do I use the grid from the keyboard?
Tab enters the grid once, on the chosen cell. The arrow keys move one cell and press it, Home and End jump to the first and last block of the row, and the status line reads each cell as you land on it. On a phone the scrolling region takes focus too, so the keyboard can scroll it.