Element: #194 Animated counter (charts/gauge) What it shows: A ring gauge that counts up from 0 to 94 on mount, with a text label that changes with the value. When to use: Animating a score or health metric on load and pairing it with a verdict label. Spec: - `let value = $state(0)` incremented in `onMount` by `Math.min(value + 2, 94)` every 40 ms via `setInterval` - ` String(Math.round(v))}` rounds the displayed number - `const label = $derived(value < 40 ? 'Needs work' : value <= 70 ? 'Good' : 'Excellent')` - `` stacks the gauge above `

{label}

` - Interval is cleared when `value >= 94` and on unmount Tags: gauge-chart, ring, counter, animation, onmount, score, stack Needs: @codeatlasdev/ui@4.4.0 + echarts Components: Card, Stack, GaugeChart Live demo: https://ui.codeatlas.com.br/docs/charts/gauge#animated-counter String(Math.round(v))} height="260px" />

{label}