revision-ui/src/components/cards/calendarOverviewCard.tsx

import {Card, Title} from "@tremor/react";
import * as R from 'ramda';
import * as dFns from 'date-fns';
import {Tooltip} from 'react-tooltip';
import {Data} from "@/data/fetchData";
import HeatMap from "@/components/HeatMap";

function useCalendarData(data: Data, initialDate: Date, endDate: Date) {
    const timeEntries = data.timeEntries;

    // Group by day, sum up seconds
    const grouped = R.groupBy((entry) => {
        return dFns.formatISO(dFns.startOfDay(dFns.parseISO(entry.start)));
    }, timeEntries);

    const summed = R.mapObjIndexed((entries) => {
        return R.sum((entries ?? []).map((entry) => entry.duration))
    }, grouped);

    // Fill in missing days, hacky
    dFns.eachDayOfInterval({
        start: initialDate,
        end: endDate,
    }).forEach((date) => {
        const key = dFns.formatISO(date);
        if (summed[key] == undefined) {
            summed[key] = 0;
        }
    })

    return Object.entries(summed)
        .map(([key, value]) => ({
            date: dFns.parseISO(key),
            count: value / (60 * 60),
        }))
}

export function CalendarOverviewCard({
                                         data,
                                         goal,
                                         startTime,
                                         endTime,
                                     }: {
    data: Data,
    goal: number,
    startTime: string,
    endTime: string,
}) {
    const initialDate = dFns.parseISO(startTime);
    const endDate = dFns.parseISO(endTime);
    const calendarData = useCalendarData(data, initialDate, endDate);

    return <Card className="col-span-1">
        <Tooltip id="calendar-tooltip"/>
        <Title>Semester Overview</Title>
        <div className="m-2">
            <HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal}/>
        </div>
    </Card>
}