Fix sizing of the heatmap and make goal configurable

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 => {
@@ -74,7 +78,7 @@ function GitHubCalendarHeatmap({
     });
 
     return (
-        <svg width={totalWidth} height={totalHeight}>
+        <svg width="100%" height="100%" viewBox={`0 0 ${totalWidth} ${totalHeight}`} className={className}>
             {dateValues.map(({
                                  date,
                                  count

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>
+        <Title>Semester Overview</Title>
-        <HeatMap startDate={initialDate} endDate={endDate} data={calendarData}/>
+        <div className="m-2">
+            <HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal}/>
+        </div>
     </Card>
 }