shadcn.io is not affiliated with official shadcn/ui
Playlist Analytics Music Block for Ark UI
A playlist analytics panel with a 7, 28 or 90 day range, follower, skip and save figures worked out from typed counts, a follower growth line, a top-songs table whose rows pick a skip map of twelve bars, and listener age bands.
Installation
Overview
Show a curator where listeners drop off, with this playlist analytics panel for React with Ark UI. It reads like Playlens, a tool for playlist curators, in a hairline frame with a plus mark on each corner. The header's one control is a range Toggle Group: 7, 28 or 90 days. Under it a band of three figures gives the followers and their gain, the skip rate and the save rate, all worked out from typed counts for the chosen range. A follower growth line is drawn by hand as an SVG, with its numbers repeated in a hidden table. The main column lists the top five songs by saves in a table whose rows are radios; choosing a song draws its skip map, twelve bars for each twelfth of the track, and names the worst stretch, for example "Most skips: 0:00 to 0:19, 25% of skips". A side cell shows the listeners' age bands as ruled rows. On a phone the skip rate column folds into the song's line. It's built from Toggle Group, native radios in a table and Guides, with a CSS entrance only. For playlist tools, label dashboards and creator apps.
FAQ
How do I load my own playlist's numbers?
Edit PERIODS for the three ranges (starts, skips, saves, the follower line and the listener ages) and SONGS for the table (length in seconds, saves, starts and the skips in each twelfth of the track). Every figure on screen is worked out from those counts: the rates, the gain, the shares and the worst stretch are never typed. The song counts are for 28 days and are scaled for the other ranges. The numbers here are example data.
How is the skip map worked out?
Each song has twelve skip counts, one for each twelfth of its length. The bars are drawn from those counts, the tallest is solid and the rest are lighter, and the shares add up to exactly 100 using the largest remainder. The line under the map names the stretch with the most skips in minutes and seconds, so the picture never has to be read without the words. A hidden list repeats all twelve stretches for a screen reader.
What does the range control change?
The three figures, the follower line, its date labels, the saves in the table and the age bands all re-derive for the range you pick. The skip map does not change with the range, because it shows shares of one song's skips. The panel keeps its height whichever range is shown, and a polite status line reads out the new rates and the follower gain.
How do I pick a song from the keyboard?
The table's rows are native radio buttons, so Tab enters the group and the arrow keys move between songs and choose them. The whole row is the click target. The chosen row is tinted, and the map and its heading update at once without moving focus.
What stays local, and how do I connect it for real?
Everything: nothing is fetched and no listener data leaves the tab. To make it real, load the counts for each range from your analytics API into the same shapes and keep the helpers that derive the rates, shares and dates. The dates count back from a typed "today", so the page never reads the clock.