Analytics overviewPro

A whole analytics page: who's online, numbers that pick what the chart shows, the period before, and pages, sources and countries.

When to use

A whole analytics page: who's online, numbers that pick what the chart shows, the period before, and top lists.
Product and marketing analytics with a few headline metrics and a 7, 30 or 90 day range.

When not to use

Ops and infrastructure metrics across many small panels: Analytics panels.
One or two numbers on a home page: Stats cards.

Usage

Analytics overview with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { AnalyticsOverview } from "@/components/dashral/blocks/analytics-overview"
2
3<AnalyticsOverview
4  sites={sites}
5  site={siteId}
6  onSiteChange={setSiteId}
7  online={visitorsNow}
8  metrics={metrics}
9  periods={periods}
10  onExport={(period) => api.analytics.export(siteId, period)}
11/>

API reference

AnalyticsOverview

A whole analytics page: the site, who's online, a period switch and export; four numbers that each pick what the chart shows, with their change; an area chart against the period before, read by hover or the arrow keys; then top pages, sources and countries. Every part follows the period. Your sites, metrics and each period's figures come from props; with period and onPeriodChange you load a period's figures as it's picked.

Prop	Type	Default
`sites`	`string[]`	`sample`
`site`	`string` The site shown (the page keeps it without it).	—
`onSiteChange`	`(site: string) => void`	—
`online`	`number \| null` People on the site right now; null hides it.	`38`
`metrics`	`AnalyticsMetric[]`	`sample`
`periods`	`AnalyticsPeriod[]`	`sample`
`period`	`string`	—
`onPeriodChange`	`(period: string) => void`	—
`onExport`	`(period: string) => void`	—

type AnalyticsMetric

A number on top: how it reads, and how a period's values add up to it ("sum", or "average" for rates).

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`format`	`(value: number) => string`	—
`aggregate`	`"sum" \| "average"`	—
`invert`	`boolean`	—

type BreakdownItem

Prop	Type	Default
`label`	`string`	—
`value`	`number`	—

type AnalyticsPeriod

A period on the switch: the chart's labels, what it compares with, each metric's values now and before (by id), and the breakdowns.

Prop	Type	Default
`value`	`string`	—
`label`	`string`	—
`compare`	`string`	—
`labels`	`string[]`	—
`series`	`Record<string, { now: number[]; before: number[] }>`	—
`pages`	`BreakdownItem[]`	—
`sources`	`BreakdownItem[]`	—
`countries`	`BreakdownItem[]`	—