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 }} >