Element: #206 Animated proportions (charts/pie) What it shows: A donut chart with Q1, Q2 and Q3 chips that switch which quarter of data the chart shows. When to use: Showing how a share breakdown shifts between periods with a selector. Spec: - `let selected = $state('Q1')` and `const data = $derived(qData[selected])` - `{#each quarters as q}` renders ` (selected = q)}` changes the quarter - `qData` has 4 items per quarter: Cloud, Enterprise, SaaS, Other - `` inside `` Tags: pie-chart, donut, chip, quarters, state, derived Needs: @codeatlasdev/ui@4.4.0 + echarts Components: Card, Flex, Chip, PieChart Live demo: https://ui.codeatlas.com.br/docs/charts/pie#animated-proportions

{#each quarters as q} (selected = q)} variant="brand" size="sm" /> {/each}