#210
Comparison
A radar chart comparing Team A and Team B across six dimensions.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Comparison" pattern (@codeatlasdev/ui demo #210, charts/radar) in my app.
Call get_demo({ ids: ["#210"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Comparing two entities, such as teams or products, on the same set of scores.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- RadarChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `const indicators` maps 6 names (Speed, Quality, Reliability, Innovation, Support, Coverage) to `{ name, max: 100 }`
- `<RadarChart` with `{indicators}` and 2 series
- `{ name: 'Team A', values: [88, 92, 76, 85, 94, 79] }`
- `{ name: 'Team B', values: [74, 68, 90, 72, 81, 83] }`
- `height="340px"` inside `<Card full>`
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 - RadarChart
@codeatlasdev/ui/charts
How it is built
- `const indicators` maps 6 names (Speed, Quality, Reliability, Innovation, Support, Coverage) to `{ name, max: 100 }`
- `<RadarChart` with `{indicators}` and 2 series
- `{ name: 'Team A', values: [88, 92, 76, 85, 94, 79] }`
- `{ name: 'Team B', values: [74, 68, 90, 72, 81, 83] }`
- `height="340px"` inside `<Card full>`
Related
Loading source.