Feat/repo contribution distribution chart

[prashant2007-wq]

Repository Contribution Distribution Chart

The dashboard includes a Repository Contribution Distribution Chart that helps users understand which repositories they contribute to the most.

This feature shows repository-wise commit distribution using real GitHub contribution data fetched from the backend.

✦ What It Shows

• Repository-wise commit count
• Percentage contribution per repository
• Pie chart view for contribution share
• Bar chart view for repository comparison
• Hover tooltips with detailed metrics

✦ API Used

The chart uses the existing backend endpoint:

/api/metrics/repos?days=365

This ensures the chart displays real repository contribution data for the logged-in GitHub user instead of static or sample data.

✦ Dashboard Placement

The chart is displayed below the Contribution Heatmap section on the dashboard.

Dashboard
 ├── Contribution Heatmap
 └── Repository Contribution Distribution Chart

✦ Features

• Fetches repository-wise contribution metrics from the backend
• Supports both Pie chart and Bar chart views
• Allows users to toggle between chart modes
• Displays total commits per repository
• Calculates percentage contribution automatically
• Shows hover tooltip details:
  • Repository name
  • Commit count
  • Percentage contribution
• Includes loading state while data is being fetched
• Includes empty state when no contribution data is available
• Includes error state if repository metrics fail to load
• Fully responsive and consistent with the existing dashboard UI

✦ How to Test Locally

1. Clone the repository:

git clone <repo-url>
cd <repo-name>

2. Install dependencies:

npm install

3. Add the required environment variables in .env.local:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

4. Start the development server:

npm run dev

5. Open the dashboard:

http://localhost:3000/dashboard

6. Log in using GitHub.

7. Scroll below the Contribution Heatmap section.

8. Verify that the Repository Contribution Distribution Chart is visible.

9. Test both chart modes:

• Pie chart
• Bar chart

10. Hover over chart items and verify that the tooltip displays:

• Repository name
• Commit count
• Percentage contribution

✦ UI States

The component handles all major dashboard states:

State	Behavior
Loading	Shows loader while repository data is being fetched
Empty	Shows message when no repository contribution data is available
Error	Shows fallback error message if API request fails
Success	Displays repository contribution chart with real user data

[vercel]

@prashant2007-wq 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]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

[Priyanshu-byte-coder]

Two critical fixes needed before merge:

1. Remove committed env file (critical)

.env.localø (note the odd character in the filename) is committed to this PR. Even with dummy values, env files must not be tracked in git — they can cause confusion and bad habits. Remove it:

git rm ".env.localø"
git push

Also add .env.local* to .gitignore if not already there.

2. Hardcoded Tailwind colors break dark mode

The component uses Tailwind utility classes that assume a dark background and break in light mode:

// Current (broken in light mode):
"border-white/10 bg-white/5"   → border-[var(--border)] bg-[var(--card)]
"bg-black/10"                  → bg-[var(--control)]
"text-muted-foreground"        → text-[var(--muted-foreground)]
"bg-primary text-primary-foreground" → bg-[var(--accent)] text-[var(--accent-foreground)]

Also, the first chart color "#6366f1" in the COLORS array is the accent color — use var(--accent) there. The remaining chart colors (different hues for different repos) are acceptable as-is.

Fix these two and the PR is mergeable.