#205
Dashboard
An analytics dashboard combining four KPI cards with line, stacked bar, donut, scatter, calendar heatmap, gauge and radar charts.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Dashboard" pattern (@codeatlasdev/ui demo #205, charts/overview) in my app.
Call get_demo({ ids: ["#205"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Building an overview page that puts headline KPIs and several chart types on one screen.
Keep these library parts, with the props and tokens the demo uses:
- Card, Grid, KpiCard, KpiGrid, Stack from "@codeatlasdev/ui"
- LineChart, BarChart, PieChart, ScatterChart, HeatmapChart, GaugeChart, RadarChart, CalendarHeatmapPoint from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<KpiGrid>` with 4 `<KpiCard`: Revenue `$118k`, Users `94.2k`, Growth `34%`, Uptime `99.9%`, each with a `trend` and an `icon`
- `<LineChart` with 2 series Revenue and Expenses, `area`, `height="280px"`
- Two-column `<Grid columns={{ base: 1, md: 2 }} gap="4">`: `<BarChart` with 4 series and `stacked`, and `<PieChart` with 5 items and `donut`
- `<ScatterChart series={[{ name: 'Accounts', data: scatter }]}` with 60 points, `yName="Conversion %"` and `yFormatter`
- Second `<Grid columns={{ base: 1, md: 2 }} gap="4">`: `<HeatmapChart variant="calendar"` with `range={['2026-03-01', '2026-09-18']}` and `<GaugeChart value={84} label="Score"`
- `<RadarChart` with 5 `indicators` (Speed, Quality, Reliability, Innovation, Support, `max: 100`) and series Team A and Team B
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - Grid
@codeatlasdev/ui - KpiCard
@codeatlasdev/ui - KpiGrid
@codeatlasdev/ui - Stack
@codeatlasdev/ui - LineChart
@codeatlasdev/ui/charts - BarChart
@codeatlasdev/ui/charts - PieChart
@codeatlasdev/ui/charts - ScatterChart
@codeatlasdev/ui/charts - HeatmapChart
@codeatlasdev/ui/charts - GaugeChart
@codeatlasdev/ui/charts - RadarChart
@codeatlasdev/ui/charts
How it is built
- `<KpiGrid>` with 4 `<KpiCard`: Revenue `$118k`, Users `94.2k`, Growth `34%`, Uptime `99.9%`, each with a `trend` and an `icon`
- `<LineChart` with 2 series Revenue and Expenses, `area`, `height="280px"`
- Two-column `<Grid columns={{ base: 1, md: 2 }} gap="4">`: `<BarChart` with 4 series and `stacked`, and `<PieChart` with 5 items and `donut`
- `<ScatterChart series={[{ name: 'Accounts', data: scatter }]}` with 60 points, `yName="Conversion %"` and `yFormatter`
- Second `<Grid columns={{ base: 1, md: 2 }} gap="4">`: `<HeatmapChart variant="calendar"` with `range={['2026-03-01', '2026-09-18']}` and `<GaugeChart value={84} label="Score"`
- `<RadarChart` with 5 `indicators` (Speed, Quality, Reliability, Innovation, Support, `max: 100`) and series Team A and Team B
Related
Loading source.