feat: integrate CalendarHeatmap component for visualizing LeetCode submission data

Author: yashksaini-coder

app/dashboard/page.tsx

@@ -6,7 +6,12 @@ import Link from "next/link";
 import { useLeetcodeStore } from "@/store/LeetcodeStore/useLeetcodeStore";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Line, Bar, Doughnut } from "react-chartjs-2";
+import { Doughnut } from "react-chartjs-2";
+
+import CalendarHeatmap from "react-calendar-heatmap";
+import "../styles/style.css";
+import 'react-calendar-heatmap/dist/styles.css';
+
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -82,6 +87,17 @@ export default function Dashboard() {
     }],
   };
 
+
+  const processLeetCodeData = (submissionCalendar: string) => {
+    const parsedData = JSON.parse(submissionCalendar);
+    
+    return Object.entries(parsedData).map(([timestamp]) => ({
+      date: new Date(Number(timestamp) * 1000).toISOString().split("T")[0]
+    }));
+  };
+
+  console.log(processLeetCodeData(userDetails.submissionCalendar));
+
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
       {/* Profile Header Card */}
@@ -147,16 +163,21 @@ export default function Dashboard() {
               </span>
             </div>
           </CardHeader>
-          <CardContent className="p-6">
-            <LeetCodeCalendar 
-              username="yashksaini"
-              blockSize={11}
-              blockMargin={3}
-              fontSize={11}
-              theme={exampleTheme}
-              style={{ maxWidth: '100%' }}
+            <CardContent className="p-6">
+            <CalendarHeatmap
+              values={processLeetCodeData(userDetails.submissionCalendar)}
+              startDate={new Date(new Date().setFullYear(new Date().getFullYear() - 1))}
+              endDate={new Date()}
+              classForValue={(value) => {
+                if (!value) {
+                  return 'color-empty';
+                }
+                return `color-scale-${(value.count),4}`;
+              }}
+              showWeekdayLabels
+              onMouseOver={(e, value) => console.log(e, value)}
             />
-          </CardContent>
+            </CardContent>
         </Card>
 
         {/* Recent Submissions Card */}

app/styles/style.css

@@ -0,0 +1,4 @@
+.react-calendar-heatmap .color-scale-1 { fill: #d6e685; }
+.react-calendar-heatmap .color-scale-2 { fill: #8cc665; }
+.react-calendar-heatmap .color-scale-3 { fill: #44a340; }
+.react-calendar-heatmap .color-scale-4 { fill: #1e6823; }

package-lock.json

@@ -10,6 +10,7 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@babel/runtime": "^7.22.5",
     "@hookform/resolvers": "^3.10.0",
     "@prisma/client": "^6.2.1",
     "@radix-ui/react-accordion": "^1.2.2",
@@ -27,6 +28,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@supabase/ssr": "^0.5.2",
     "@types/bcryptjs": "^2.4.6",
+    "@types/react-calendar-heatmap": "^1.9.0",
     "@types/react-chartjs-2": "^2.0.2",
     "axios": "^1.7.9",
     "bcryptjs": "^2.4.3",
@@ -44,6 +46,7 @@
     "motion": "^11.18.2",
     "next": "15.1.2",
     "react": "^18.3.1",
+    "react-calendar-heatmap": "^1.9.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",