Analytics dashboard

A React block (a whole screen) in Beamline's Blocks category.

A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime and the activity feed, with loading placeholders and a failed state with retry.

Use it for

The home screen of a SaaS or internal tool: a handful of KPIs, one trend, a ranked list and recent activity under one set of filters. Pass `useData`, a hook around your metrics API returning `AnalyticsData` for a range and segment.

Not for

Exploring a large dataset row by row (data-grid, or the crm block). Real-time market screens (trading-terminal).
A home for another kind of business (invoices, orders, bookings): its data is a SaaS's (MRR, plans, uptime); compose metric-card + area-chart + bar-list instead.

Anatomy

app shell (the app's own nav and top-bar actions)
page header (title, segment, range, export when onExport is given)
KPI row
revenue chart
channels bar list
uptime tracker
plan mix
activity timeline

States

loading (placeholders keep the layout)
failed (error with Try again)
filtered by range
filtered by segment
unmeasured KPI or channel (hatched, with a note)
sidebar collapsed (⌘B)

Keyboard

⌘B / Ctrl+B collapses the sidebar
every filter is a native control reachable by Tab
chart legend items toggle series with Enter

Motion

KPI values roll on change (slot text); charts redraw without layout shift.

Props

Prop	Type	Default	Description
`useData`	`(query: AnalyticsQuery) => { data: AnalyticsData \| null; error?: Error \| null; retry?: () => void }`	—	Your metrics source; data null while loading.
`nav / page`	`AppShellNavGroup[] / string`	—	The app's navigation and this page's title.
`segments / defaultSegment / defaultRange`	`{ value, label }[] / string / DateRange`	—
`onExport`	`(query, data) => void`	—	Shows the Export button.
`actions`	`ReactNode`	—	Top-bar actions (search, notifications, user menu).
`workspace`	`string`	—
`className`	`string`	—
`classNames`	`AnalyticsDashboardClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

d3-shape, lucide-react, motion

Import

import { AnalyticsDashboard } from "@/blocks/analytics-dashboard/analytics-dashboard";

Get it

Analytics dashboard is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent