Skip to content

feat(dashboard): add commit time-of-day heatmap widget (#2118)#2128

Open
IshitaSingh0822 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
IshitaSingh0822:feat/commit-time-heatmap
Open

feat(dashboard): add commit time-of-day heatmap widget (#2118)#2128
IshitaSingh0822 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
IshitaSingh0822:feat/commit-time-heatmap

Conversation

@IshitaSingh0822
Copy link
Copy Markdown
Contributor

Summary

Implements a 7×24 commit time heatmap that visualizes when during the day/week a user codes most — similar to GitHub's contribution graph but showing time-of-day patterns instead of daily totals.

Closes #2118


Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Refactor / code cleanup

Changes Made

  • Added GET /api/metrics/commit-times route that fetches commit timestamps from the last 90 days via GitHub Search API and returns a 7×24 matrix (commitTimes[dayOfWeek][hour] = count)
  • Added src/components/CommitHeatmap.tsx — renders the 7-row × 24-column grid with green color scale, hover tooltip showing day + hour + commit count, and a "peak coding time" label
  • Registered commit-heatmap-time widget in src/lib/dashboard-layout.ts (type union, labels, default activity section)
  • Wired widget into src/components/dashboard/CustomizableDashboard.tsx (span class + switch case)
  • Added "commit-times" TTL entry to src/lib/metrics-cache.ts to fix TypeScript type error

How to Test

  1. Sign in with a GitHub account that has commits in the last 90 days
  2. Navigate to /dashboard
  3. Scroll to the Activity & Coding section
  4. Verify the Commit Time Heatmap widget renders with a 7×24 grid
  5. Hover over cells — tooltip should show Tuesday 3pm — 12 commits style text
  6. Verify the "You code most on..." peak stat appears below the grid
  7. Verify empty (0-commit) slots render as dark empty cells, not broken
  8. Hide and re-show the widget using the dashboard layout toolbar

Screenshots (if UI change)


Checklist

  • Linked issue in summary
  • pnpm run lint passes locally
  • No TypeScript errors (pnpm run type-check)
  • Self-reviewed the diff
  • Added/updated tests if applicable

Accessibility Checklist

  • All grid cells have aria-label with day, hour, and commit count
  • Keyboard navigation supported (tabIndex={0}, onFocus tooltip)
  • Loading skeleton has role="status" and aria-busy="true"
  • Responsive UI verified

Additional Notes

This widget is distinct from the existing ContributionHeatmap (issue #18) which is a date-based calendar. This is a time-pattern matrix showing when during the day/week you code, not how much on each date.

- Add GET /api/metrics/commit-times route returning 7x24 matrix
- Add CommitHeatmap.tsx component with SVG grid, tooltip, peak stat
- Register commit-heatmap-time widget in dashboard-layout.ts
- Wire widget into CustomizableDashboard.tsx
- Add commit-times TTL to metrics-cache.ts
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 7, 2026

@IshitaSingh0822 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@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 7, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 7, 2026

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

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

Labels

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)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Commit time-of-day heatmap — visualize when during the day/week you code most

1 participant