towel-shit/app/(charts)/hour.tsx

"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 HourChart({
	data,
}: {
	data: {
		timestamp: number;
		foldtime: number;
	}[];
}) {
	const todayTimestamp = new Date();
	todayTimestamp.setHours(0, 0, 0, 0);
	const tomorrowTimestamp = new Date();
	tomorrowTimestamp.setHours(0, 0, 0, 0);
	tomorrowTimestamp.setDate(tomorrowTimestamp.getDate() + 1);

	console.log(todayTimestamp.getTime(), tomorrowTimestamp.getTime());

	const todayData = data.filter(
		(data) =>
			data.timestamp >= todayTimestamp.getTime() &&
			data.timestamp < tomorrowTimestamp.getTime()
	);

	const todayDataPerHour = todayData.reduce((acc, data) => {
		const hour = new Date(data.timestamp).getHours();
		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(24).fill(0).map((_, i) => {
		if (!todayDataPerHour[i])
			return { hour: i + 1 + ":00", value: 0, foldtime: 0 };
		return {
			hour: i + 1 + ":00",
			value: todayDataPerHour[i].count,
			foldtime: todayDataPerHour[i].foldTime / todayDataPerHour[i].count,
		};
	});
	return (
		<Card className="w-full max-w-[1200px]">
			<CardHeader>
				<CardTitle>Today</CardTitle>
				{/* <CardDescription>January - June 2024</CardDescription> */}
			</CardHeader>
			<CardContent>
				<ChartContainer config={chartConfig}>
					<BarChart accessibilityLayer data={chartData}>
						<CartesianGrid vertical={false} />
						<XAxis
							dataKey="hour"
							tickLine={false}
							tickMargin={10}
							axisLine={false}
						/>
						<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>
	);
}