Feat/repo contribution distribution chart

[prashant2007-wq]

Summary

Added a Repository Contribution Distribution Chart below the Contribution Heatmap section on the dashboard.

This chart helps users understand which repositories they contribute to the most by showing repository-wise commit distribution, percentage contribution, and hover tooltip details.

The chart uses real GitHub contribution data from the existing backend endpoint:

/api/metrics/repos?days=365

So it displays repository data for the logged-in GitHub user instead of using sample/static data.

Closes #308

Type of Change

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

Changes Made

• Added a new RepoContributionDistribution component.
• Placed the chart below the Contribution Heatmap section on the dashboard.
• Used the existing /api/metrics/repos?days=365 endpoint to fetch real repository metrics.
• Added repository-wise commit count display.
• Added percentage contribution calculation per repository.
• Added Pie chart view for contribution share.
• Added Bar chart view for repository comparison.
• Added toggle support between Pie and Bar chart modes.
• Added hover tooltips showing:
  • Repository name
  • Commit count
  • Percentage contribution
• Added loading state while data is being fetched.
• Added empty state when no repository contribution data is available.
• Added error state if repository metrics fail to load.
• Updated chart styling to support both light and dark mode.
• Replaced hardcoded theme-breaking UI colors with CSS variables where applicable.
• Used var(--accent) for the first chart color.
• Added a comment explaining that the remaining chart colors are intentional categorical hues for distinguishing repositories.
• Replaced hardcoded error text color with text-[var(--destructive)].
• Removed the accidentally committed .env.localø file.
• Added .env.local* to .gitignore so local environment files are not tracked.
• Ensured RepoContributionDistribution.tsx ends with a newline.

How to Test

Steps for the reviewer to verify this works:

1. Pull this branch locally.

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. Verify that the chart displays real repository contribution data from the logged-in user.

10. Test both chart modes:

    • Pie chart
    • Bar chart

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

    • Repository name
    • Commit count
    • Percentage contribution

12. Verify all UI states:

    • Loading state
    • Empty state
    • Error state
    • Success state

13. Switch between light and dark mode and verify that the chart container, text, controls, and error state remain readable.

Screenshots (if UI change)

Add screenshots here:

• Dashboard with Repository Contribution Distribution Chart
• Pie chart view
• Bar chart view
• Tooltip hover state
• Light mode view
• Dark mode view

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Removed accidentally committed env file
• Added .env.local* to .gitignore
• Replaced hardcoded theme-breaking UI colors with CSS variables where applicable
• Documented intentional chart-specific categorical colors
• Ensured RepoContributionDistribution.tsx ends with a newline
• Added/updated tests if applicable

[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.

[Priyanshu-byte-coder]

Hardcoded hex colors break theming — 7 of 8 entries in the COLORS array are raw hex values that won't adapt to dark/light mode or custom themes:

// Change these to CSS vars or project tokens
"#22c55e" → consider var(--success) if defined, or keep as chart-specific color
"#f97316", "#06b6d4", etc.

For rotating chart colors with no CSS var equivalent, document the decision with a comment. But text-red-300 in the error state must become text-[var(--destructive)].

Missing EOF newline in RepoContributionDistribution.tsx.

Link the issue — PR checklist is entirely blank. Add the issue number this closes.

[Priyanshu-byte-coder]

Issues found in this PR:

• Raw Tailwind color classes — replace text-red-* / bg-red-* with text-[var(--destructive)] / appropriate CSS var equivalents. All colors must use CSS variables for theme support.

[prashant2007-wq]

Fixed the remaining raw Tailwind color issue.

• Replaced the error-state raw red color utilities with theme CSS variables.
• The error state now uses:
  • border-[var(--destructive)]
  • bg-[var(--card)]
  • text-[var(--destructive)]
• Confirmed there are no remaining text-red-*, bg-red-*, or border-red-* classes in RepoContributionDistribution.tsx.

I also ran:

npm run lint
npm run type-check

[Priyanshu-byte-coder]

The COLORS array in RepoContributionDistribution.tsx uses hardcoded hex values for recharts slices. Since recharts doesn't resolve CSS vars in SVG attributes, define chart color variables in globals.css (e.g., --chart-2 through --chart-7) and compute them at runtime:

const style = getComputedStyle(document.documentElement);
const COLORS = [
  style.getPropertyValue('--accent').trim(),
  style.getPropertyValue('--chart-2').trim(),
  // ...
];

Then define the values in globals.css light/dark blocks. This keeps all colors theme-aware.

[Priyanshu-byte-coder]

Merge conflict with current main. Please rebase against main to resolve before this can be merged.

[Priyanshu-byte-coder]

This PR has merge conflicts with main. Please rebase on the latest main branch and re-request review. The approach is approved — just needs conflict resolution.

[Priyanshu-byte-coder]

This PR has conflicts with the current main branch. Please rebase on main to resolve conflicts so it can be reviewed and merged. Run: git fetch upstream main && git rebase upstream/main

[Priyanshu-byte-coder]

This PR has merge conflicts with main. Please rebase onto the latest main branch and resolve conflicts to proceed with merging.

[Priyanshu-byte-coder]

This PR has merge conflicts with main. Please rebase your branch against the latest main and force-push to resolve. Run: git fetch upstream && git rebase upstream/main

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!