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
74 lines
3.5 KiB
Markdown
74 lines
3.5 KiB
Markdown
## MODIFIED Requirements
|
|
|
|
### Requirement: Budget gauge charts must display health status
|
|
The system SHALL render monthly and yearly budget health using gauge (semi-circle) charts showing current usage vs limit.
|
|
|
|
#### Scenario: Monthly gauge shows expense usage
|
|
- **WHEN** user views expense budget analysis
|
|
- **THEN** monthly gauge displays current expense / monthly limit as a percentage with remaining balance in center
|
|
|
|
#### Scenario: Monthly gauge shows income progress
|
|
- **WHEN** user views income budget analysis
|
|
- **THEN** monthly gauge displays current income / monthly target as a percentage with shortfall/excess in center
|
|
|
|
#### Scenario: Yearly gauge shows expense usage
|
|
- **WHEN** user views expense budget analysis
|
|
- **THEN** yearly gauge displays current expense / yearly limit as a percentage with remaining balance in center
|
|
|
|
#### Scenario: Yearly gauge shows income progress
|
|
- **WHEN** user views income budget analysis
|
|
- **THEN** yearly gauge displays current income / yearly target as a percentage with shortfall/excess in center
|
|
|
|
#### Scenario: Gauge changes color when exceeding limit
|
|
- **WHEN** expense usage exceeds 100% of budget
|
|
- **THEN** gauge arc color changes to red (var(--van-danger-color))
|
|
|
|
#### Scenario: Gauge changes color when exceeding income target
|
|
- **WHEN** income exceeds 100% of target
|
|
- **THEN** gauge arc color changes to green (var(--van-success-color))
|
|
|
|
### Requirement: Budget variance chart must show category-level differences
|
|
The system SHALL render a horizontal bar chart comparing actual vs budgeted amounts for each category.
|
|
|
|
#### Scenario: Variance chart displays all categories
|
|
- **WHEN** user has multiple budget categories
|
|
- **THEN** chart shows horizontal bars for each category with actual (solid) and budget (dashed) values
|
|
|
|
#### Scenario: Variance chart highlights overbudget categories
|
|
- **WHEN** a category's actual exceeds budget
|
|
- **THEN** the bar is colored red and labeled with overage amount
|
|
|
|
#### Scenario: Variance chart shows underbudget categories
|
|
- **WHEN** a category's actual is below budget
|
|
- **THEN** the bar is colored green and labeled with remaining amount
|
|
|
|
### Requirement: Budget burndown chart must track daily spending trend
|
|
The system SHALL render line charts showing cumulative spending vs ideal pace for monthly and yearly periods.
|
|
|
|
#### Scenario: Monthly burndown chart shows ideal vs actual
|
|
- **WHEN** user views monthly burndown
|
|
- **THEN** chart displays two lines: ideal linear spending and actual cumulative spending
|
|
|
|
#### Scenario: Monthly burndown projects month-end total
|
|
- **WHEN** current date is mid-month
|
|
- **THEN** chart shows projected month-end total based on current pace (dotted line extension)
|
|
|
|
#### Scenario: Yearly burndown chart shows ideal vs actual
|
|
- **WHEN** user views yearly burndown
|
|
- **THEN** chart displays two lines: ideal linear spending and actual cumulative spending by month
|
|
|
|
#### Scenario: Yearly burndown highlights current month
|
|
- **WHEN** user views yearly burndown
|
|
- **THEN** chart highlights the current month's data point with a larger marker
|
|
|
|
### Requirement: Charts must maintain existing interaction behavior
|
|
The system SHALL preserve all existing click, tooltip, and zoom interactions from the ECharts implementation.
|
|
|
|
#### Scenario: Chart tooltip shows on hover/tap
|
|
- **WHEN** user hovers over (desktop) or taps (mobile) a data point
|
|
- **THEN** tooltip displays formatted value with label
|
|
|
|
#### Scenario: Chart updates when switching budget type
|
|
- **WHEN** user switches between expense/income/savings tabs
|
|
- **THEN** all charts update their data and labels within 300ms
|