Skip to content

feat(heatmap): add shared 365-day contribution calendar#2839

Open
Honey-pg wants to merge 3 commits into
Priyanshu-byte-coder:mainfrom
Honey-pg:feat/contribution-heatmap-calendar
Open

feat(heatmap): add shared 365-day contribution calendar#2839
Honey-pg wants to merge 3 commits into
Priyanshu-byte-coder:mainfrom
Honey-pg:feat/contribution-heatmap-calendar

Conversation

@Honey-pg

Copy link
Copy Markdown
Contributor

Extract ContributionHeatmapCalendar for dashboard and public profiles, paginate public contribution fetch for a full year, and align cell colors to absolute commit thresholds.

Summary

Adds a shared GitHub-style 365-day contribution heatmap calendar used on both the authenticated dashboard and public profiles. The dashboard widget is refactored to use the shared component, public profiles now show the full-year grid (with paginated data fetch), and cell colors use absolute commit thresholds with theme support.

Closes #2809


Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that changes existing behavior)
  • 📝 Documentation update
  • ♻️ Refactor / code cleanup (no functional change)
  • ⚡ Performance improvement
  • 🔒 Security fix
  • 🧪 Tests only

What Changed

  • src/lib/contribution-heatmap.ts — Shared helpers: buildHeatmap, buildMonthMarkers, date/tooltip formatters, and legend constants.
  • src/components/ContributionHeatmapCalendar.tsx — Reusable 7×53 grid with month labels, hover/focus tooltips, horizontal scroll, legend, and getHeatmapCellStyle() absolute color levels.
  • src/components/ContributionHeatmap.tsx — Refactored into a thin wrapper (fetch, range controls, theme toggle, drill-down) that renders the shared calendar.
  • src/lib/public-profile-data.tsfetchPublicContributions now defaults to 365 days and paginates GitHub Search (up to 1000 commits).
  • src/components/public/PublicContributionHeatmap.tsx — New public profile heatmap using useHeatmapTheme() and server-provided data.
  • src/app/u/[username]/page.tsx — Replaced inline PublicContributionGraph with PublicContributionHeatmap.
  • test/contribution-heatmap-calendar.test.ts — Unit tests for heatmap grid helpers.
  • test/public-profile-data.test.ts — Tests for 365-day default and pagination.
  • README.md — Moved contribution heatmap calendar ([FEAT] Add contribution heatmap calendar view #18) from Planned to Completed.

How to Test

  1. Check out feat/contribution-heatmap-calendar and run npm install if needed.
  2. Start the app with npm run dev, sign in, and open the dashboard Contribution Heatmap widget.
  3. Confirm the 365-day grid renders, tooltips show date + contribution count on hover, and Default / Colour-blind theme toggle updates colors instantly.
  4. Visit a public profile at /u/{username} and confirm the full-year heatmap renders with horizontal scroll on a narrow viewport.

Expected result: Dashboard and public profile both show the same GitHub-style calendar grid with theme-aware absolute color levels and accurate year-long data.

Automated checks:

npm run lint
npm test -- test/contribution-heatmap-calendar.test.ts test/useHeatmapTheme.test.ts test/public-profile-data.test.ts

…te-coder#18)

Extract ContributionHeatmapCalendar for dashboard and public profiles, paginate public contribution fetch for a full year, and align cell colors to absolute commit thresholds.
@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:docs GSSoC type bonus: documentation (+5 pts) type:feature GSSoC type bonus: new feature type:testing GSSoC type bonus: tests (+10 pts) labels Jun 27, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@github-actions github-actions Bot added type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) labels Jun 27, 2026
@Priyanshu-byte-coder

Copy link
Copy Markdown
Owner

New UI/feature PRs are on hold during the code quality sprint — see discussion #2651. PRs for tests, refactoring, bug fixes, docs, and performance are welcome.

@Priyanshu-byte-coder

Copy link
Copy Markdown
Owner

New feature/UI PRs are on hold during the code-quality sprint — see discussion #2651. We'll revisit after the sprint; tests, refactors, and bug-fix PRs are the priority right now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:docs GSSoC type bonus: documentation (+5 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts) type:testing GSSoC type bonus: tests (+10 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Implement a Custom Contribution Heatmap Calendar Component

2 participants