Improve calendar overview

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

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`,