65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||
|
|
|
||
|
|
type ExerciseProgressChartProps = {
|
||
|
|
name: string;
|
||
|
|
data: { label: string; volumeKg: number; topWeightKg?: number }[];
|
||
|
|
};
|
||
|
|
|
||
|
|
export function ExerciseProgressChart({ name, data }: ExerciseProgressChartProps) {
|
||
|
|
if (data.length < 2) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
|
||
|
|
<div className="mb-2 text-sm text-fg/60">{name}</div>
|
||
|
|
<ResponsiveContainer width="100%" height={150}>
|
||
|
|
<LineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
|
||
|
|
<CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
|
||
|
|
<XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={12} />
|
||
|
|
<YAxis yAxisId="volume" stroke="var(--color-accent)" opacity={0.7} fontSize={12} width={48} />
|
||
|
|
<YAxis
|
||
|
|
yAxisId="weight"
|
||
|
|
orientation="right"
|
||
|
|
stroke="var(--color-sand)"
|
||
|
|
opacity={0.7}
|
||
|
|
fontSize={12}
|
||
|
|
width={48}
|
||
|
|
/>
|
||
|
|
<Tooltip
|
||
|
|
contentStyle={{
|
||
|
|
background: "var(--color-bg)",
|
||
|
|
border: "1px solid var(--color-muted)",
|
||
|
|
borderRadius: 8,
|
||
|
|
fontSize: 12,
|
||
|
|
color: "var(--color-fg)",
|
||
|
|
}}
|
||
|
|
formatter={(value, key) => [
|
||
|
|
key === "topWeightKg" ? `${value} kg` : `${Math.round(Number(value)).toLocaleString("pl-PL")} kg`,
|
||
|
|
key === "topWeightKg" ? "Maks. ciężar" : "Wolumen",
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<Line
|
||
|
|
yAxisId="volume"
|
||
|
|
type="monotone"
|
||
|
|
dataKey="volumeKg"
|
||
|
|
stroke="var(--color-accent)"
|
||
|
|
strokeWidth={2}
|
||
|
|
dot={{ r: 3 }}
|
||
|
|
/>
|
||
|
|
<Line
|
||
|
|
yAxisId="weight"
|
||
|
|
type="monotone"
|
||
|
|
dataKey="topWeightKg"
|
||
|
|
stroke="var(--color-sand)"
|
||
|
|
strokeWidth={2}
|
||
|
|
dot={{ r: 3 }}
|
||
|
|
/>
|
||
|
|
</LineChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|