Skip to content

chore(heatmap): evaluate and integrate react-calendar-heatmap to replace custom PointsHeatmap

mondyagu abhilash requested to merge heatmap into develop

Description:

This MR evaluates replacing the existing custom heatmap implementation (PointsHeatmap.tsx) built using Recharts with the dedicated library react-calendar-heatmap.

A spike was performed to map the current data structure to the library’s required format. The library successfully supports core features such as date-based activity visualization, color scaling, and tooltips. Based on the evaluation, the custom component has been replaced/reviewed (adjust depending on your final work).

This change reduces maintenance overhead and improves UI consistency while leveraging a purpose-built solution. Type of Change:

  • Bug Fix
  • Feature Development
  • Documentation

Testing:

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers

Screenshots (if applicable):

Add screenshots for UI changes.

Screenshot_from_2026-04-21_12-44-10 Screenshot_from_2026-04-19_16-15-08Screenshot_from_2026-04-21_12-51-10

Video Demo

Add a link to the demo of the PR

If you have used AI create this PR, please also record video of yourself explaining the changes.

Link to code walkthrough

Checklist:

  • Code follows project style guidelines
  • Self-review completed
  • No console errors
  • TypeScript types are correct
Edited by mondyagu abhilash

Merge request reports

Loading