[Progress Logger] PR 3 — Heatmap Grid Component (Standalone)

[Venkat-Kolasani]

✅ No dependencies. Can be started immediately.

---

Parent Issue: #87

Depends On: Nothing — this can be built in parallel with PR 1 and PR 2

Overview

Build a reusable HeatmapGrid.jsx component that renders a GitHub-style activity calendar. This component is purely presentational — it takes data as props and renders it. No API calls inside this component. This makes it easy to build and test independently before the backend is ready.

Props Interface

// data shape the component receives
[
  { date: "2026-01-01", count: 0 },
  { date: "2026-01-02", count: 2 },
  // ... 365 entries total
]

// Usage
<HeatmapGrid data={heatmapData} />

Visual Behavior

• 52 columns (weeks) × 7 rows (days) grid
• Each cell is a small square with 2px gap between cells
• Color by count:
  • 0 → #ebedf0 (empty grey)
  • 1 → #9be9a8 (light green)
  • 2-3 → #40c463 (medium green)
  • 4+ → #216e39 (dark green)
• Month labels across the top (Jan, Feb, Mar...)
• Day labels on the left (Mon, Wed, Fri)
• Tooltip on hover showing: date + count + "contributions"

To Test Without Backend

Generate mock data directly in the component file:

// MockData.js — use this to develop and test
const generateMockData = () => {
  const data = [];
  for (let i = 364; i >= 0; i--) {
    const date = new Date();
    date.setDate(date.getDate() - i);
    data.push({
      date: date.toISOString().split('T')[0],
      count: Math.random() > 0.6 ? Math.floor(Math.random() * 5) : 0
    });
  }
  return data;
};

Files to Create

• src/components/progress/HeatmapGrid.jsx
• src/components/progress/HeatmapGrid.css

Acceptance Criteria

• Renders a full 52×7 grid correctly
• Color intensity matches the 4-level scale above
• Month labels align correctly with the grid columns
• Hover tooltip shows date and count
• Works with mock data independently — no backend dependency
• Responsive — does not overflow on screens smaller than 1024px (horizontal scroll is acceptable)
• No API calls inside the component

[Yuvraj-Sarathe]

@Venkat-Kolasani, I've taken a look at your issue regarding the heatmap grid component. Your work on this feature seems interesting and I'd be happy to assist with it. @Venkat-Kolasani, would you be open to having me assigned to this issue to help move it forward?