affectUI › Blocks › Analytics

Metrics Dashboard

Sales overview – KPI cards pick the metric, one chart switches between dotted line and bars, with top products and channels.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/metrics-dashboard.json · Import from @/components/ui/metrics-dashboard

When to use

A compact sales or business overview with a handful of headline metrics
Dashboards where one chart, picked by KPI cards and shown as a line or as bars, says more than a grid of small charts

When not to use

Large data sets or drill-downs – the chart shows up to 30 points per period
A single number – use a KPI card instead

Usage

import { MetricsDashboard } from "@/components/ui/metrics-dashboard";

export function Overview() {
  return (
    <MetricsDashboard
      title="Sales"
      site="Northwind Store"
      defaultRange="30d"
      onExport={(range, metric) => console.log("export", range, metric)}
    />
  );
}

Props

Name	Type	Default	Description
`title`	`string`	`"Sales"`	Title in the bar on top
`site`	`string`	`"Northwind Store"`	Site or workspace shown under the title
`defaultRange`	`"7d" \| "30d" \| "90d"`	`"30d"`	Period to start on – shown as Week, Month and Quarter
`defaultMetric`	`"revenue" \| "orders" \| "aov" \| "refunds"`	`"revenue"`	Metric to start on
`onExport`	`(range, metric) => void`		Called when Export is pressed; the button confirms locally either way
`className`	`string`		Extra class on the root

Keyboard

Tab: Moves through the period switch, Export, the KPI cards, the chart type, Compare and the chart
← / →: With the chart focused, moves the inspected point
Home / End: Jumps to the first or last point

Accessibility

Period and chart-type buttons use aria-pressed; the KPI cards are tabs with aria-selected
The chart has a text label with the range and values; the inspected point is announced through a status tooltip
Deltas say up or down in text, not only with color – and a falling refund rate counts as good

Responsive

Follows the block's own width with container queries: below 640px the KPI cards form a 2 × 2 grid and the lists stack
Below 460px the period switch fills the width, figures shrink and the chart is 168px tall
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19