A dense analytics view: four headline numbers that double as tabs, one chart you can inspect and compare against the previous period, and ranked lists of top pages and sources.
example.com · Last 30 days
pnpm dlx shadcn@latest add @latheui/metrics-dashboardPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Metrics Dashboard is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native section attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Analytics" | Heading of the view. |
| scope | string | "example.com" | What the numbers describe, shown under the heading. |
| data | Record<"7d" | "30d" | "90d", MetricsData> | sample data | Everything shown, for each range. |
| defaultRange | "7d" | "30d" | "90d" | "30d" | Range selected first. |
| loading | boolean | false | Dims the chart while new data loads. |
| Prop | Type | Default | Description |
|---|---|---|---|
| labels* (required) | string[] | — | One label per point, shared by every metric. |
| metrics* (required) | Metric[] | — | The headline numbers: id, label, value, change, series, previous, and optional format and lowerIsBetter. |
| pages* (required) | { label: string; value: number }[] | — | Rows for the top pages list. |
| sources* (required) | { label: string; value: number }[] | — | Rows for the sources list. |
Pass data for each range. The types are exported from the file.
import { MetricsDashboard, type MetricsData, type MetricsRange } from "@/components/metrics-dashboard"
const data: Record<MetricsRange, MetricsData> = await getMetrics()
<MetricsDashboard title="Acme" scope="acme.com" data={data} />{ id: "errors", label: "Error rate", value: 0.012, change: -0.08, lowerIsBetter: true,
format: { style: "percent", maximumFractionDigits: 1 }, series, previous }