Implement Stacked Bar Chart for Activity Counts by Resident and Activity Type

[brylie]

Objective

To introduce a stacked bar chart on the Home profile template that displays activity counts grouped by resident and activity type. This visualization aims to provide a clear overview of each resident's participation in different activities, enhancing the understanding of individual engagement patterns.

Chart Details

• Type: Stacked Bar Chart (Horizontal Orientation)
• X-Axis: Activity Count.
• Y-Axis: Residents (each bar represents a resident with their name as the label).
• Bar Composition: Each resident's bar is a stack of colors, each representing a different activity type they participated in.
• Color Coding: Consistent across all bars, where each color denotes the same activity type.

Data Calculation and Aggregation

• Data Source: Activity records.
• Aggregation Method: Group activity records first by resident, then by activity type. For each grouping, aggregate to a single count representing the number of times the resident participated in that activity type.
• Bar Composition: Each resident's bar in the chart will consist of segments (stacked), each segment’s length proportional to the count of activities of that type the resident participated in.
• Color Consistency: Maintain uniformity in color representation for each activity type across all resident bars.

Aggregation Summary for Activity Counts by Resident and Activity Type Chart

This chart requires a multi-level aggregation approach:

1. Resident Identification: For each resident, compile all their activity records.
2. Activity Type Grouping: Within each resident's data, group the activities by type.
3. Count Aggregation: For each group (resident-activity type combination), count the total number of activities.
4. Bar Segment Representation: Represent each activity type count as a segment in the resident's bar, with the segment's length corresponding to the activity count.
5. Color Coding: Assign a unique color to each activity type and use this color consistently across all residents' bars.
6. Data Structuring for Visualization: Organize the aggregated data to fit the stacked bar chart format, ensuring clarity in representing each resident's activity engagement.

Design Considerations

• The chart should be intuitive, with clear labels for residents and distinct colors for activity types.
• Ensure the chart is responsive and aligns with the UI design of the Home profile template.
• Prioritize readability, especially when dealing with multiple activity types and residents.

Technical Requirements

• Use Python Plotly library for chart implementation, focusing on backend data processing for accuracy.
• Ensure efficient data processing for the aggregation of activity counts by resident and activity type.

Reference Image

Acceptance Criteria

• A responsive, horizontal stacked bar chart displaying activity counts by resident and activity type is integrated into the Home profile template.
• The chart accurately reflects the aggregated data and updates dynamically with current records.
• The visualization adheres to design and performance standards set for the platform.

[adrienneli104]

Hi could I be assigned to this issue? My teammate Tanay has decided to handle the data fixtures by himself

[brylie]

Thanks, @adrienneli104! I’ve assigned you to the issue.

[brylie]

@adrienneli104, before working on the data aggregations, I realized we should create a database table that would make it easier to query and aggregate chart data. Please look at the following issue, which would serve as a foundation for this and other data visualization tasks.

• Implement 'ResidentActivity' Model in New 'Metrics' App for Efficient Data Aggregation #44