Files
EmailBill/openspec/changes/archive/2026-02-17-migrate-to-chartjs/specs/statistics-charts/spec.md
SunCheng 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
1
2026-02-18 21:16:45 +08:00

3.3 KiB

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