Metrics dashboard

⌘K, Ctrl+K

Focuses the sidebar search (from screen-shell).

ArrowLeftorArrowRight

On the KPI tabs, moves to the next metric and charts it; the highlight lands instantly. On the focused chart, inspects the previous or next day.

Shift+ArrowLeftorArrowRight, then Enter

Selects a span of days on the chart and zooms into it. Escape clears the selection.

ArrowUporArrowDown, Home, End

Move between rows in a breakdown card or table, and between items in the date range menu (Arc's dropdown menu) and the filter list.

ArrowLeftorArrowRight on a card switcher

Moves between the views of a breakdown card, such as Top pages and Entry pages (Arc's segmented control).

Enter

On a row, opens its detail panel and moves focus to its close button. In the filter search, applies the highlighted value.

Escape

Closes the date range menu, the filter popover or the detail panel, and returns focus to what opened it.

• KPIs are a tablist with aria-selected and roving tabindex; the chart is their tabpanel, role="img" with instructions, and the inspected day is announced through a status region.
• The date range is Arc's dropdown menu with a check on the current range; the filter popover is Arc's popover holding a combobox with aria-activedescendant over a listbox; filter chips are buttons named "Remove filter: Source is Google". Compare is Arc's switch.
• Saved views are buttons named with their filters and range, and the open one carries aria-current. The realtime count is a polite live region.
• Table headers are sort buttons with aria-sort. The open row carries aria-current, and deltas carry a text direction, not only colour.
• The detail panel is a labelled complementary region. Escape and the close button return focus to the row; Export and Copy confirm through polite live regions.

• KPI values, the detail figure and the online count roll on Arc's animated counter; row counts count with tabular numerals; bars rescale on a short CSS transition.
• The selected KPI and the open saved view take a calm fill in place, never travelling between items; card switchers use Arc's segmented control.
• The chart crossfades when the range, metric, site or filters change, and morphs in place when Compare rescales the axis.
• The detail panel slides 16px in from the right over the page, so nothing beneath it reflows; switching rows crossfades its content once.
• Menus and the filter popover use Arc's own enter and exit; buttons are Arc's Button (press to 0.97, label crossfade) while menu triggers answer with colour only. Export confirms inside a reserved width, so nothing shifts. Reduced motion makes every change immediate.

• The shell handles the frame: the sidebar becomes a sheet below 900px and the page goes edge to edge below 600px.
• The page adapts to the screen-main container: three breakdown columns, then two below 1080px and one below 640px. Tables drop signups, then duration and page views, then change and bounce rate as the column narrows.
• Below 860px the KPI strip scrolls sideways with edge fades; below 760px the header buttons shrink to icons and a short range label. At phone widths the chart is 180px tall and the detail panel covers the page.
• The page scrolls inside the frame with hidden scrollbars and edge fades; the screen itself never scrolls.

• Hand-built SVG charts with monotone cubic paths, no charting library: up to 90 daily points.
• All aggregation runs over an in-memory 200 day series and is memoised on site, filters and range. The live count updates every 4 seconds.

• Use as a full analytics product screen. Replace metrics-dashboard-data.ts with your analytics source: the screen reads sites, rows per dimension, a daily series and goals from it.
• Filters OR values within a dimension and AND across dimensions; the sample data reshapes every figure and breakdown from them, and cities follow a country filter.
• Export downloads a real CSV of what the page shows. Copy uses the clipboard. Saved views, the account toggles and the realtime count are local state.
• The detail panel floats inside the page instead of using the shell's docked rightPanel, so opening it never shifts the dashboard.
• For a single explorable chart, prefer metric-explorer or revenue-explorer.

The full library index for assistants is at /llms.txt.