From a01afb0a5e2e991e05a46ce7aed029cd652e9387 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 06:35:35 +0000
Subject: [PATCH] refactor: extract calendar logic from ContributionGraph
 component

Extracted the complex data grouping and processing logic for the contribution calendar
into a separate `processCalendarData` helper function in `ContributionGraph.tsx`.
This improves the readability and maintainability of the component's rendering block.

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 src/components/ContributionGraph.tsx | 44 ++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index 4c775de..1e25b32 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -5,13 +5,24 @@ type Props = {
 };
 
 const MONTHS = [
-  "Jan", "Feb", "Mar", "Apr", "May", "Jun",
-  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
 ];
 
-export default function ContributionGraph({ contributions }: Props) {
-  const { calendar } = contributions;
-  if (calendar.length === 0) return null;
+function processCalendarData(calendar: ContributionData["calendar"]) {
+  if (calendar.length === 0) {
+    return { weeks: [], monthLabels: [], maxCount: 1 };
+  }
 
   const cellSize = 12;
   const cellGap = 3;
@@ -40,9 +51,6 @@ export default function ContributionGraph({ contributions }: Props) {
   if (currentWeek.length > 0) weeks.push(currentWeek);
 
   const dayLabelWidth = 28;
-  const svgWidth = dayLabelWidth + weeks.length * step + cellGap;
-  const svgHeight = 7 * step + 20;
-
   const monthLabels: { label: string; x: number }[] = [];
   let lastMonth = -1;
   weeks.forEach((week, wIdx) => {
@@ -57,6 +65,23 @@ export default function ContributionGraph({ contributions }: Props) {
     }
   });
 
+  return { weeks, monthLabels, maxCount };
+}
+
+export default function ContributionGraph({ contributions }: Props) {
+  const { calendar } = contributions;
+  if (calendar.length === 0) return null;
+
+  const { weeks, monthLabels, maxCount } = processCalendarData(calendar);
+
+  const cellSize = 12;
+  const cellGap = 3;
+  const step = cellSize + cellGap;
+
+  const dayLabelWidth = 28;
+  const svgWidth = dayLabelWidth + weeks.length * step + cellGap;
+  const svgHeight = 7 * step + 20;
+
   const dayLabels = ["", "Mon", "", "Wed", "", "Fri", ""];
 
   function getIntensityColor(count: number): string {
@@ -119,7 +144,8 @@ export default function ContributionGraph({ contributions }: Props) {
               style={{ strokeWidth: 1 }}
             >
               <title>
-                {entry.date}: {entry.count} contribution{entry.count !== 1 ? "s" : ""}
+                {entry.date}: {entry.count} contribution
+                {entry.count !== 1 ? "s" : ""}
               </title>
             </rect>
           )),