9921cd5fdf
- Migrated 4 components from ECharts to Chart.js: * MonthlyExpenseCard.vue (折线图) * DailyTrendChart.vue (双系列折线图) * ExpenseCategoryCard.vue (环形图) * BudgetChartAnalysis.vue (仪表盘 + 多种图表) - Removed all ECharts imports and environment variable switches - Unified all charts to use BaseChart.vue component - Build verified: pnpm build success ✓ - No echarts imports remaining ✓ Refs: openspec/changes/migrate-remaining-echarts-to-chartjs
72 lines
3.3 KiB
Markdown
72 lines
3.3 KiB
Markdown
## 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
|