Some stuff

src/app/a.client.tsx

@@ -3,20 +3,35 @@
 import useSWR from "swr";
 import {fetcher} from "@/app/utils";
 import {useEffect, useState} from "react";
-import {Card, Metric, Text, Title} from "@tremor/react";
+import {Card, DonutChart, Metric, Text, Title} from "@tremor/react";
+import * as R from "ramda";
 
-export function ClientComponent({
-                                    projectId,
-                                    title
-                                }: {
+export function SubjectOverviewCard({
+                                        projectId,
+                                        title
+                                    }: {
     projectId: number,
     title?: string
 }) {
+    const {
+        data: _project
+    } = useSWR<any>(`http://cosmos:8074/project?select=raw_json&toggl_id=eq.${projectId}`, fetcher);
+    const [project, setProject] = useState({
+        name: '',
+        color: '',
+    });
+
+    useEffect(() => {
+        if (_project) {
+            setProject(_project[0].raw_json);
+        }
+    }, [_project]);
+
     const {
         data,
         error,
-        isLoading
-    } = useSWR<any[]>(`http://cosmos:8074/time_entry?select=*,project:project_id(name)&project_id=eq.${projectId}`, fetcher);
+        isLoading,
+    } = useSWR<any[]>(`http://cosmos:8074/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.2023-12-15T00:00:00.000Z`, fetcher);
     const [a, setA] = useState(0)
 
     useEffect(() => {
@@ -28,10 +43,52 @@ export function ClientComponent({
     }, [data]);
 
     return (
-        <Card>
-            <Title>{title ?? (isLoading ? 'Loading' : data?.[0]['project']['name'])}</Title>
+        <Card style={{ borderColor: project?.color }} decoration={'left'}>
+            <Title>{title ?? project?.name}</Title>
             <Text>Total</Text>
             <Metric>{(a / (60 * 60)).toFixed(2)} hours</Metric>
         </Card>
     )
 }
+
+export function SubjectComparisonCard({projectIds}: {
+    projectIds: number[]
+}) {
+    const {
+        data,
+        error,
+        isLoading,
+    } = useSWR<any[]>(`http://cosmos:8074/time_entry?select=raw_json,project:project_id(name,raw_json)&project_id=in.(${projectIds.join(',')})`, fetcher, {});
+
+    const [a, setA] = useState<{ name: string, value: number }[]>([]);
+    const [colours, setColours] = useState<string[]>([]);
+
+    useEffect(() => {
+        const a = R.toPairs(R.groupBy((entry) => entry.project.name, data ?? []))
+            .map(([name, entries]) => ({
+                name,
+                value: (entries ?? []).map((entry) => entry.raw_json.seconds).reduce((a, b) => a + b, 0),
+                colour: entries?.[0].project.raw_json.color
+            }))
+
+        setA(a);
+
+        setColours(a.map((entry) => entry.colour));
+    }, [data]);
+
+    const valueFormatter = (number: number) => `${(number / (60 * 60)).toFixed(2)} hours`;
+
+    return (
+        <Card className="col">
+            <Title>Relative Breakdown</Title>
+            <DonutChart
+                className="mt-6"
+                data={a ?? []}
+                category="value"
+                index="name"
+                valueFormatter={valueFormatter}
+                colors={colours}
+            />
+        </Card>
+    )
+}