Add support for penalising overtime to the heatmap

src/components/HeatMap.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import * as dFns from "date-fns";
+import * as R from 'ramda';
 
 interface DateValue {
     date: Date;
@@ -12,6 +13,7 @@ interface Props {
     data: DateValue[];
     className?: string;
     goal: number;
+    penaliseOvertime?: boolean;
 }
 
 function GitHubCalendarHeatmap({
@@ -19,7 +21,8 @@ function GitHubCalendarHeatmap({
                                    endDate,
                                    data,
                                    className,
-                                   goal
+                                   goal,
+                                   penaliseOvertime = false,
                                }: Props) {
     const numDays = dFns.differenceInDays(endDate, startDate);
 
@@ -38,22 +41,47 @@ function GitHubCalendarHeatmap({
     const weekGoalTime = 5 * dayGoalTime;
 
     const getColorForValue = (value: number, goalTime: number): string => {
-        const values = [
+        const buckets = [
-            "#eeeeee",
+            {
-            "#d6e685",
+                min: -Infinity,
-            "#8cc665",
+                max: 0,
-            "#44a340",
+                color: '#eeeeee'
-            "#1e6823",
+            },
-        ]
+            {
+                min: 0,
+                max: 0.40,
+                color: '#d6e685'
+            },
+            {
+                min: 0.40,
+                max: 0.50,
+                color: '#8cc665'
+            },
+            {
+                min: 0.50,
+                max: 0.90,
+                color: '#44a340'
+            },
+            {
+                min: 0.90,
+                // If penalising overtime, the max is 1.125, otherwise it's infinity (ie this is the last bucket)
+                max: penaliseOvertime ? 1.125 : Infinity,
+                color: '#1e6823'
+            },
+            {
+                min: 1.125,
+                max: 1.25,
+                color: '#f59e0b'
+            },
+            {
+                min: 1.25,
+                max: Infinity,
+                color: '#ef4444'
+            },
+        ];
 
-        const linearValue = Math.round((value / goalTime) * 4);
+        const linearValue = value / goalTime;
-
+        return R.find(minMax => minMax.min < linearValue && linearValue <= minMax.max, buckets)!.color;
-        // If we did something, but not enough to reach the first level, return 1
-        if (linearValue == 0 && value > 0) return values[1];
-
-        // Clamp to the granularity
-        if (linearValue > 4) return values[4];
-        return values[linearValue];
     };
 
     const getWeekTotal = (weekIndex: number): number => {

src/components/OverviewPage.tsx

@@ -47,6 +47,7 @@ export default function OverviewPage({
                 <CalendarOverviewCard
                     data={data}
                     goal={config.goalHours}
+                    penaliseOvertime={config.penaliseOvertime}
                     startTime={config.timePeriod.start}
                     endTime={config.timePeriod.end}
                 />

src/components/cards/calendarOverviewCard.tsx

@@ -38,11 +38,13 @@ function useCalendarData(data: Data, initialDate: Date, endDate: Date) {
 export function CalendarOverviewCard({
                                          data,
                                          goal,
+                                         penaliseOvertime,
                                          startTime,
                                          endTime,
                                      }: {
     data: Data,
     goal: number,
+    penaliseOvertime?: boolean,
     startTime: string,
     endTime: string,
 }) {
@@ -54,7 +56,7 @@ export function CalendarOverviewCard({
         <Tooltip id="calendar-tooltip"/>
         <Title>Semester Overview</Title>
         <div className="m-2">
-            <HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal}/>
+            <HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal} penaliseOvertime={penaliseOvertime}/>
         </div>
     </Card>
 }

src/data/fetchData.ts

@@ -30,6 +30,7 @@ export interface OverviewConfig {
     }[],
 
     goalHours: number,
+    penaliseOvertime?: boolean,
 
     timePeriod: {
         start: string,

src/data/periods.ts

@@ -29,7 +29,8 @@ export const semester1Revision: OverviewConfig = {
 export const semester2: OverviewConfig = {
     title: 'Semester 2',
     periodKey: 'y5-s2',
-    goalHours: 7.5,
+    goalHours: 6,
+    penaliseOvertime: true,
     subjects: [
         {
             projectId: 195754611,