Analytics Page
A contained analytics dashboard with a range date picker and presets, KPI tiles with sparklines, a traffic chart, a ranked bar list of top pages and a weekday-by-hour heatmap.
Preview
pebble.example
Analytics
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| kpis | { id, label, value, delta?, positive?, trend? }[] | — | KPI tiles (our DashboardKpi) with delta pill and sparkline. |
| series | { data, index, series, label } | — | Main time series for our Chart (area). |
| topPages | { id, label, value, href? }[] | [] | Ranked bar list of top pages. |
| heatmap | { rows, columns, values, label } | — | Traffic by weekday × time of day (our Heatmap). |
| range / defaultRange | DateRange | — | Controlled or initial date range. Pair range with onRangeChange. |
| onRangeChange | (range) => void | — | Called when the date range changes; recompute data from it. |
| presets | { label, value }[] | — | Quick picks in the date range picker. |
| today | Date | — | Day marked as today in the picker. |
| title | ReactNode | "Analytics" | Page heading. |
| eyebrow | ReactNode | — | Line above the heading, e.g. the site. |
| valueFormatter | (value) => string | compact | Formats chart ticks, bar values and heatmap cells. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.