Monthly Activity Bar Chart
Component Detail
Description
Bar chart built with fl_chart showing activity count per month for the selected period. Supports tap-to-highlight and animated transitions when filter changes. Renders within the coordinator dashboard and the personal peer mentor stats view.
monthly-activity-bar-chart
Summaries
The Monthly Activity Bar Chart gives coordinators and peer mentors a clear visual trend of activity volume over time, transforming raw activity data into an immediately understandable pattern. This supports strategic conversations between coordinators and program leadership — rather than reviewing spreadsheets, stakeholders can instantly see whether activity is increasing, declining, or seasonal. The chart's interactive tap-to-highlight capability allows users to investigate specific months without leaving the dashboard, reducing friction in performance reviews. As a shared component used in both the coordinator dashboard and individual mentor stat views, it delivers consistent data presentation across user roles, reinforcing trust in the platform's reporting.
This medium-complexity shared mobile component depends on the fl-chart-adapter, which must be available before development can complete. The fl_chart library integration introduces a dependency on a third-party package — version compatibility with the Flutter SDK in use should be validated early to avoid late-stage surprises. Animated transitions on data refresh and tap interaction logic add testing complexity beyond basic rendering. Since this component renders in both the coordinator dashboard and the personal peer mentor stats view, integration testing must cover both contexts.
Loading skeleton and empty state implementations are required in the acceptance criteria. Chart performance on large datasets (e.g., 12+ months of data with many activities per month) should be profiled on a low-end Android device during QA.
MonthlyActivityBarChart is a shared, medium-complexity Flutter UI component built on top of the fl-chart-adapter abstraction. It accepts `List
The component consumes the `activity` data model indirectly through the MonthlyStatPoint DTO. Empty state (no data for period) and loading state (`setLoading(bool)`) must both be implemented. Wrapping fl_chart in an adapter layer is intentional — it isolates the chart library behind a stable interface, allowing future library substitution without changing consuming screens.
Responsibilities
- Render bar chart from monthly activity data
- Animate transitions on data refresh
- Handle empty state and loading skeleton
- Display tooltip with exact count on bar tap
Interfaces
MonthlyActivityBarChart({required List<MonthlyStatPoint> data, int? highlightMonth})
onBarTapped(int monthIndex)
animateToData(List<MonthlyStatPoint> newData)
setLoading(bool loading)
Relationships
Dependents (2)
Components that depend on this component
Used Integrations (1)
External integrations and APIs this component relies on