KQ-1346 · ANALYTICS/CONSOLE
Analytics Console
A complete store analytics screen where every panel reads one query — store, window and filters. Change the period on the composed KPI panel, or brush its chart, and the console moves in one beat: source bars glide to new lengths in cascade on glide while their figures count, the device split re-divides, countries re-rank by gliding to new rows, the hours heatmap re-tints on a diagonal wave, and the composed pages table refetches into its own cascade. The four charts re-arrange per grid and width on glide; filter chips open real menus (arrows, Enter, Escape back to the chip) and below 900px the stores fold into a draggable drawer.
KQ-1346 · ANALYTICS/CONSOLE
Fernworks Supply
fernworks.shop · Last 30 days · Sep 1 – Sep 30 · 30 days
fernworks supply · last 30 days · all traffic
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/analytics-console
Props
- sites
- ConsoleSite[]
- default defaultConsoleSites
- The stores in the sidebar: id, name and host.
- site / defaultSite
- string
- default — / first store
- The store on screen.
- onSiteChange
- (id: string) => void
- default —
- Fires from the sidebar row or key that chose a store.
- views
- ConsoleView[]
- default defaultConsoleViews
- Saved sets of filters in the sidebar; a press applies one at once.
- dimensions
- ConsoleDimension[]
- default defaultConsoleDimensions
- What the filters bar can split by: device, channel and country, each with its options and shares.
- filters / defaultFilters
- ConsoleFilters
- default — / {}
- A dimension's id to the option chosen for it; absent means all.
- onFiltersChange
- (filters: ConsoleFilters) => void
- default —
- Fires from the chip, view or Clear that changed the filters.
- range / defaultRange
- "7d" | "30d" | "90d" | "1y"
- default — / "30d"
- The period: the last 7, 30 or 90 days, or the last year.
- onRangeChange
- (range: ConsoleRange) => void
- default —
- Fires from the KPI panel's period switch with the new period.
- onWindowChange
- (window: ConsoleWindow) => void
- default —
- Fires whenever the window changes: a period, a brush zoom on the chart or its reset.
- data
- (query: ConsoleQuery) => ConsoleData
- default defaultConsoleData
- Answers a store, a window of days and filters with the KPI series, the breakdowns, the window's bars and hours, and its top pages.
- now
- Date | number
- default defaultConsoleNow
- The last day of data.
- grid
- "bento" | "even" | "stack"
- default "bento"
- How the four charts are arranged: one doubled up, evenly, or one under another.
- density
- "compact" | "regular" | "roomy"
- default "regular"
- The table's rows (32, 40 or 48px), the panels' padding, the bars and the gaps.
- locale
- string
- default "en-US"
- The locale for numbers and money.
- currency
- string
- default "USD"
- The currency for money.
- status
- "ready" | "loading" | "error"
- default "ready"
- Whether the numbers have arrived: skeletons everywhere, or a message with Try again.
- onRetry
- () => void
- default —
- Try again was pressed after the numbers failed to load.
- label
- string
- default "Analytics"
- The console's accessible name.
- sound
- boolean
- default false
- Play the ticks and swishes; the composed KPI panel and table play their own.
- disabled
- boolean
- default false
- Greys the console out and makes it inert.
- className
- string
- default —
- Classes for the console's frame.
| Prop | Type | Default | Description |
|---|---|---|---|
| sites | ConsoleSite[] | defaultConsoleSites | The stores in the sidebar: id, name and host. |
| site / defaultSite | string | — / first store | The store on screen. |
| onSiteChange | (id: string) => void | — | Fires from the sidebar row or key that chose a store. |
| views | ConsoleView[] | defaultConsoleViews | Saved sets of filters in the sidebar; a press applies one at once. |
| dimensions | ConsoleDimension[] | defaultConsoleDimensions | What the filters bar can split by: device, channel and country, each with its options and shares. |
| filters / defaultFilters | ConsoleFilters | — / {} | A dimension's id to the option chosen for it; absent means all. |
| onFiltersChange | (filters: ConsoleFilters) => void | — | Fires from the chip, view or Clear that changed the filters. |
| range / defaultRange | "7d" | "30d" | "90d" | "1y" | — / "30d" | The period: the last 7, 30 or 90 days, or the last year. |
| onRangeChange | (range: ConsoleRange) => void | — | Fires from the KPI panel's period switch with the new period. |
| onWindowChange | (window: ConsoleWindow) => void | — | Fires whenever the window changes: a period, a brush zoom on the chart or its reset. |
| data | (query: ConsoleQuery) => ConsoleData | defaultConsoleData | Answers a store, a window of days and filters with the KPI series, the breakdowns, the window's bars and hours, and its top pages. |
| now | Date | number | defaultConsoleNow | The last day of data. |
| grid | "bento" | "even" | "stack" | "bento" | How the four charts are arranged: one doubled up, evenly, or one under another. |
| density | "compact" | "regular" | "roomy" | "regular" | The table's rows (32, 40 or 48px), the panels' padding, the bars and the gaps. |
| locale | string | "en-US" | The locale for numbers and money. |
| currency | string | "USD" | The currency for money. |
| status | "ready" | "loading" | "error" | "ready" | Whether the numbers have arrived: skeletons everywhere, or a message with Try again. |
| onRetry | () => void | — | Try again was pressed after the numbers failed to load. |
| label | string | "Analytics" | The console's accessible name. |
| sound | boolean | false | Play the ticks and swishes; the composed KPI panel and table play their own. |
| disabled | boolean | false | Greys the console out and makes it inert. |
| className | string | — | Classes for the console's frame. |