From fc9b7e0d7d87eda126e2922b233911f1be055990 Mon Sep 17 00:00:00 2001
From: Joshua Coles <josh@coles.to>
Date: Wed, 20 Dec 2023 17:18:22 +0000
Subject: [PATCH] Improve calendar overview

---
 src/app/calendar-styles.css      |  3 +++
 src/app/calendarOverviewCard.tsx | 30 +++++++++++-------------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/app/calendar-styles.css b/src/app/calendar-styles.css
index 14ce7ab..17d93e6 100644
--- a/src/app/calendar-styles.css
+++ b/src/app/calendar-styles.css
@@ -4,12 +4,15 @@
 .react-calendar-heatmap .color-gitlab-1 {
     fill: #acd5f2;
 }
+
 .react-calendar-heatmap .color-gitlab-2 {
     fill: #7fa8d1;
 }
+
 .react-calendar-heatmap .color-gitlab-3 {
     fill: #49729b;
 }
+
 .react-calendar-heatmap .color-gitlab-4 {
     fill: #254e77;
 }
diff --git a/src/app/calendarOverviewCard.tsx b/src/app/calendarOverviewCard.tsx
index 953505f..ce349ee 100644
--- a/src/app/calendarOverviewCard.tsx
+++ b/src/app/calendarOverviewCard.tsx
@@ -8,7 +8,6 @@ import * as dFns from 'date-fns';
 import CalendarHeatmap from 'react-calendar-heatmap';
 import 'react-calendar-heatmap/dist/styles.css';
 import './calendar-styles.css'
-import * as dns from "dns";
 import { Tooltip } from 'react-tooltip';
 
 const initialDate = dFns.parseISO('2023-12-15T00:00:00.000Z')
@@ -20,8 +19,17 @@ const projectIds = [
     195754611,
 ];
 
-function useCalendarData() {
+const dailyGoal = 4;
+const granularity = 4;
 
+function computeCompletionShade(value: number) {
+    const linearValue = Math.round((value / dailyGoal) * granularity);
+    if (linearValue == 0 && value > 0) return 1;
+    if (linearValue > granularity) return granularity;
+    return linearValue;
+}
+
+function useCalendarData() {
     const {
         data: timeEntries,
         error,
@@ -63,23 +71,6 @@ function useCalendarData() {
 export function CalendarOverviewCard() {
     const data = useCalendarData();
 
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [height, setHeight] = useState(200);
-
-    // Fix aspect ratio of the heatmap to be 2:1
-    useEffect(() => {
-        const container = containerRef.current;
-
-        if (container) {
-            const resizeObserver = new ResizeObserver(() => {
-                const width = container.clientWidth;
-                setHeight(width / 5);
-            });
-            resizeObserver.observe(container);
-            return () => resizeObserver.disconnect();
-        }
-    }, [containerRef]);
-
     return <Card className="col-span-1">
         <Tooltip id="calendar-tooltip"/>
         <Title>Overview</Title>
@@ -88,6 +79,7 @@ export function CalendarOverviewCard() {
             startDate={initialDate}
             endDate={endDate}
             values={data}
+            classForValue={value => `color-github-${computeCompletionShade(value?.count ?? 0)}`}
             tooltipDataAttrs={(value: any) => {
                 return value.count ? {
                     'data-tooltip-id': `calendar-tooltip`,