"use client";
import { useEffect, useState } from "react";
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
type ExerciseProgressChartProps = {
name: string;
data: { label: string; volumeKg: number; topWeightKg?: number; e1rmKg?: number }[];
};
function E1rmDelta({ data }: { data: ExerciseProgressChartProps["data"] }) {
const points = data.filter((d) => d.e1rmKg != null).slice(-5);
if (points.length < 2) return null;
const first = points[0].e1rmKg!;
const last = points[points.length - 1].e1rmKg!;
const diffKg = Math.round((last - first) * 10) / 10;
const diffPct = Math.round(((last - first) / first) * 100);
const sign = diffKg >= 0 ? "+" : "";
const color = diffKg > 0 ? "text-emerald-400" : diffKg < 0 ? "text-rose-400" : "text-fg/40";
return (
E1RM {sign}{diffKg} kg ({sign}{diffPct}%)
);
}
export function ExerciseProgressChart({ name, data }: ExerciseProgressChartProps) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (data.length < 2) return null;
if (!mounted) {
return (
);
}
return (
{name}
{
if (key === "volumeKg") return [`${Math.round(Number(value)).toLocaleString("pl-PL")} kg`, "Wolumen"];
if (key === "topWeightKg") return [`${value} kg`, "Maks. ciężar"];
if (key === "e1rmKg") return [`${value} kg`, "E1RM (Epley)"];
return [`${value}`, String(key)];
}}
/>
);
}