Skip to content

🧹 [Code Health] Refactor ContributionGraph Calendar Logic #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
is0692vs wants to merge 1 commit into from
Closed

🧹 [Code Health] Refactor ContributionGraph Calendar Logic #49

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 35 additions & 9 deletions src/components/ContributionGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand All @@ -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;
Comment on lines +77 to +81
Copy link

@gemini-code-assist gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

These constants (cellSize, cellGap, step, dayLabelWidth) are also defined inside the processCalendarData function. This duplication can make future changes more difficult and error-prone. To improve maintainability, you should define these as module-level constants (e.g., after MONTHS) and use them in both functions. This will ensure they are defined in a single place.

For example, you could add this at the top of the file:

const CELL_SIZE = 12;
const CELL_GAP = 3;
const STEP = CELL_SIZE + CELL_GAP;
const DAY_LABEL_WIDTH = 28;

Then you can remove the local definitions from both ContributionGraph and processCalendarData and use these new constants.

const svgWidth = dayLabelWidth + weeks.length * step + cellGap;
const svgHeight = 7 * step + 20;

const dayLabels = ["", "Mon", "", "Wed", "", "Fri", ""];

function getIntensityColor(count: number): string {
Expand Down Expand Up @@ -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>
)),
Expand Down
Loading