Activity Chart Widget
Component Detail
Description
Bar or line chart rendered via fl_chart showing activity volume over time within the selected window. Provides visual context for trends across days (month view), weeks (quarter view), or months (year view). Meets WCAG 2.2 AA contrast requirements with accessible color palette and labeled axes.
activity-chart-widget
Summaries
The Activity Chart Widget transforms raw engagement data into intuitive visual trends that users can immediately understand, directly improving user retention and satisfaction. By presenting activity volume across flexible time windows — daily, weekly, or monthly — the widget empowers users to self-assess progress and stay motivated, which reduces churn and increases long-term product stickiness. Its WCAG 2.2 AA accessibility compliance broadens the addressable user base by ensuring the product is usable for people with visual impairments, supporting regulatory compliance and demonstrating corporate responsibility. Investing in accessible, high-quality data visualization differentiates the product in a competitive market where clarity of insight drives user loyalty and premium subscription conversions.
The Activity Chart Widget is a self-contained mobile UI component of medium complexity, with no external service dependencies, making it one of the lower-risk deliverables in the component roadmap. Development effort centers on integrating the fl_chart library, implementing granularity switching logic across three time windows, and validating WCAG 2.2 AA color contrast requirements — the last of which requires dedicated accessibility QA testing and may need a design review cycle. Timeline risk is low given the absence of backend dependencies, but accessibility sign-off should be scheduled early to avoid late-stage rework. Tooltip interaction behavior and axis label formatting across window modes should be covered by widget-level tests.
Plan for one regression pass after any chart library upgrades.
ActivityChartWidget is a stateless Flutter widget that delegates all rendering to the fl_chart library, receiving pre-aggregated ChartDataPoint lists and a TimeWindow enum from its parent. It conditionally dispatches to buildBarChart or buildLineChart based on the window context, with formatAxisLabel adapting date formatting per granularity level (day labels for month view, week labels for quarter view, month labels for year view). The onBarTouched callback handles touch events to trigger tooltips. No Riverpod providers or repositories are consumed directly — data must be injected by the parent.
Accessibility compliance is enforced at the color palette and axis label layer; ensure any palette changes are validated against WCAG contrast ratios. The component is straightforward to test with mock ChartDataPoint fixtures and does not carry hidden async complexity.
Responsibilities
- Render activity volume chart using fl_chart library
- Adapt granularity based on selected time window (day/week/month)
- Ensure WCAG 2.2 AA color contrast on chart elements
- Show tooltips on bar/point interaction
Interfaces
ActivityChartWidget({required List<ChartDataPoint> dataPoints, required TimeWindow window})
buildBarChart(List<ChartDataPoint> points)
buildLineChart(List<ChartDataPoint> points)
onBarTouched(int index)
formatAxisLabel(DateTime date, TimeWindow window)
Relationships
Dependents (2)
Components that depend on this component
Used Integrations (1)
External integrations and APIs this component relies on