init

components/exercise-progress-chart.tsx

@@ -0,0 +1,64 @@
+"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>
+  );
+}