An analytics overview on inset cards: traffic you switch by metric with a line that follows the pointer, cache, countries, status codes, threats and top paths, all moving with the range.
When to use
- An analytics overview on inset cards: traffic by metric, cache, countries, statuses, threats and top paths.
- Infrastructure and edge dashboards; ops views with many small panels.
When not to use
- Product or marketing analytics led by one chart: Analytics overview.
- Pages for readers who aren't technical: many small panels read as noise.
Usage
Analytics panels with your own data: every prop has the sample as its default, so pass only what you have.
import { AnalyticsPanels } from "@/components/dashral/blocks/analytics-panels"
<AnalyticsPanels
sites={zones}
metrics={metrics}
ranges={ranges}
range={range}
onRangeChange={setRange}
onPanelAction={(panel) => router.push(`/analytics/${panel}`)}
updated="Updated a minute ago"
/>API reference
AnalyticsPanels
An analytics overview on inset cards: each panel's title and menu on a tinted frame, its content on a card set into it. Web traffic switches between visitors, requests and data served, with a line that follows the pointer and the value under it; countries, status codes, cache hits, top paths and threats sit around it. The range moves every number to its new value. Your sites, metrics and each range's figures come from props; with range and onRangeChange you load a range's figures as it's picked.
| Prop | Type | Default |
|---|---|---|
sites | string[] | sample |
site | stringThe site shown (the page keeps it without it). | — |
onSiteChange | (site: string) => void | — |
metrics | PanelMetric[] | sample |
ranges | PanelsRange[] | sample |
range | string | — |
onRangeChange | (range: string) => void | — |
onExport | (range: string) => void | — |
onPanelAction | (panel: string, action: "report" | "dashboard" | "csv") => voidA panel's menu: the panel's title and what was picked. | — |
updated | stringUnder each panel. | "Updated a minute ago" |
type PanelMetric
A number on the traffic panel: how it reads; its points come from each range, by id.
| Prop | Type | Default |
|---|---|---|
id | string | — |
label | string | — |
format | (n: number) => string | — |
type PanelsRange
A range on the switch, with everything the panels show for it: the chart's labels and each metric's points with their change, the cache, countries, status codes, threats and top paths. A part left out hides its panel.
| Prop | Type | Default |
|---|---|---|
value | string | — |
label | string | — |
labels | string[] | — |
traffic | Record<string, { values: number[]; change: number }> | — |
cache | { hit: number; cached: number; fromOrigin: number; savedGb: number } | — |
countries | { key: string; label: string; value: number }[] | — |
statuses | { label: string; value: number; color: string }[] | — |
threats | { blocked: number; kinds: { label: string; share: number }[] } | — |
paths | { path: string; requests: number; share: number; change: number }[] | — |