Skip to content

feat: add colored Lines Changed stat tile to PR Analytics widget (#2450) - #3496

Open
aaniya22 wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
aaniya22:feat/pr-lines-changed-2450
Open

feat: add colored Lines Changed stat tile to PR Analytics widget (#2450)#3496
aaniya22 wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
aaniya22:feat/pr-lines-changed-2450

Conversation

@aaniya22

Copy link
Copy Markdown
Contributor

Summary

Adds a "Lines Changed" stat tile to the PR Analytics widget showing total additions/deletions across PRs in the selected time range, styled with green/red coloring to match GitHub's diff style.

Closes #2450


Type of Change

  • ✨ New feature (non-breaking change that adds functionality)

What Changed

  • Backend (src/app/api/metrics/prs/route.ts) already fetched and returned totalAdditions/totalDeletions via GitHub GraphQL — fixed a latent typeof value typo bug found while reviewing this path
  • Widened PRStat.value type in src/components/PRMetrics.tsx to accept ReactNode so tiles can render styled content, not just strings/numbers
  • Replaced the plain-text Lines Changed value with colored spans: green +{additions} and red -{deletions}, matching GitHub's diff coloring

How to Test

  1. Open the dashboard and view the PR Analytics widget
  2. Confirm the "Lines Changed" tile shows +X in green and -Y in red
  3. Switch between 7d / 30d / 90d ranges and confirm numbers update
  4. Switch between PRs Authored / Reviews Given tabs to confirm no crashes

Expected result: Lines Changed tile renders with correct green/red coloring and accurate numbers across all ranges.


Checklist

  • Linked the related issue above
  • Self-reviewed my own diff
  • No unnecessary console.log, debug code, or commented-out blocks
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Added or updated tests where applicable
  • Updated documentation / comments if behavior changed

Accessibility (UI changes only)

  • Keyboard navigation works correctly
  • Color contrast meets WCAG AA standard
  • ARIA labels / roles added where needed
  • Tested on mobile / responsive layout

Additional Context

Backend GraphQL fetching for additions/deletions was already implemented; this PR focuses on the frontend tile rendering and a small bugfix in the review-time calculation.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) and removed gssoc26 GSSoC 2026 contribution labels Aug 13, 2026
@github-actions

Copy link
Copy Markdown

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

@aaniya22

Copy link
Copy Markdown
Contributor Author

The 2 failing tests (in ProfileQrModal.test.tsx and ShortcutsModal.test.tsx) are pre-existing failures on main, unrelated to this PR. I verified by running the same test files directly against main before my changes — they fail there too with identical errors. Nothing in this PR touches those files. Flagging here in case it's worth tracking as a separate issue.

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

Labels

type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Show total lines of code changed (additions + deletions) in PR Analytics widget

1 participant