View Monthly Activity Bar Chart
A monthly bar chart should be displayed on the statistics dashboard, showing the number of activities logged per calendar month within the selected time window. Each bar represents one month, with the height proportional to the activity count. The chart should animate on load and support accessible interaction via screen readers. The implementation uses fl_chart and must respect the design token color system for bar colors.
User Story
Audience Summaries
The monthly activity bar chart transforms raw activity data into a compelling visual narrative that peer mentors and coordinators can immediately interpret. By surfacing engagement trends over time, this feature enables organizations to identify burnout risk early, celebrate milestone contributors, and demonstrate program impact to funders like Bufdir. A peer mentor with 380 annual registrations becomes a visible success story rather than a database entry. This visualization directly supports grant reporting, volunteer retention, and organizational credibility — all critical to the sustainability of Norway's peer mentor programs across urban and rural communities.
This story has medium priority and builds directly on the statistics dashboard foundation (dependency: story-activity-statistics-dashboard-peer-mentor-002). Delivery requires a frontend developer with fl_chart experience and familiarity with the project's design token system. Acceptance criteria cover five scenarios including filter responsiveness, tap interaction, empty-month display, and screen reader accessibility — each requiring dedicated QA validation. The animation-on-load requirement adds polish but also introduces performance testing needs.
Accessibility compliance for screen readers must be validated with assistive technology, adding UAT complexity. Coordinate with the design team to confirm bar color token assignments before implementation begins.
Implement a bar chart widget using fl_chart that renders one bar per calendar month within the active time window filter. Each bar height is proportional to the monthly activity count pulled from the statistics data model. Wire the time window filter state to trigger chart re-renders on change. Implement tap gesture detection to display a tooltip overlay with the exact count and month label.
Empty months must render zero-height bars rather than being omitted — handle this in the data transformation layer before passing to fl_chart. Apply Semantics widgets around each bar for screen reader accessibility, announcing month label and count. Use design token color constants for bar fill colors. Write widget tests covering filter changes, empty month rendering, and tooltip display logic.
Acceptance Criteria
- Given I am viewing the statistics dashboard with a time window spanning multiple months, When the chart renders, Then I see one bar per month with height proportional to my activity count for that month
- Given the bar chart is displayed, When I tap on a specific month's bar, Then I see a tooltip or overlay showing the exact activity count and month name
- Given I change the time window filter, When the filter is applied, Then the bar chart updates to show only the months within the new time window
- Given the chart renders, When I use a screen reader, Then each bar is announced with its month label and corresponding activity count
- Given I have zero activities in a particular month within the range, When the chart renders, Then that month is shown as an empty bar rather than being omitted from the chart
Business Value
Trend visualization over time is essential for recognizing burnout risk, seasonal engagement patterns, and milestone moments. HLF specifically cited a peer mentor with 380 registrations in one year — a monthly chart would make this visible and celebratable. The data also feeds upstream into the coordinator's team view and the Bufdir reporting aggregation pipeline.
Components
- Activity Chart Widget ui
- Monthly Activity Bar Chart ui
- fl_chart Adapter infrastructure
- Stats Repository data
- Stats Data Models data
- Coordinator Statistics BLoC infrastructure
- Personal Statistics Service service