+
+ Balans kontaktu
+
+
+ Lewa
+
+
+
+ Prawa
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `${Number(v).toFixed(1)} km`}
+ interval={Math.max(0, Math.floor(data.length / 5) - 1)}
+ />
+ `${Number(v).toFixed(0)}%`}
+ domain={[40, 60]}
+ ticks={[40, 45, 50, 55, 60]}
+ />
+ [
+ `${Number(value).toFixed(1)}%`,
+ name === "left" ? "Lewa" : "Prawa",
+ ]}
+ labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/components/run-metric-chart.tsx b/components/run-metric-chart.tsx
new file mode 100644
index 0000000..e0c1b00
--- /dev/null
+++ b/components/run-metric-chart.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ ReferenceLine,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import { useId } from "react";
+
+type Props = {
+ data: { distanceKm: number; value: number }[];
+ label: string;
+ unit: string;
+ color?: string;
+ referenceLine?: number;
+ decimals?: number;
+};
+
+export function RunMetricChart({
+ data,
+ label,
+ unit,
+ color = "var(--color-accent)",
+ referenceLine,
+ decimals = 0,
+}: Props) {
+ const uid = useId();
+ const gradId = `grad-${uid.replace(/:/g, "")}`;
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+
+ if (!mounted) {
+ return