shadcn.io is not affiliated with official shadcn/ui
Analytics Dashboard Sidebar Block for Svelte
A product analytics window with a wide rail of four reports, each with a headline, a signed change and a sparkline that follow a 7, 30 or 90 day toggle, and the chosen report charted with its weekly table.
Installation
Overview
Give an analytics product its whole shell with this analytics dashboard sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar, set wide so each report has room: Sessions, Signups, Conversion and Retention, every one with a headline figure, a signed change against the period before and a small sparkline. A Toggle Group at the top of the rail picks 7, 30 or 90 days and all four rows, the page and the status line are worked out again from 180 typed days. Beside it, the top bar names the open report and holds Export CSV, a Shine Button and the only colored control. The page redraws the chosen report as a larger line with its low and high in text, and a table of its weekly figures, each with the change on the week before, sits under it. Export CSV saves that table as a file. The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Toggle Group, Avatar, Shine Button and Guides, with hand-drawn SVG lines and a CSS entrance only. For product analytics, marketing dashboards and any app whose navigation doubles as a summary.
FAQ
Where do the numbers come from?
From four series of 180 days, built at the top of the file by a small seeded walk with a weekday rhythm, so the figures are the same on every load and nothing is fetched. Sessions and Signups are summed over the period, Conversion is each day's signups against its sessions, and Retention is a daily rate; the two rates are averaged. The change compares the period with the one before it of the same length: a percentage for the counts and points for the rates. In your app, load the same four series from your warehouse and keep every figure derived from them.
What does the period toggle change?
Everything at once: each row's headline, change and sparkline, the page's chart, its low and high, the weekly table and the text of the status line. The toggle always has one choice, so there is no empty state to handle, and it is a labelled group of buttons that you can reach with the arrow keys. To add a period, add an entry to the ranges and the series already hold the days.
What stays in the page, and how do I connect it?
Everything but the file. Export CSV builds a small text file from the weekly table of the open report and period and saves it through a temporary link, so nothing is uploaded; the rest is derived on screen and a reload starts over. Replace the file with an export from your API if the real table is larger than the page. The reports are links to # whose handler shows the chart instead of navigating. Point them at your routes and mark the current one with isActive.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The period toggle and the four reports are in it. Escape or choosing a report closes the sheet and focus goes back to the menu button. The first screen is the chart and its weekly table with the status line below, and the button keeps its label. The window keeps its height and only the page scrolls.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons. The period toggle and the sparklines give way to the four report icons, which stay links. Each icon keeps its link's full name for screen readers, which includes the headline and the change, and a tooltip shows the same on hover or focus. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, its reports are named by their group and the open one is marked as the current page. Each link's name reads the report, the headline and the change in words. The sparklines are decoration and the chart is an image with a text alternative that gives its start, end, low and high; the same facts are in the table, which has a caption and column heads. One polite status line reports each change, and figures are isolated so they read in order in a right-to-left layout.