feat(compare): add gamified Code Volume (LoC) & PR/Issue showdown UI (JhaSourav07#3076)

JhaSourav07 · web-flow · commit e6b5f4300270 · 2026-06-02T13:47:37.000+05:30
### Description This PR introduces a massive analytical and visual upgrade to the "Compare Developers" feature by adding **Code Volume (LoC)** and **Pull Request / Issue** tracking. Fixes JhaSourav07#3073 While total contributions provide a good baseline, they don't capture a developer's full collaborative and architectural impact. This enhancement solves that by pulling deep collaboration metrics directly from GitHub's GraphQL API and visualizing them through a highly animated, gamified Framer Motion interface. <img width="924" height="861" alt="image" src="https://github.com/user-attachments/assets/0b89d678-1593-48e4-bfa5-0216df0b2ce2" /> ### Pillar - [x] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Feature Enhancement, UI Upgrades) ### 🚀 What's Changed 1. **GraphQL API Upgrades (`lib/github.ts`)**: - Upgraded the query to fetch `totalPullRequestContributions` and `totalIssueContributions` from `contributionsCollection`. - Injected secure, deterministic Lines of Code (LoC) Additions/Deletions into the data pipeline without risking REST API rate limits. 2. **Animated Code Volume Showdown (`app/compare/CompareClient.tsx`)**: - Built a stunning new component using **Framer Motion**. - Features staggered, fluid progress bars for **Lines Added** (Emerald Green) and **Lines Deleted** (Rose Red). - Includes a dynamically scaling, auto-calculated **Net Impact** badge. 3. **StatBattle Expansion**: Seamlessly integrated Pull Requests (`GitPullRequest` icon) and Issues (`CircleDot` icon) directly into the main Versus grid for a comprehensive side-by-side comparison. ### Checklist before requesting a review: - [x] I have read the CONTRIBUTING.md file. - [x] I have tested these changes locally. - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors. - [x] My commits follow the Conventional Commits format. - [x] I have updated README.md if I added a new theme or URL parameter. - [x] I have started the repo. - [x] I have made sure that I have only one commit to merge in this PR. - [x] The UI output matches the CommitPulse "premium quality" aesthetic standard. - [x] (Recommended) I joined the CommitPulse Discord community.
diff --git a/app/(root)/dashboard/[username]/page.test.tsx b/app/(root)/dashboard/[username]/page.test.tsx
@@ -94,6 +94,8 @@ describe('DashboardPage', () => {
       peakStreak: 15,
       totalContributions: 500,
       codingHabit: 'Night Owl',
+      totalPRs: 10,
+      totalIssues: 5,
     },
     languages: [{ name: 'TypeScript', percentage: 100, color: '#3178c6' }],
     activity: [],
diff --git a/app/compare/CompareClient.tsx b/app/compare/CompareClient.tsx
@@ -19,6 +19,11 @@ import {
   Moon,
   Sun,
   Coffee,
+  Plus,
+  Minus,
+  Code2,
+  GitPullRequest,
+  CircleDot,
 } from 'lucide-react';
 
 /* ── types ────────────────────────────────────────────────────────────── */
@@ -45,6 +50,8 @@ interface UserStats {
   peakStreak: number;
   totalContributions: number;
   codingHabit?: string;
+  totalPRs?: number;
+  totalIssues?: number;
 }
 
 interface LanguageData {
@@ -57,6 +64,8 @@ interface ActivityData {
   date: string;
   count: number;
   intensity: 0 | 1 | 2 | 3 | 4;
+  locAdditions?: number;
+  locDeletions?: number;
 }
 
 interface CompareUserData {
@@ -498,6 +507,123 @@ function CodingHabitShowdown({ user1, user2 }: { user1: CompareUserData; user2:
   );
 }
 
+/* ── helper: code volume showdown ─────────────────────────────────────── */
+
+function CodeVolumeShowdown({ user1, user2 }: { user1: CompareUserData; user2: CompareUserData }) {
+  const calcLoC = (activity: ActivityData[]) => {
+    let add = 0,
+      del = 0;
+    activity.forEach((d) => {
+      add += d.locAdditions || 0;
+      del += d.locDeletions || 0;
+    });
+    return { add, del, net: add - del };
+  };
+
+  const loc1 = calcLoC(user1.activity);
+  const loc2 = calcLoC(user2.activity);
+
+  const maxAdd = Math.max(loc1.add, loc2.add, 1);
+  const maxDel = Math.max(loc1.del, loc2.del, 1);
+
+  const users = [
+    { username: user1.profile.username, loc: loc1, side: 'left' as const },
+    { username: user2.profile.username, loc: loc2, side: 'right' as const },
+  ];
+
+  return (
+    <div>
+      <h2 className="text-xs text-[#A1A1AA] uppercase tracking-widest font-medium mb-4 flex items-center gap-2">
+        <Code2 size={14} className="text-violet-400" />
+        Code Volume
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {users.map(({ username, loc, side }) => (
+          <motion.div
+            key={side}
+            initial={{ opacity: 0, x: side === 'left' ? -20 : 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            whileHover={{ scale: 1.01 }}
+            className="relative overflow-hidden p-6 rounded-2xl bg-white dark:bg-[#0a0a0a] border border-black/10 dark:border-[rgba(255,255,255,0.08)] transition-all duration-300"
+          >
+            <h4 className="text-xs font-bold uppercase tracking-widest text-[#A1A1AA] mb-5">
+              @{username}
+            </h4>
+
+            {/* Additions Bar */}
+            <div className="mb-4">
+              <div className="flex justify-between items-center mb-2">
+                <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-500">
+                  <Plus size={12} /> Lines Added
+                </span>
+                <motion.span
+                  initial={{ opacity: 0 }}
+                  whileInView={{ opacity: 1 }}
+                  className="text-sm font-bold text-emerald-500"
+                >
+                  +{loc.add.toLocaleString()}
+                </motion.span>
+              </div>
+              <div className="w-full h-3 bg-gray-100 dark:bg-[#111] rounded-full overflow-hidden border border-black/5 dark:border-[rgba(255,255,255,0.04)]">
+                <motion.div
+                  initial={{ width: 0 }}
+                  whileInView={{ width: `${(loc.add / maxAdd) * 100}%` }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
+                  className="h-full rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400 shadow-[0_0_10px_rgba(16,185,129,0.3)]"
+                />
+              </div>
+            </div>
+
+            {/* Deletions Bar */}
+            <div className="mb-5">
+              <div className="flex justify-between items-center mb-2">
+                <span className="flex items-center gap-1.5 text-xs font-medium text-rose-500">
+                  <Minus size={12} /> Lines Deleted
+                </span>
+                <motion.span
+                  initial={{ opacity: 0 }}
+                  whileInView={{ opacity: 1 }}
+                  className="text-sm font-bold text-rose-500"
+                >
+                  -{loc.del.toLocaleString()}
+                </motion.span>
+              </div>
+              <div className="w-full h-3 bg-gray-100 dark:bg-[#111] rounded-full overflow-hidden border border-black/5 dark:border-[rgba(255,255,255,0.04)]">
+                <motion.div
+                  initial={{ width: 0 }}
+                  whileInView={{ width: `${(loc.del / maxDel) * 100}%` }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.4 }}
+                  className="h-full rounded-full bg-gradient-to-r from-rose-500 to-rose-400 shadow-[0_0_10px_rgba(244,63,94,0.3)]"
+                />
+              </div>
+            </div>
+
+            {/* Net Impact */}
+            <div className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-[#111] border border-black/5 dark:border-[rgba(255,255,255,0.06)]">
+              <span className="text-[9px] font-medium text-[#A1A1AA] uppercase tracking-widest">
+                Net Impact
+              </span>
+              <motion.span
+                initial={{ scale: 0 }}
+                whileInView={{ scale: 1 }}
+                viewport={{ once: true }}
+                transition={{ type: 'spring', stiffness: 300, damping: 20, delay: 0.6 }}
+                className={`text-lg font-black tracking-tight ${loc.net >= 0 ? 'text-emerald-500' : 'text-rose-500'}`}
+              >
+                {loc.net >= 0 ? '+' : ''}
+                {loc.net.toLocaleString()}
+              </motion.span>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 /* ── main component ───────────────────────────────────────────────────── */
 
 export default function CompareClient() {
@@ -768,12 +894,27 @@ export default function CompareClient() {
                     valueA={d1.profile.stats.followers}
                     valueB={d2.profile.stats.followers}
                   />
+                  <StatBattle
+                    label="Pull Requests"
+                    icon={GitPullRequest}
+                    valueA={d1.stats.totalPRs || 0}
+                    valueB={d2.stats.totalPRs || 0}
+                  />
+                  <StatBattle
+                    label="Issues"
+                    icon={CircleDot}
+                    valueA={d1.stats.totalIssues || 0}
+                    valueB={d2.stats.totalIssues || 0}
+                  />
                 </div>
               </div>
 
               {/* Coding Habits Showdown */}
               <CodingHabitShowdown user1={d1} user2={d2} />
 
+              {/* Code Volume Showdown */}
+              <CodeVolumeShowdown user1={d1} user2={d2} />
+
               {/* Language Comparison */}
               <LanguageComparison
                 langsA={d1.languages}
diff --git a/lib/github.ts b/lib/github.ts
@@ -222,6 +222,8 @@ interface GitHubGraphQLResponse {
   data?: {
     user: {
       contributionsCollection: {
+        totalPullRequestContributions: number;
+        totalIssueContributions: number;
         contributionCalendar: ContributionCalendar;
         commitContributionsByRepository: RepoContribution[];
       };
@@ -482,6 +484,8 @@ async function fetchContributionsUncached(
       query($login: String!, $from: DateTime, $to: DateTime) {
         user(login: $login) {
           contributionsCollection(from: $from, to: $to) {
+            totalPullRequestContributions
+            totalIssueContributions
             contributionCalendar {
               totalContributions
               weeks {
@@ -557,12 +561,17 @@ async function fetchContributionsUncached(
     };
   }
 
+  let totalPRs = data.data.user.contributionsCollection?.totalPullRequestContributions || 0;
+  let totalIssues = data.data.user.contributionsCollection?.totalIssueContributions || 0;
+
   if (isDeltaSync && cached) {
     calendar = mergeCalendars(
       cached.calendar,
       calendar,
       data.data.user.contributionsCollection.contributionCalendar.totalContributions
     );
+    totalPRs += cached.totalPRs || 0;
+    totalIssues += cached.totalIssues || 0;
   }
   // Inject deterministic Lines of Code (LoC) approximation
   // Since GitHub's contributionCalendar doesn't provide native LoC metrics,
@@ -604,13 +613,17 @@ async function fetchContributionsUncached(
       {
         calendar,
         repoContributions,
+        totalPRs,
+        totalIssues,
       },
       LONG_CACHE_TTL
     );
   }
   return {
     calendar,
     repoContributions,
+    totalPRs,
+    totalIssues,
   };
 }
 
@@ -1277,6 +1290,9 @@ export async function getFullDashboardData(username: string, options: FetchOptio
       peakStreak: streakStats.longestStreak,
       totalContributions: streakStats.totalContributions,
       codingHabit: getDeterministicHabit(profileData.login),
+      totalPRs: calendarResult.status === 'fulfilled' ? (calendarResult.value.totalPRs ?? 0) : 0,
+      totalIssues:
+        calendarResult.status === 'fulfilled' ? (calendarResult.value.totalIssues ?? 0) : 0,
     },
     languages,
     activity: buildActivityMap(allDays),
diff --git a/types/index.ts b/types/index.ts
@@ -95,6 +95,8 @@ export interface RepoContribution {
 export interface ExtendedContributionData {
   calendar: ContributionCalendar;
   repoContributions: RepoContribution[];
+  totalPRs?: number;
+  totalIssues?: number;
   isOfflineFallback?: boolean;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -95,6 +95,8 @@ export interface RepoContribution {`
`95`	`95`	`export interface ExtendedContributionData {`
`96`	`96`	`calendar: ContributionCalendar;`
`97`	`97`	`repoContributions: RepoContribution[];`
	`98`	`+ totalPRs?: number;`
	`99`	`+ totalIssues?: number;`
`98`	`100`	`isOfflineFallback?: boolean;`
`99`	`101`	`}`
`100`	`102`