37. 차트 위젯 시스템
Design a chart widget component system:
**Widget Container**:
- White background, 12px border-radius
- Header: title + description + time range selector
- Overflow menu: export, refresh, fullscreen
- Body: chart area with padding
- Optional footer: legend or summary
**Line Chart**:
- Multiple series support
- Smooth curves (tension: 0.4)
- Gradient fill below line (20% opacity)
- Grid lines: horizontal only, dashed, gray-100
- Axis labels: gray-500, 12px
- Hover tooltip: vertical line + all values
**Bar Chart**:
- Vertical or horizontal variant
- Grouped or stacked options
- Border-radius on bars (4px top)
- Hover: highlight bar, dim others
- Value labels: above bars option
**Pie/Donut Chart**:
- Donut: 65% inner radius
- Center: total value or icon
- Legend: right side or below
- Hover: slice lifts out slightly
- Labels: outside with lines
**Area Chart**:
- Stacked area variant
- Gradient fill
- Semi-transparent for overlapping
**Tooltip Design**:
- Background: gray-900
- Text: white
- Border-radius: 8px
- Shadow: lg
- Arrow pointing to data point
**Time Range Selector**:
- Preset buttons: 7D, 30D, 90D, 1Y, All
- Custom date range picker
**Legend**:
- Horizontal below chart or vertical right
- Colored dot + label
- Click to toggle series visibility
Tech: React + Recharts (or Victory/Chart.js) + Tailwind