#211
Interactive team builder
A radar chart for My team with six sliders that edit each dimension live.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Interactive team builder" pattern (@codeatlasdev/ui demo #211, charts/radar) in my app.
Call get_demo({ ids: ["#211"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Letting users build or tweak a skill or score profile and see the shape update.
Keep these library parts, with the props and tokens the demo uses:
- Card, Stack, Flex, Slider from "@codeatlasdev/ui"
- RadarChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `let dims = $state([88, 92, 76, 85, 94, 79])` holds the six scores
- `const series = $derived([{ name: 'My team', values: [...dims] }])`
- `<RadarChart {indicators} {series} height="320px" />`
- `{#each DIMS as dim, i}` renders one `<Slider value={dims[i]} min={0} max={100} step={1}`
- `onchange={(v) => { dims[i] = v[0]; }}` writes back the first slider value
- Each row shows the dimension name and `{dims[i]}` in a `<Flex justify="between">`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - Stack
@codeatlasdev/ui - Flex
@codeatlasdev/ui - Slider
@codeatlasdev/ui - RadarChart
@codeatlasdev/ui/charts
How it is built
- `let dims = $state([88, 92, 76, 85, 94, 79])` holds the six scores
- `const series = $derived([{ name: 'My team', values: [...dims] }])`
- `<RadarChart {indicators} {series} height="320px" />`
- `{#each DIMS as dim, i}` renders one `<Slider value={dims[i]} min={0} max={100} step={1}`
- `onchange={(v) => { dims[i] = v[0]; }}` writes back the first slider value
- Each row shows the dimension name and `{dims[i]}` in a `<Flex justify="between">`
Related
Loading source.