From ec91f6df4211aa1038d2f4c2ca7e1a59cc3716e8 Mon Sep 17 00:00:00 2001
From: Joshua Coles <josh@coles.to>
Date: Sun, 25 Feb 2024 19:57:46 +0000
Subject: [PATCH] Fix sizing of the heatmap and make goal configurable

---
 src/components/HeatMap.tsx                    | 14 +++++++++-----
 src/components/cards/calendarOverviewCard.tsx |  6 ++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/HeatMap.tsx b/src/components/HeatMap.tsx
index 0b1cd08..271a03c 100644
--- a/src/components/HeatMap.tsx
+++ b/src/components/HeatMap.tsx
@@ -10,12 +10,16 @@ interface Props {
     startDate: Date;
     endDate: Date;
     data: DateValue[];
+    className?: string;
+    goal: number;
 }
 
 function GitHubCalendarHeatmap({
                                    startDate,
                                    endDate,
                                    data,
+                                   className,
+                                   goal
                                }: Props) {
     const numDays = dFns.differenceInDays(endDate, startDate);
 
@@ -30,7 +34,7 @@ function GitHubCalendarHeatmap({
     const totalHeight = 8 * (squareSize + padding) + weekTotalPadding; // Added an extra row for week total
 
     // Goal times for the daily and weekly squares
-    const dayGoalTime = 8;
+    const dayGoalTime = goal;
     const weekGoalTime = 5 * dayGoalTime;
 
     const getColorForValue = (value: number, goalTime: number): string => {
@@ -53,9 +57,9 @@ function GitHubCalendarHeatmap({
     };
 
     const getWeekTotal = (weekIndex: number): number => {
-        const weekStart = dFns.addWeeks(dFns.startOfWeek(startDate, { weekStartsOn: 1 }), weekIndex);
+        const weekStart = dFns.addWeeks(dFns.startOfWeek(startDate, {weekStartsOn: 1}), weekIndex);
 
-        return data.filter(dv => dFns.isSameWeek(dv.date, weekStart, { weekStartsOn: 1 }))
+        return data.filter(dv => dFns.isSameWeek(dv.date, weekStart, {weekStartsOn: 1}))
             .reduce((total, {count}) => total + count, 0);
     };
 
@@ -74,12 +78,12 @@ function GitHubCalendarHeatmap({
     });
 
     return (
-        <svg width={totalWidth} height={totalHeight}>
+        <svg width="100%" height="100%" viewBox={`0 0 ${totalWidth} ${totalHeight}`} className={className}>
             {dateValues.map(({
                                  date,
                                  count
                              }) => {
-                const weekIndex = dFns.differenceInCalendarWeeks(date, startDate, { weekStartsOn: 1 });
+                const weekIndex = dFns.differenceInCalendarWeeks(date, startDate, {weekStartsOn: 1});
 
                 const dayOfWeek = (date.getDay() + 6) % 7;
                 const x = weekIndex * (squareSize + padding);
diff --git a/src/components/cards/calendarOverviewCard.tsx b/src/components/cards/calendarOverviewCard.tsx
index 791a67e..d974e90 100644
--- a/src/components/cards/calendarOverviewCard.tsx
+++ b/src/components/cards/calendarOverviewCard.tsx
@@ -56,7 +56,9 @@ export function CalendarOverviewCard({
 
     return <Card className="col-span-1">
         <Tooltip id="calendar-tooltip"/>
-        <Title>Overview</Title>
-        <HeatMap startDate={initialDate} endDate={endDate} data={calendarData}/>
+        <Title>Semester Overview</Title>
+        <div className="m-2">
+            <HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal}/>
+        </div>
     </Card>
 }