Skip to content

πŸš€ Feature: Contribution heatmap β€” GitHub-style calendar grid for tracked usersΒ #710

@ananyadarna

Description

@ananyadarna

πŸ”– Feature description

The dashboard currently shows aggregate stats (total commits, PRs, stars) but lacks the 52-week contribution calendar β€” the most recognisable visualisation on GitHub.

When users track another developer, they cannot see when that person is active, only raw totals. This makes it hard to spot patterns like weekend-only contributors, bursts before releases, or multi-month inactive periods.

Proposed solution

Add a ContributionHeatmap React component that renders a 52-column Γ— 7-row grid of day cells, coloured by contribution count, matching the visual language users already know from github.com.

🎀 Screenshot

No response

πŸ”„οΈ Additional Information

The GitHub REST API caps contribution history at 90 days via the events endpoint, so this feature specifically requires the GraphQL API. This is the same endpoint GitHub itself uses to render the contribution calendar on profile pages.

If the team prefers to use a library instead of building from scratch, react-activity-calendar (MIT licensed, ~15kb) is a well-maintained option that accepts a data prop matching the shape returned by the GraphQL query above.

The heatmap should be placed on the user profile/dashboard page below the existing stat cards, as it provides temporal context that complements the aggregate numbers already shown.

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions