Progress page and Engagement Heatmap Widget

[davidngash98]

Summary
This PR introduces the frontend implementation for the Peer Progress feature, including a new dedicated page and an Engagement Heatmap widget to visualise student activity within a unit.
The feature provides a clear, GitHub-style view of engagement trends over time and establishes a scalable structure for additional peer progress features.
Depends on: thoth-tech/doubtfire-api#88 (backend endpoint for the engagement heatmap).

What was implemented

Peer Progress Page

• Added new route: /projects/:projectId/peer-progress`
• Created PeerProgressComponent as a container for peer progress features
• Integrated page into existing navigation (task dropdown)
• Connected to current project/unit context

Engagement Heatmap Widget

New EngagementHeatmapCardComponent
Displays:

• Tasks completed
• Active days
• Current streak
• Heatmap grid (7-day layout)

Includes:

• Month labels (GitHub-style)
• All 7 day labels (Mon–Sun)
• Tooltips for daily activity
• Legend for intensity levels

Data & Services

• Added EngagementHeatmapService to consume: GET /api/projects/:id/engagement_heatmap
• Added response model for strong typing
• Implemented lightweight in-memory caching (per project, short TTL)

UX / Performance

• Skeleton loading state (prevents layout shift)
• Stable layout during load
• Precomputed rendering data for performance
• Handles loading, empty, and error states

Tests

• Unit tests added for:

• PeerProgressComponent
• EngagementHeatmapCardComponent
• EngagementHeatmapService
• Heatmap utility functions

How to test

1. Open any project/unit in OnTrack
2. Navigate to:

• /projects/:projectId/peer-progress
• or use the Peer Progress option in the task dropdown

3. Verify:

• Page loads correctly with selected unit context
• Heatmap renders with data
• Summary tiles display correctly
• Month labels and all 7 day labels are visible
• Tooltips show correct activity on hover

4. Check:

• Loading state (skeleton appears)
• Empty state (no data)
• Error state (if API fails)

5. Switch between projects and confirm data updates

Screenshots

[faithque]

Hi @davidngash98

I have accessed the system locally and have seen the usage of the system is optimal with no breakdown of the system.
The route to the custom peer progress webpage is working well as I am being redirected accordingly but my issue is that upon trying to access the information for any unit, it does not display the heatmap. I have attached an image for you to check on and correct.

[davidngash98]

Hi @davidngash98

I have accessed the system locally and have seen the usage of the system is optimal with no breakdown of the system. The route to the custom peer progress webpage is working well as I am being redirected accordingly but my issue is that upon trying to access the information for any unit, it does not display the heatmap. I have attached an image for you to check on and correct.

Hi Faith thank you for the review. The "Could not load engagement data" error you see is purely because API PR #88 hasn't been merged into development yet, so on your machine the endpoint doesn't exist. However, you can do this to checkout the feature In your doubtfire-api checkout:

git remote add davidngash98 https://github.com/davidngash98/doubtfire-api.git  
git fetch davidngash98
git checkout -b Feature/Peers-Progress davidngash98/Feature/Peers-Progress
then restart the API server
@BrianDangDev should hopefully approve PR #88 soon

[AjayPAnand]

✅ Tested and working as expected

Pulled this PR locally and verified the implementation end-to-end. The Peer Progress page loads correctly within the project/unit context, and navigation via both the direct route and task dropdown works as intended.

The Engagement Heatmap widget renders properly with:

Accurate task/activity data
Correct 7-day layout and month labels
Functional tooltips and legend
Proper display of summary metrics (tasks completed, active days, streak)

Also confirmed:

Loading (skeleton), empty, and error states behave correctly
Data updates when switching between projects
No layout shifts or performance issues observed

Screenshot:1

Screenshot:2

[224599437]

Tested this PR locally with full end-to-end validation. The Peer Progress page renders correctly in the project/unit context, and navigation works as expected through both the direct route and the task dropdown.

The Engagement Heatmap widget displays correctly, including:
Accurate task and activity data, a proper 7-day layout with correct month labels, working tooltips and legend, and the correct summary metrics (tasks completed, active days, and streak).

Additional checks confirmed:
Loading (skeleton), empty, and error states all handle correctly. Data refreshes properly when switching between projects, with no layout shifts or performance regressions observed.

[SteveDala]

@davidngash98

Hi Faith thank you for the review. The "Could not load engagement data" error you see is purely because API PR #88 hasn't been merged into development yet, so on your machine the endpoint doesn't exist. However, you can do this to checkout the feature In your doubtfire-api checkout:

Please indicate in this PR's description that this frontend change depends on thoth-tech/doubtfire-api#88

[SteveDala]

Looks good to me aside from the comment I placed, but I am admittedly not the most knowledgable about Angular.

[davidngash98]

@davidngash98

Hi Faith thank you for the review. The "Could not load engagement data" error you see is purely because API PR #88 hasn't been merged into development yet, so on your machine the endpoint doesn't exist. However, you can do this to checkout the feature In your doubtfire-api checkout:

Please indicate in this PR's description that this frontend change depends on thoth-tech/doubtfire-api#88

Included in the PR's description. Thank you

[mudith-perera]

I reviewed the work. Good job David!. Approved these changes.