init

components/elevation-chart.tsx

@@ -1,13 +1,31 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { useEffect, useId, useState } from "react";
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type Point = { distanceKm: number; altM: number; paceSec?: number };
 
 type Props = {
-  data: { distanceKm: number; altM: number }[];
+  data: Point[];
 };
 
+function fmtPace(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")} /km`;
+}
+
 export function ElevationChart({ data }: Props) {
+  const uid = useId();
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
@@ -18,15 +36,37 @@ export function ElevationChart({ data }: Props) {
   const altitudes = data.map((p) => p.altM);
   const minAlt = Math.min(...altitudes);
   const maxAlt = Math.max(...altitudes);
-  const pad = Math.max(5, Math.round((maxAlt - minAlt) * 0.15));
+  const altPad = Math.max(5, Math.round((maxAlt - minAlt) * 0.15));
+
+  const pacePoints = data.map((p) => p.paceSec).filter((v): v is number => v != null && v > 0);
+  const hasPace = pacePoints.length > 5;
+  const minPace = hasPace ? Math.min(...pacePoints) : 0;
+  const maxPace = hasPace ? Math.max(...pacePoints) : 0;
+  const pacePad = Math.max(5, Math.round((maxPace - minPace) * 0.15));
+
+  const tooltipStyle = {
+    background: "var(--color-bg)",
+    border: "1px solid var(--color-muted)",
+    borderRadius: 8,
+    fontSize: 12,
+    color: "var(--color-fg)",
+  };
 
   return (
     <div className="rounded-lg border border-muted/40 bg-surface p-4">
-      <div className="mb-2 text-sm text-fg/60">Profil wysokości</div>
+      <div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
+        <span>Profil wysokości</span>
+        {hasPace && (
+          <span className="flex items-center gap-1">
+            <span className="inline-block h-0.5 w-4" style={{ background: "var(--color-sand)" }} />
+            Tempo
+          </span>
+        )}
+      </div>
       <ResponsiveContainer width="100%" height={110}>
-        <AreaChart data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+        <ComposedChart data={data} margin={{ top: 4, right: hasPace ? 52 : 8, left: 0, bottom: 0 }}>
           <defs>
-            <linearGradient id="elevGradient" x1="0" y1="0" x2="0" y2="1">
+            <linearGradient id={`elev-${uid}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.25} />
               <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
             </linearGradient>
@@ -41,33 +81,59 @@ export function ElevationChart({ data }: Props) {
             interval={Math.max(0, Math.floor(data.length / 5) - 1)}
           />
           <YAxis
+            yAxisId="elev"
             stroke="var(--color-fg)"
             opacity={0.5}
             fontSize={11}
             width={44}
             tickFormatter={(v) => `${Math.round(v)} m`}
-            domain={[minAlt - pad, maxAlt + pad]}
+            domain={[minAlt - altPad, maxAlt + altPad]}
           />
+          {hasPace && (
+            <YAxis
+              yAxisId="pace"
+              orientation="right"
+              reversed
+              stroke="var(--color-sand)"
+              opacity={0.5}
+              fontSize={11}
+              width={50}
+              tickFormatter={fmtPace}
+              domain={[minPace - pacePad, maxPace + pacePad]}
+            />
+          )}
           <Tooltip
-            contentStyle={{
-              background: "var(--color-bg)",
-              border: "1px solid var(--color-muted)",
-              borderRadius: 8,
-              fontSize: 12,
-              color: "var(--color-fg)",
+            contentStyle={tooltipStyle}
+            formatter={(value, name) => {
+              if (name === "altM") return [`${Math.round(Number(value))} m n.p.m.`, "Wysokość"];
+              if (name === "paceSec") return [fmtPace(Number(value)), "Tempo"];
+              return [value, name];
             }}
-            formatter={(value) => [`${Math.round(Number(value))} m n.p.m.`, "Wysokość"]}
-            labelFormatter={(label) => `${Number(label).toFixed(2)} km`}
+            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
           />
           <Area
+            yAxisId="elev"
             type="monotone"
             dataKey="altM"
+            name="altM"
             stroke="var(--color-accent)"
             strokeWidth={2}
-            fill="url(#elevGradient)"
+            fill={`url(#elev-${uid})`}
             dot={false}
           />
-        </AreaChart>
+          {hasPace && (
+            <Line
+              yAxisId="pace"
+              type="monotone"
+              dataKey="paceSec"
+              name="paceSec"
+              stroke="var(--color-sand)"
+              strokeWidth={1.5}
+              dot={false}
+              connectNulls={false}
+            />
+          )}
+        </ComposedChart>
       </ResponsiveContainer>
     </div>
   );