Activity Type Donut Chart
Component Detail
Description
Donut chart built with fl_chart showing breakdown of activities by type for the selected coordinator and period. Includes a legend listing each activity type with its count and percentage. Shared with the Activity Statistics Dashboard feature.
activity-type-donut-chart
Summaries
The Activity Type Donut Chart transforms raw program data into an immediately legible visual that tells coordinators and administrators exactly where effort is being directed across activity categories. By surfacing distribution patterns at a glance, decision-makers can spot imbalances, reallocate resources, and demonstrate program diversity to funders or stakeholders without interpreting spreadsheets. The component is shared across multiple dashboard contexts, meaning a single investment yields value in every reporting surface — reducing both development cost and the risk of inconsistent data presentation that could erode stakeholder trust.
This medium-complexity mobile UI component depends on the fl-chart-adapter library and integrates with the Activity Statistics Dashboard feature. Because it is marked as shared, any changes to its interfaces require coordinated regression testing across all consuming screens — budget time for cross-feature QA. The donut chart's interactive segment-tap behavior adds a layer of state management that must be validated against filter interactions on the parent screen. Delivery risk is low in isolation, but coordination overhead with the statistics dashboard team should be tracked.
Ensure fl_chart version is pinned to avoid silent breaking changes.
ActivityTypeDonutChart wraps fl_chart's PieChart widget with a stateful adapter pattern driven by List
The legend is rendered as a Column of Row widgets keyed to segment color. Handle the empty-state branch early to avoid rendering a zero-radius donut. As a shared component, keep its interface stable and avoid leaking screen-specific logic into it.
Responsibilities
- Render donut chart from activity type breakdown data
- Render color-coded legend for each activity type
- Handle segment tap to highlight and filter
- Show empty state when no data available
Interfaces
ActivityTypeDonutChart({required List<ActivityTypeBreakdown> data})
onSegmentTapped(String activityTypeId)
updateData(List<ActivityTypeBreakdown> newData)
setHighlightedSegment(String? activityTypeId)
Relationships
Used Integrations (1)
External integrations and APIs this component relies on