c49f66757e
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
3.3 KiB
3.3 KiB
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: reduceenabled - THEN charts render instantly without animation