Dashboard Layout

Usage

DashboardLayout is a dashboard page: the page header, then sections of metric tiles and panels in a grid that reflows by the width of the dashboard, not the viewport. The inputs and slots are declared in schema.ts.

Reflow. The root is a size container. Metric tiles take the whole row below 1080px, half a row from 1080px, and a quarter of a row from 1280px. A panel's span is the most of a row it takes at 1280px and wider; below that it takes half a row at most, and below 1080px the whole row. The breakpoints are the named scale in src/tokens/breakpoints.json.
Metric tiles. Put MetricCards directly in a section. The layout places them and leaves their internals alone. Every section child that is not a panel takes one tile.
Panels. DashboardLayoutPanel is a Card with a title, optional description and controls, a chart slot, and content under it. The slot takes any node, so Charts plugs in without the layout importing it. The panel reserves a minimum block size for the chart and does not restyle it.
Whole-dashboard states. state={DashboardLayoutState.Loading} shows placeholders in the same grid, in a busy region named by the required loadingLabel. state={DashboardLayoutState.Empty} shows an empty state from emptyTitle, emptyDescription and emptyAction. The header shows in both.
Suspense. On a ready dashboard, pass loadingLabel and a section that suspends shows the placeholders until it resolves.
Single tile or panel. A MetricCard has its own loading and empty value. A panel takes state={DashboardLayoutPanelState.Loading} with a loadingLabel, or Empty with an emptyTitle.
Headings. The page title is an h1, section titles are h2, and panel and tile titles are h3. Pass level and headingLevel together when the dashboard sits inside a page that already has an h1.
Landmark. The root is main. Pass landmark={DashboardLayoutLandmark.Section} for a dashboard inside another page; it becomes a region named by the title.
Styles. Load @prepared911/ui/blocks/dashboard-layout/styles.css, @prepared911/ui/blocks/page-header/styles.css, and the stylesheets of the components it composes (Box, Card, EmptyState, Grid, LoadingBoundary, MetricCard, Skeleton, Text, VisuallyHidden).

Control Island / Accessibility

Dashboard Layout / API and Development

Dashboard Layout

Usage

Reflow. The root is a size container. Metric tiles take the whole row below 1080px, half a row from 1080px, and a quarter of a row from 1280px. A panel's span is the most of a row it takes at 1280px and wider; below that it takes half a row at most, and below 1080px the whole row. The breakpoints are the named scale in src/tokens/breakpoints.json.
Metric tiles. Put MetricCards directly in a section. The layout places them and leaves their internals alone. Every section child that is not a panel takes one tile.
Panels. DashboardLayoutPanel is a Card with a title, optional description and controls, a chart slot, and content under it. The slot takes any node, so Charts plugs in without the layout importing it. The panel reserves a minimum block size for the chart and does not restyle it.
Whole-dashboard states. state={DashboardLayoutState.Loading} shows placeholders in the same grid, in a busy region named by the required loadingLabel. state={DashboardLayoutState.Empty} shows an empty state from emptyTitle, emptyDescription and emptyAction. The header shows in both.
Suspense. On a ready dashboard, pass loadingLabel and a section that suspends shows the placeholders until it resolves.
Single tile or panel. A MetricCard has its own loading and empty value. A panel takes state={DashboardLayoutPanelState.Loading} with a loadingLabel, or Empty with an emptyTitle.
Headings. The page title is an h1, section titles are h2, and panel and tile titles are h3. Pass level and headingLevel together when the dashboard sits inside a page that already has an h1.
Landmark. The root is main. Pass landmark={DashboardLayoutLandmark.Section} for a dashboard inside another page; it becomes a region named by the title.
Styles. Load @prepared911/ui/blocks/dashboard-layout/styles.css, @prepared911/ui/blocks/page-header/styles.css, and the stylesheets of the components it composes (Box, Card, EmptyState, Grid, LoadingBoundary, MetricCard, Skeleton, Text, VisuallyHidden).

Control Island / Accessibility

Dashboard Layout / API and Development