shadcn.io is not affiliated with official shadcn/ui
Streaming Dashboard Music Block for Svelte
The first 28 days of a release as a line of daily streams against the dashed median of the artist's other releases, with a day 7 marker, a Daily or Cumulative switch, the top tracks as bars and the top countries as ruled rows.
Installation
Overview
Show an artist how a release is doing against their own history, with this streaming dashboard for Svelte with Ark UI. Curvehouse, an artist analytics tool, draws the first 28 days of one release: the header holds a Native Select of four releases, and the panel draws daily streams as a line over a faint area against a dashed line for the median of the artist's other releases, with a marker on day 7 and a derived reading under the title ("Day 7: 29% of the first month, 10 points below your median"). A Segment Group switches the curve between Daily and Cumulative and redraws both lines at the same height. Under the curve the release's five top tracks are horizontal bars with their streams, and its top countries are ruled rows with a share bar and an "All other countries" row so the shares add up to 100. A table of the curve's numbers sits in the page for screen readers. It's built from Native Select, Segment Group and Guides with hand-built SVG and a CSS entrance only. For artist and label analytics, release reports and any first-month comparison.
FAQ
How do I load my own releases?
Edit RELEASES: each has an id, title, kind, daily (28 stream counts, day 1 first), tracks and countries as name and percent pairs. The track streams are the percent of the 28-day total, rounded, and the country shares are as typed with the remainder shown as "All other countries". The median line, the day 7 share and the reading are all worked out from daily, so nothing is typed twice. With four releases the median of the other three is a real median; with two it is their midpoint.
What is the dashed line, and how is the reading worked out?
For each day it is the middle value of the other releases' streams on that day (or their running totals, in Cumulative). The reading compares the share of the 28-day total that arrived in the first seven days with the median of the same share for the other releases, and says how many points above, below or level you are.
What does Daily or Cumulative change?
Both lines are redrawn from the same data: Daily shows each day's streams, Cumulative the running total. The chart keeps its height and the y axis rounds up to a step that suits the mode (20k and 200k), so nothing around it moves. Changing the release or the mode puts a sentence in a polite status line for screen readers.
Is the chart readable without seeing it?
The plot is hidden from assistive technology and labelled with the title, the mode and the reading, and a table of all 28 days (daily, cumulative and the median) is in the page. The two lines differ by dash pattern and weight, not colour, so they read in any theme.
What stays local, and how do I make it real?
Everything: the streams and countries are typed examples and nothing is fetched. To make it real, load the daily stream counts for each release from your reporting API, keep tracks and countries as shares of the same period, and let the select change a query instead of a constant.