Skip to content

feat: add new heatmap view rendering mode #863

Description

@ShailiBoddula

Is your feature request related to a problem? Please describe.

Currently CommitPulse supports only the default 3D monolith view and the monthly compact stats view.

There is no GitHub-style heatmap visualization for users who prefer a clean contribution-grid representation of their activity.

Adding a heatmap view would improve customization options and provide a more compact and familiar visualization while still integrating with CommitPulse themes and SVG rendering architecture.

Describe the solution you'd like

Add a new ?view=heatmap rendering mode to CommitPulse.

The heatmap view should render GitHub contribution activity as a clean 52-week × 7-day SVG grid similar to GitHub’s contribution graph while preserving CommitPulse’s theme system and SVG-based architecture.

Proposed implementation:

  • Create a new renderer:
    lib/svg/heatmap.ts

  • Export:
    renderHeatmap(days, params, theme)

Features:

  • Rounded SVG cells (rx="2")

  • Contribution intensity represented using opacity scaling

  • Theme-aware colors using theme.bg, theme.accent, and theme.text

  • Month labels on top

  • Weekday labels on left side

  • Optional username title respecting hide_title

  • Support for:

    • small (400×160)
    • medium (580×220)
    • large (760×290)

Integration:

  • Add view === "heatmap" handling in lib/svg/generator.ts
  • Extend BadgeParams.view type if required

The implementation should remain isolated without refactoring unrelated rendering logic.

Describe alternatives you've considered

A possible alternative would be extending the existing monthly view to support a compact contribution-grid mode.

Another option would be creating a simplified flat contribution chart instead of a full heatmap grid.

However, introducing a dedicated heatmap renderer is a cleaner and more scalable solution because it keeps rendering logic modular and aligns better with the current architecture where each visualization mode has its own renderer.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions