A one-screen site analytics overview: KPI tabs switch the main chart between visitors, pageviews, bounce rate and visit duration against the previous period, with a live visitor counter. Side panels list top pages, sources and countries with inline bars.
npx shadcn@latest add https://hyperblur.dev/r/dashboard-analytics-compact.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-analytics-compact.tsx.
import { DashboardAnalyticsCompact } from "@/components/hyperblur/dashboard-analytics-compact"
<DashboardAnalyticsCompact site="fieldnote.app" defaultRange="30d" />| Prop | Type | Default | Description |
|---|---|---|---|
| site | string | "fieldnote.app" | Site name shown in the header. |
| accent | string | "#2f7bff" | Accent for the chart, active KPI and bars. |
| range | "7d" | "30d" | "90d" | Controlled date range. Pair with onRangeChange. | |
| defaultRange | "7d" | "30d" | "90d" | "30d" | Initial range when uncontrolled. |
| onRangeChange | (range: CompactRange) => void | Called when a range is picked. | |
| metric | "visitors" | "pageviews" | "bounce" | "duration" | Controlled metric. Pair with onMetricChange. | |
| defaultMetric | "visitors" | "pageviews" | "bounce" | "duration" | "visitors" | Initial metric when uncontrolled. |
| onMetricChange | (metric: CompactMetric) => void | Called when a KPI tab is picked. | |
| live | boolean | true | Shows the live visitor counter that updates every few seconds. |