View Activity Type Breakdown Chart
A donut or bar chart should visualize the distribution of activity types the peer mentor has logged within the selected time window. Each activity type should be color-coded and labeled, with the actual count and percentage visible on tap or via legend. The chart must use the fl_chart Flutter package for rendering and must meet WCAG 2.2 AA contrast requirements. Activity type labels should respect the organization's custom terminology via the org labels system.
User Story
Audience Summaries
Understanding the distribution of activity types gives peer mentors actionable self-reflection data and provides coordinators with aggregate visibility into program delivery quality. For organizations aligned with Bufdir reporting requirements, ensuring peer mentors log the correct mix of activity categories is not just operationally useful — it is a compliance requirement. This chart feature directly supports that alignment by surfacing imbalances that would otherwise only be visible through manual data exports. The org labels system integration ensures terminology matches each organization's specific vocabulary, reducing confusion and increasing data accuracy.
Investing in WCAG 2.2 AA compliant visualizations demonstrates the platform's commitment to inclusive design, supporting public sector procurement requirements and broadening the addressable user base across organizations with accessibility mandates.
This story has dependencies on two prerequisite dashboard stories (activity-statistics-dashboard-peer-mentor-001 and 002) and should be scheduled only after those data layers are stable and merged. The fl_chart package integration requires confirming the pinned version is compatible with the current Flutter SDK before development begins — version drift has caused render regressions in similar work. WCAG 2.2 AA compliance requires dedicated accessibility testing with TalkBack and VoiceOver; content descriptions for each chart segment must be reviewed by a QA specialist familiar with screen reader behavior on both platforms. Org labels integration requires coordination with the team maintaining the labels API to confirm activity type key consistency.
Estimated effort is 4–6 days including accessibility review, edge case handling (single type, zero-data state, long label strings), and a visual QA pass across iOS and Android with multiple organization label configurations active.
Implementation centers on the fl_chart package — use PieChartData in donut configuration or BarChartData based on final UX decision. Fetch aggregated activity counts from the existing statistics data layer, grouping by activity_type_key and resolving display labels via the org labels provider. Each chart segment must use a color from a predefined accessible palette validated for WCAG 2.2 AA contrast against both light and dark background variants. Implement onTouchCallback on PieChartSectionData to present a detail overlay showing org-specific type name, absolute count, and percentage.
For accessibility, wrap the chart in a Semantics widget with a full textual description enumerating all segments (e.g., 'Peer support: 12 activities, 40%'). Handle edge cases explicitly: single segment renders a full donut ring without visual artifacts, zero-activity state renders an empty state widget rather than a broken chart, and long org label strings truncate with ellipsis in the legend. Ensure the chart re-renders correctly when the time window filter changes via the existing statistics state management layer.
Acceptance Criteria
- Given I have logged activities of multiple types, When I view the statistics dashboard, Then I see a chart displaying each activity type as a distinct segment with a label and count
- Given the chart is rendered, When I tap on a segment, Then I see the activity type name (using org-specific terminology), total count, and percentage of all activities
- Given the organization uses custom labels for activity types, When I view chart labels, Then they reflect the org-specific terminology rather than generic default labels
- Given the chart is displayed, When I use a screen reader, Then each segment is accessible with a descriptive content description announcing type name, count, and percentage
- Given I have only one type of activity logged, When the chart renders, Then it shows a single full segment with the appropriate label rather than an empty or broken chart
Business Value
Understanding the distribution of activity types helps peer mentors reflect on their practice and can surface coaching opportunities for coordinators. Organizations can use aggregate type data to ensure their peer mentors are delivering the right mix of support, which is especially important for Bufdir reporting alignment where activity categories must map to specific reporting fields.
Components
- Activity Chart Widget ui
- Activity Type Donut Chart ui
- fl_chart Adapter infrastructure
- Stats Repository data
- Stats Data Models data
- Coordinator Statistics BLoC infrastructure
- Organization Labels Provider infrastructure
- Organization Labels Provider infrastructure