Metric Card

Accessibility

• The chart is a slider whose value reads the day and amount.
• A hidden table carries every day for screen readers.
• A segment row uses aria-pressed.
• The trend Badge carries a direction glyph, not only colour.

Motion

• The line and area draw left to right over 600 ms on first view.
• Changing the period morphs the line in 400 ms and rolls the digits.
• The crosshair follows the pointer and snaps to the nearest day.
• Focusing a segment fades other rows to 40% and other bars to 30% in 150 ms.
• With reduced motion, charts appear at final values and digits swap in place.

Responsive behavior

• 448 px on Web and 358 px on Mobile.
• On Mobile, the period switch and segment values grow to touch size.

Performance

• The chart width comes from one ResizeObserver, disconnected on unmount, and paths recompute only when the period or width changes.
• Every period resamples to 30 points, so the line morphs instead of remounting.
• The draw runs once on entering the viewport, as a clip on the SVG.

• Import MetricCard from @/components/fetaui/metric-card and pass periods. Each needs value, delta, compare, current, previous, labels, from, to and segments.
• current and labels line up by index, and events[].index points into current.
• defaultDay and defaultSegment set the starting state, for docs. Pointer and keyboard take over from there.
• Segments past the third share one tone. format defaults to whole dollars. Composes Card, Badge, ToggleGroup and Separator.