归档

openspec/changes/archive/2026-02-21-migrate-to-chartjs/specs/budget-visualization/spec.md

@@ -0,0 +1,73 @@
+## 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

openspec/changes/archive/2026-02-21-migrate-to-chartjs/specs/chartjs-integration/spec.md

@@ -0,0 +1,71 @@
+## 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

openspec/changes/archive/2026-02-21-migrate-to-chartjs/specs/statistics-charts/spec.md

@@ -0,0 +1,77 @@
+## MODIFIED Requirements
+
+### Requirement: Daily trend chart must display expense/income over time
+The system SHALL render a line chart showing daily transaction totals for the selected time period (week/month/year).
+
+#### Scenario: Week view shows 7 days
+- **WHEN** user selects "Week" time period
+- **THEN** chart displays 7 data points (Mon-Sun) with expense and income lines
+
+#### Scenario: Month view shows daily trend
+- **WHEN** user selects "Month" time period
+- **THEN** chart displays 28-31 data points (one per day) with expense and income lines
+
+#### Scenario: Year view shows monthly trend
+- **WHEN** user selects "Year" time period
+- **THEN** chart displays 12 data points (one per month) with expense and income lines
+
+#### Scenario: Chart highlights max expense day
+- **WHEN** user views daily trend
+- **THEN** the day with highest expense has a highlighted marker
+
+#### Scenario: Chart supports zooming
+- **WHEN** user pinches on mobile or scrolls on desktop
+- **THEN** chart zooms in/out to show more/less detail
+
+### Requirement: Expense category pie chart must show spending breakdown
+The system SHALL render a pie chart displaying expense amounts grouped by category for the selected time period.
+
+#### Scenario: Pie chart shows all expense categories
+- **WHEN** user has expenses in multiple categories
+- **THEN** chart displays one slice per category with percentage labels
+
+#### Scenario: Pie chart uses category colors
+- **WHEN** categories have custom colors defined
+- **THEN** chart slices use the corresponding category colors
+
+#### Scenario: Pie chart shows "Others" for small categories
+- **WHEN** more than 8 categories exist
+- **THEN** categories below 3% are grouped into "Others" slice
+
+#### Scenario: Tapping slice shows category detail
+- **WHEN** user taps a pie slice
+- **THEN** app navigates to category detail view with transaction list
+
+### Requirement: Monthly expense bar chart must compare months
+The system SHALL render a vertical bar chart comparing expense totals across recent months.
+
+#### Scenario: Bar chart shows 6 recent months
+- **WHEN** user views monthly expense card
+- **THEN** chart displays 6 bars representing the last 6 months
+
+#### Scenario: Current month bar is highlighted
+- **WHEN** user views monthly expense card
+- **THEN** current month's bar uses primary color, previous months use gray
+
+#### Scenario: Bar height reflects expense amount
+- **WHEN** a month has higher expenses
+- **THEN** its bar is proportionally taller
+
+#### Scenario: Bar shows tooltip with formatted amount
+- **WHEN** user hovers/taps a bar
+- **THEN** tooltip displays month name and expense amount formatted as "¥X,XXX.XX"
+
+### Requirement: Charts must maintain existing responsive behavior
+The system SHALL ensure all statistics charts adapt to different screen sizes and orientations.
+
+#### Scenario: Chart scales on narrow screens
+- **WHEN** screen width is less than 375px
+- **THEN** chart font sizes scale down proportionally while maintaining readability
+
+#### Scenario: Chart reflows on orientation change
+- **WHEN** device orientation changes from portrait to landscape
+- **THEN** chart re-renders to fill available width within 300ms
+
+#### Scenario: Chart labels truncate on small screens
+- **WHEN** category names are longer than 12 characters
+- **THEN** labels show ellipsis (e.g., "Entertainment..." ) and full text in tooltip