You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
|
|
const chartConfig = {
|
|
value: {
|
|
label: "Count",
|
|
color: "hsl(var(--chart-1))",
|
|
},
|
|
foldtime: {
|
|
label: "Fold Time",
|
|
color: "hsl(var(--chart-2))",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export function MinuteChart({
|
|
data,
|
|
}: {
|
|
data: {
|
|
timestamp: number;
|
|
foldtime: number;
|
|
}[];
|
|
}) {
|
|
const thisHourTimestamp = new Date();
|
|
thisHourTimestamp.setMinutes(0, 0, 0);
|
|
const nextHourTimestamp = new Date();
|
|
nextHourTimestamp.setHours(nextHourTimestamp.getHours() + 1);
|
|
nextHourTimestamp.setMinutes(0, 0, 0);
|
|
|
|
console.log(thisHourTimestamp.getTime(), nextHourTimestamp.getTime());
|
|
|
|
const todayData = data.filter(
|
|
(data) =>
|
|
data.timestamp >= thisHourTimestamp.getTime() &&
|
|
data.timestamp < nextHourTimestamp.getTime()
|
|
);
|
|
|
|
const todayDataPerHour = todayData.reduce((acc, data) => {
|
|
const hour = new Date(data.timestamp).getMinutes();
|
|
if (!acc[hour]) {
|
|
acc[hour] = {
|
|
count: 1,
|
|
foldTime: data.foldtime,
|
|
};
|
|
}
|
|
acc[hour].count += 1;
|
|
acc[hour].foldTime += data.foldtime;
|
|
return acc;
|
|
}, {} as Record<number, { count: number; foldTime: number }>);
|
|
|
|
const chartData = new Array(60).fill(0).map((_, i) => {
|
|
if (!todayDataPerHour[i])
|
|
return { minute: "Minute " + i, value: 0, foldtime: 0 };
|
|
return {
|
|
minute: "Minute " + i,
|
|
value: todayDataPerHour[i].count,
|
|
foldtime: todayDataPerHour[i].foldTime / todayDataPerHour[i].count,
|
|
};
|
|
});
|
|
return (
|
|
<Card className="w-full max-w-[1200px]">
|
|
<CardHeader>
|
|
<CardTitle>This Hour</CardTitle>
|
|
{/* <CardDescription>January - June 2024</CardDescription> */}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig}>
|
|
<BarChart accessibilityLayer data={chartData}>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="minute"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) =>
|
|
value.replace("Minute ", "")
|
|
}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={<ChartTooltipContent indicator="line" />}
|
|
/>
|
|
<Bar
|
|
dataKey="value"
|
|
fill="var(--color-value)"
|
|
radius={4}
|
|
/>
|
|
<Bar
|
|
dataKey="foldtime"
|
|
fill="var(--color-foldtime)"
|
|
radius={4}
|
|
/>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|