Sales dashboard

A store's sales dashboard: an app shell with a collapsible sidebar, stats with deltas, a revenue chart drawn with tokens, sales by channel and a sortable orders table with a channel filter.

Built withCopy Anchor Link

• AppShell
• Sidebar
• Drawer
• SearchInput
• IconButton
• Avatar
• ToggleGroup
• Stat
• Card
• Meter
• DataTable
• Badge
• NativeSelect
• Heading
• Text

BehaviorCopy Anchor Link

• Three layouts by width. The shell measures itself: a full sidebar from 1000px, a rail of icons from 640px, and below that a menu button that opens the same navigation in a Drawer. Try the Tablet and Phone widths above. In your app, a media query on the window does the same job.
• Period filter. 7, 30 or 90 days changes the stats, their deltas and the chart; 90 days switches the chart to weekly bars.
• No chart library. The bars are plain elements sized in percent and colored with --cml-accent and --cml-brand-300, so the chart follows the skin and the brand color. Grid lines mix --cml-fg at low opacity, so they stay faint even in skins whose border is solid black. Swap in your chart library when you need axes and tooltips.
• Orders. The channel filter narrows the DataTable; the table sorts by any column, pages by 5 and shows an empty state when a channel has no orders.
• Good and bad news. For the refund rate, going down is good: StatDelta gets sentiment="positive" with trend="down", so the color matches the meaning.

AccessibilityCopy Anchor Link

• The header, sidebar and content are a header, an aside with a labelled nav, and the page's main. On this page the content renders a div, because the docs already have a main.
• The chart's bars are hidden from screen readers; the card description gives the best day and its revenue in words.
• Period buttons are a ToggleGroup with full names ("Last 30 days") as their accessible names, not just "30d".
• Sidebar items in the rail keep their names (and a title tooltip), and the current page has aria-current="page".