[FEAT] Export metrics to CSV/PDF

[Priyanshu-byte-coder]

What Needs to Be Done

Add an export button to the dashboard that downloads metrics (contributions, PRs, goals) as a CSV or PDF file.

Why This Matters

Developers may want to share their metrics in standups, include in portfolios, or import into spreadsheets for further analysis.

Files to Create/Modify

• src/components/ExportButton.tsx — new client component with dropdown (CSV / PDF)
• src/app/dashboard/page.tsx — add ExportButton to header
• CSV generation: can be done client-side from the already-fetched data
• PDF: use a library like `jspdf` or `@react-pdf/renderer`

Acceptance Criteria

• Export button visible on dashboard
• CSV export works for contributions (date, count) and PR stats
• File downloads with a readable filename like `devtrack-metrics-2025-05-10.csv`
• No TypeScript errors, lint passes

Tech Context

For CSV (simpler, start here):

const csv = "Date,Commits\n" + data.map(d => \`\${d.day},\${d.commits}\`).join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
// trigger download via <a> element

PDF can be a follow-up PR.

[PaperCodeGithub]

Hi there! 👋 I'm participating in GSSoC '26 and would love to work on this. Could you please assign this issue to me?

[PaperCodeGithub]

Hi @Priyanshu-byte-coder , while solving this issue I noticed a slight architecture conflict. PRMetrics.tsx, GoalTracker.tsx and ContributionGraph.tsx these components fetch its own data then you map them in dashboard\page.tsx but in this Issue you explicitly wanted me to use already fetched data in csv generation ( point number 3 in Files to Create/Modify). As dashboard/page.tsx does'nt have the fetch data, so there are three options I can proceed with:

1. I'll refetch data in dashboad/page.tsx then pass it to export function
2. I need to modify PRMetrics.tsx, GoalTracker.tsx and ContributionGraph.tsx and use global state manager (like Zustand or React Context) to use already fetched data.
3. Move the fetch() call out of PRMetrics.tsx, GoalTracker.tsx and ContributionGraph.tsx up into page.tsx then pass to export function

As you said to modify only 2 files (src/components/ExportButton.tsx , src/app/dashboard/page.tsx), thats why I'm asking...

[Priyanshu-byte-coder]

Hey! Great catch on the architecture conflict.

Go with option 3 — lift the fetch calls up into page.tsx and pass data down as props. It's the cleanest approach here and stays within the 2 files mentioned in the issue. No need to pull in Zustand or Context for something this scoped, and refetching the same data twice would just be wasteful.

So the flow would be: page.tsx fetches everything → passes data to the existing components as props AND to ExportButton → each component just renders what it receives.

You'll need to update the prop signatures of PRMetrics, GoalTracker, and ContributionGraph to accept data as props instead of fetching internally, but that's a straightforward refactor and actually improves the component design overall.

Feel free to ask if anything's unclear — looking forward to the PR!

[PaperCodeGithub]

Okay sure then! So I'll get to work on:

• Setting up the concurrent server fetches in page.tsx
• Refactoring the prop signatures for PRMetrics.tsx, GoalTracker.tsx, and ContributionGraph.tsx and remove fetch() functions from here
• Creating the ExportButton.tsx go generate pdf/csv file by the fetched data from page.tsx

Also while exporting I'll update contribution fetch the last 365 days of contributions. However, I noticed the /api/metrics/contributions/route.ts route is hardcoded to per_page=100 without pagination, so users with heavy activity might see their CSV cut off at 100 commits. Let me know if you'd like me to open a separate Issue and add pagination to the GitHub API fetch, that will help me to earn some extra points for GSSoC .

[Priyanshu-byte-coder]

That plan looks solid, go ahead with it!

And yes, please open a separate issue for the pagination fix — the per_page=100 hardcoding is a real gap that's worth tracking independently. It's a legitimate bug/improvement on its own and shouldn't be bundled into this PR. Keeping PRs focused makes review much easier too.

Looking forward to seeing the implementation!

[PaperCodeGithub]

I sent a pull request. As requested, I lifted the fetch calls up into the page.tsx and passed data down as props. Just for ContributionGraph.tsx, I keep that intact as the user wanted to see ContributionGraph for different timelines, but while exporting, they wanted to export the whole data as for use (Developers may want to share their metrics in standups, include in portfolios, or import into spreadsheets for further analysis.). So I fetched 365 days of data as the hard-coded cut off to per_page=100. If you want, I will create a separate issue and then resolve this as we discussed, so the user can fetch their whole contribution data while exporting.

[Priyanshu-byte-coder]

Reviewed PR #114 — the architecture is exactly right, the data lifting approach works well and the CSV logic is clean. Left a few things to fix on the PR before it can merge:

1. The NEXT_PUBLIC_APP_URL fallback needs to use NEXTAUTH_URL instead of localhost:3000 — this would cause the server-side fetches to silently fail in production (we ran into the same thing on the public profile page recently)
2. Hardcoded colors (bg-slate-800, bg-indigo-600, etc.) in GoalTracker, PRMetrics, and ExportButton — the project uses CSS variables for theming so these break light mode
3. PRMetrics needs an error state for when metrics is null after load — right now it shows the loading skeleton forever if the API fails
4. Merge conflicts with main need to be resolved

The pagination issue with per_page=100 is a legitimate bug worth tracking — go ahead and open that separate issue!

[Shravani-36]

Hi I am interested to work on this issue