# Data viz

> Frame data visualization components: AreaChart, CategoryBreakdown, ProgressBar and HealthDimensionRow.

Web page: https://system.beibeidesign.com/components/data-viz/

### AreaChart

Master Used in: Wingman 0 · WorkPal 1

Responsive SVG area chart with Catmull-Rom smoothing. Auto-sizes to container width via ResizeObserver.

### CategoryBreakdown

Master Used in: Wingman 0 · WorkPal 2

Stacked-percentage bar + color-dot legend. One visual unit for breakdowns where every category sums to a whole.

Deadline pressure 35%

Keeping up with AI 28%

Cross-team alignment 22%

Context switching 15%

### ProgressBar

Master Used in: Wingman 1 · WorkPal 2

Track + filled bar. Optional `showLabel` for inline percentage. Color override via `color` prop.

32%

78%

### HealthDimensionRow

Master Used in: Wingman 0 · WorkPal 1

Lucide icon + label/desc + auto-colored status pill. Color/icon derived from value/target ratio.

Focus Time

9–11am blocked & protected

2/2h

Movement

Stand-up reminder every hour

5/8

Family time

No family time yet today

0/2h