Resident Profile Overview > Add Line Graph for Most Engaged Time of Day in Resident Profile Overview

[chrissantillan]

User Story

As an Administrator, I want to see a line graph showing the times of day when a Resident is most engaged, so that I can identify patterns of engagement.

Description

This feature adds a line graph to the Resident Profile Overview that visualizes Resident engagement patterns across a 24-hour period.

• The x-axis will represent the hours of the day (12am-11pm).
• The y-axis will represent the total minutes of engagement within each hour.
• Engagement is defined as any tracked interaction with UnlockEd's educational content (e.g., Knowledge Center, Learning Path, My Progress, Trending Content).
• The line graph should display a single line for the selected Resident.
• Hovering over data points should reveal the exact time and number of minutes spent during that hour.

Tasks

• Add Line Graph Component
  • Implement a line graph using the existing charting library.
  • Ensure the x-axis is labeled with hour markers (e.g., 12am, 1am, 2am, ...).
  • Ensure the y-axis reflects total engagement time (minutes).
• Backend Query Adjustments
  • Update the backend analytics queries to aggregate engagement data by hour.
  • Data should be retrieved from Resident activity logs across all UnlockEd layers.
• UI/UX Enhancements
  • Place the line graph below the Days Active and Hours Active metrics.
  • Hover tooltips display the exact time and engagement duration in minutes.

User Flow

1. Admin logs into UnlockEd.
2. Admin navigates to the Residents page.
3. Admin clicks on a Resident's name to open the Resident Profile Overview.
4. In the Engagement Metrics section, Admin sees a line graph titled "Most Engaged Time of Day".
5. Admin reviews the graph, which shows:
   • Hourly engagement data across a 24-hour period.
   • Peaks and troughs indicating the most and least active times for the Resident.
6. Admin hovers over any data point to view a tooltip with:
   • Hour of the day.
   • Total engagement time during that hour.

Acceptance Criteria

• The line graph displays Resident engagement correctly across a 24-hour time frame.
• The x-axis clearly shows hour markers from 12am to 11pm.
• The y-axis accurately reflects total engagement time in minutes.
• Hovering over a data point reveals:
  • The time of day.
  • The minutes of engagement during that hour.
• The graph is visually clear, responsive, and accessible.
• No performance issues occur when loading the line graph for high-activity Residents.

Technical Considerations

• Use the existing charting library if available.
• Ensure the graph renders dynamically without page reloads.