47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||
|
||
type VolumeChartProps = {
|
||
data: { label: string; volumeKg: number }[];
|
||
};
|
||
|
||
export function VolumeChart({ data }: VolumeChartProps) {
|
||
const [mounted, setMounted] = useState(false);
|
||
useEffect(() => setMounted(true), []);
|
||
|
||
if (!mounted) {
|
||
return (
|
||
<div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
|
||
<div className="mb-2 h-4 w-56 animate-pulse rounded bg-muted/30" />
|
||
<div className="h-[180px] animate-pulse rounded bg-muted/20" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
|
||
<div className="mb-2 text-sm text-fg/60">Wolumen treningowy (ciężar × powtórzenia)</div>
|
||
<ResponsiveContainer width="100%" height={180}>
|
||
<BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
|
||
<XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={12} />
|
||
<YAxis stroke="var(--color-fg)" opacity={0.5} fontSize={12} width={48} />
|
||
<Tooltip
|
||
cursor={{ fill: "var(--color-bg)" }}
|
||
contentStyle={{
|
||
background: "var(--color-bg)",
|
||
border: "1px solid var(--color-muted)",
|
||
borderRadius: 8,
|
||
fontSize: 12,
|
||
color: "var(--color-fg)",
|
||
}}
|
||
formatter={(value) => [`${Math.round(Number(value)).toLocaleString("pl-PL")} kg`, "Wolumen"]}
|
||
/>
|
||
<Bar dataKey="volumeKg" fill="var(--color-accent)" radius={[4, 4, 0, 0]} />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
);
|
||
}
|