95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import useSWR from "swr";
|
|
import {fetcher} from "@/app/utils";
|
|
import {useEffect, useState} from "react";
|
|
import {Card, DonutChart, Metric, Text, Title} from "@tremor/react";
|
|
import * as R from "ramda";
|
|
|
|
export function SubjectOverviewCard({
|
|
projectId,
|
|
title
|
|
}: {
|
|
projectId: number,
|
|
title?: string
|
|
}) {
|
|
const {
|
|
data: _project
|
|
} = useSWR<any>(`/api/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[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.2023-12-15T00:00:00.000Z`, fetcher);
|
|
const [a, setA] = useState(0)
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
setA(data
|
|
.map((entry) => entry.raw_json.seconds)
|
|
.reduce((a, b) => a + b, 0));
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<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[]>(`/api/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>
|
|
)
|
|
}
|