## ADDED Requirements

### Requirement: Chart.js must be integrated with Vue 3 Composition API
The system SHALL use vue-chartjs 5.x to integrate Chart.js with Vue 3 components using the Composition API pattern.

#### Scenario: Chart component renders successfully
- **WHEN** a component imports and uses vue-chartjs chart components
- **THEN** the chart renders correctly in the DOM without console errors

#### Scenario: Chart updates reactively
- **WHEN** the chart's data prop changes
- **THEN** the chart re-renders with the new data using Chart.js update mechanism

### Requirement: Theme system must support Vant UI color scheme
The system SHALL provide a centralized theme configuration that adapts to Vant UI's theme variables, including dark mode support.

#### Scenario: Chart uses Vant primary color
- **WHEN** a chart is rendered
- **THEN** the chart uses `var(--van-primary-color)` for primary elements (lines, bars, etc.)

#### Scenario: Chart adapts to dark mode
- **WHEN** user switches to dark mode via Vant ConfigProvider
- **THEN** chart text color changes to `var(--van-text-color)` and background adapts accordingly

### Requirement: Base chart component must encapsulate common configuration
The system SHALL provide a `BaseChart.vue` component that encapsulates responsive behavior, theme integration, and error handling.

#### Scenario: Chart responds to container resize
- **WHEN** the parent container resizes (e.g., orientation change)
- **THEN** the chart automatically adjusts its dimensions using ResizeObserver

#### Scenario: Chart shows loading state
- **WHEN** chart data is being fetched
- **THEN** the component displays a loading indicator (Vant Loading component)

#### Scenario: Chart handles empty data gracefully
- **WHEN** chart receives empty or null data
- **THEN** the component displays an empty state message without errors

### Requirement: Gauge chart plugin must be available
The system SHALL provide a custom Chart.js plugin that renders a gauge chart using Doughnut chart with center text overlay.

#### Scenario: Gauge chart displays percentage
- **WHEN** gauge chart is rendered with value and limit props
- **THEN** the chart shows a semi-circle gauge with percentage text in the center

#### Scenario: Gauge chart supports color thresholds
- **WHEN** gauge value exceeds 100%
- **THEN** the gauge color changes to danger color (red for expense, green for income)

### Requirement: Charts must support mobile touch interactions
The system SHALL enable touch-friendly interactions including tap-to-highlight and pan gestures.

#### Scenario: User taps chart segment
- **WHEN** user taps a bar/pie segment on mobile
- **THEN** the segment highlights and shows tooltip with details

#### Scenario: User pans line chart
- **WHEN** user swipes horizontally on a line chart with many data points
- **THEN** the chart scrolls to show hidden data points

### Requirement: Chart animations must be configurable
The system SHALL allow disabling or customizing chart animations via configuration.

#### Scenario: Animation duration is consistent
- **WHEN** a chart first loads
- **THEN** the animation completes in 750ms (matching Vant UI transition timing)

#### Scenario: Animation respects prefers-reduced-motion
- **WHEN** user has `prefers-reduced-motion: reduce` enabled
- **THEN** charts render instantly without animation