Dashboard composition

A real-world product page composed of letbe-ds primitives — no app code, no framework, and a local <style> block only for the full-bleed page frame and the section and rail headings. Demonstrates how the Charts suite (Stat, Sparkline, Bar List, Donut, Bar Chart, Line Chart) composes with Card, Table, Resizable, Tree, and Layout primitives into an admin overview.

a11y (built in): no chart here is a silent graphic — Sparkline, Bar Chart, Line Chart and Donut each render a single role="img" node whose aria-label is a generated label/value summary of the series. The nav rail is a real role="tree" (treeitem / group / aria-level / aria-expanded, roving tabindex): ↓↑ move, →← expand and collapse, Home/End jump, Enter selects. The Resizable splitters are focusable role="separator" handles with aria-valuenow/min/max that resize on ←→, PageUp/PageDown and Home/End, and the live-visitor badge drops its pulsing dot under prefers-reduced-motion.

Usage: One script — core js/lb.js — runs this whole page: the Resizable shell, Tree rail, Popover filters, every chart and the Bar Lists auto-init from their data-lb-* attributes on DOMContentLoaded, with no js/components/* modules required. The numbers here are static inline JSON; a live dashboard pushes updates through the chart instances (el._lbLineChart.setData(cfg), el._lbDonut.setData(data), …) and wires navigation off lb-tree-select (bubbles, detail.value / label) plus pane-size persistence off lb-resizable-change (bubbles, detail.sizes). The filter-row popovers ship unwired — bring your own range/comparison state (same rule as the media player's engine). The local <style> block is page furniture (full-bleed frame, rail titles), not part of the DS contract.

Two compositions: the app-frame demo below (Resizable shell + Tree rail), and the Store overview commerce skeleton further down — the KPI strip → time-series → breakdowns → table layout. Pieces in play: Resizable shell, Tree nav rail, Grid KPI strip, Card surfaces, Stat + Sparkline, Line Chart, Bar Chart, Bar List, Donut, Table.

Store overview — the commerce skeleton

The analytics layout: trading, commerce and analytics dashboards converge on KPI strip → big time-series → breakdowns → table, and this page follows that order. Everything here is existing vocabulary: the filter row (Popover dropdowns + the --pulse live badge), KPI Stat cards with sparklines, the revenue chart using the dashed comparison series ("previous period" as context, not competition), a channel donut · top-products bar list · goal ring (Donut center slot), two axis-chart cards, and the canonical recent-customers table.