Skip to content

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

Open
Honey-pg wants to merge 1 commit 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 1 commit 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
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

1 participant