shadcn.io is not affiliated with official shadcn/ui
Podcast Analytics Music Block for Ark UI
A podcast's analytics: figures for downloads and subscribers, a retention curve with chapter ticks for the episode you pick and where listeners leave fastest, and a sortable table of six episodes.
Installation
Overview
Show a podcast host where listeners stop listening, with this podcast analytics panel for React with Ark UI. Stayplot opens on a strip of figures: thirty-day downloads added up from the six episodes, subscribers with how many more there are than twelve weeks ago, and a small subscriber sparkline. The header holds a Native Select of episodes. For the one picked, a retention curve draws eleven points as an area with dashed chapter ticks and a ring where the curve falls fastest, and a reading worked out from the points sits above it ("Average listened: 60%. Most listeners leave at 22:00, in Chapter 3"). Below, an episodes table gives downloads, average listened and completion, with sort buttons in the headers that set aria-sort; pressing an episode's title picks it for the curve. A table of the curve's numbers sits in the page for screen readers. It's built from Native Select and Guides with hand-built SVG and a CSS entrance only. For podcast hosts, creators and any report on how much of a long piece is heard.
FAQ
How do I load my own episodes?
Edit EPISODES: each has an id, number, title, length in seconds, downloads, chapters (start in seconds and title) and retention, eleven percentages for 0, 10, up to 100 percent of the episode. SUBSCRIBERS is twelve weekly counts. Downloads, subscribers, the average, completion and the place where listeners leave are all worked out from those, so nothing is typed twice.
How is the reading worked out?
Average listened is the mean of the curve over the whole episode, using the area under the eleven points. The leaving point is the interval where the curve falls the most; its middle is turned into a time rounded to the minute and matched to the chapter that has started by then. Pick another episode and the sentence, the ring and the chapter ticks all move.
How does sorting work?
Each header is a button. Pressing one sorts high to low, pressing the same one again flips it, and the header carries aria-sort with all three arrows drawn and two hidden, so nothing shifts. The table always shows the same six rows, and the chosen episode stays tinted wherever it lands.
Is the curve readable without seeing it?
The plot is hidden from assistive technology and labelled with the title and the reading, and a table of the eleven points with the time each stands for is in the page. The picked episode's row in the table is marked aria-current.