Metrics dashboard
ProA dense analytics view with KPI tabs, one inspectable chart, and top pages and sources.
Live block · sample data
- A small, explorable KPI overview with a range toggle and one chart.
- Product or marketing dashboards with four headline metrics, a 7, 30, or 90 day range, and top pages and sources.
- Use metric-explorer or revenue-explorer for larger or drill-down data.
- Use stat-card for a single number.
- Use sparkline for inline trends in a table.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to make a small set of key measures explorable. Replace the sample figures with your analytics source.
example.tsx
import { MetricsDashboard } from "@/components/arc/blocks/metrics-dashboard/metrics-dashboard"; export function Overview() { return <MetricsDashboard />;}Built fromButtonChartsMotion
MetricsDashboard
A dense analytics view: a range control, four KPI tabs that pick the charted metric, one line chart with an optional previous-period comparison and a hover or keyboard tooltip, and top pages and sources lists. Takes no props; all figures are sample data.
No props.
- Tab
- Moves through the range control, Export, the KPI tabs, Compare, and the chart.
- ArrowLeftorArrowRight
- With the chart focused, moves the inspected point.
- HomeorEnd
- Jumps to the first or last point.
- Range buttons use aria-pressed; the KPI tiles are tabs with aria-selected.
- The chart is role="img" with a label; the inspected value is announced through a status tooltip.
- Deltas carry a text direction, not only color.
- KPI values and list counts count to their new amounts with tabular numerals.
- The range thumb and KPI underline slide on a spring; the chart crossfades between metrics and ranges.
- Reduced motion swaps values and views immediately.
- Layout follows the block's own width through a ResizeObserver: below 640px the KPI tabs form a two by two grid and the top pages and sources lists stack.
- Below 460px padding tightens, the range control and actions fill the width, KPI values shrink, and the chart is 168px tall.
- Chart hover is mouse based; touch and keyboard select points through focus and the arrow keys.
- The chart is a hand-built SVG with a monotone cubic path: up to 30 daily points, or 13 weekly points for 90 days. No charting library.
- All aggregation runs over an in-memory daily series on each change; for larger data or drill-down use metric-explorer.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a compact product or marketing analytics overview.
- Replace the generated daily series with your analytics source; Export only shows a local confirmation.
- The layout follows the block's own width (measured), so it works in narrow panels as well as full pages.
- For larger sets, prefer metric-explorer or revenue-explorer.
The full library index for assistants is at /llms.txt.