Activity Type Breakdown Widget - Likepersonsapp

Description

Visualises the distribution of a peer mentor's activities by type (e.g., home visits, phone calls, group sessions) using animated bar or pie segments with colour-coded design tokens. Each segment includes an accessible label combining the activity type name and its percentage share.

Feature: Annual Impact Summary (Wrapped)

activity-type-breakdown-widget

Summaries

The Activity Type Breakdown Widget gives peer mentors an immediate, intuitive picture of how they are spending their volunteering time — whether through home visits, phone calls, or group sessions. By visualising this distribution clearly and accessibly, the organisation empowers mentors to reflect on their impact patterns and programme managers to identify where capacity is concentrated or lacking. This supports more informed strategic decisions about training and resource allocation, ultimately improving programme effectiveness and demonstrating measurable outcomes to funders and stakeholders.

Medium complexity due to the animated chart rendering and the requirement to support both bar and pie segment visual modes with design token colours. The primary dependency is wrapped-animation-controller. Testing must cover animation correctness, colour token application per activity type, tap interaction callbacks, and accessibility label accuracy across varying data distributions including edge cases with zero-value segments. Design token alignment with the broader design system must be confirmed early to avoid visual inconsistency.

Plan for device testing on multiple screen sizes given the proportional nature of chart segments.

ActivityTypeBreakdownWidget takes a typed List and renders proportional segments using either CustomPainter or a chart library, driven by design tokens for per-category colours. animateIn() uses wrapped-animation-controller to tween segment widths or arc sweeps from zero. onSegmentTapped registers a callback receiving the tapped ActivityTypeStat for detail expansion. getAccessibilitySummary() builds a combined string enumerating each type with its percentage, exposed via Semantics.

Segment colours must be sourced strictly from design tokens rather than hardcoded values to maintain theme consistency. Handle empty or single-segment data sets explicitly.