"use client";
import { useEffect, useState } from "react";
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
type Props = {
data: { distanceKm: number; altM: number }[];
};
export function ElevationChart({ data }: Props) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) {
return ;
}
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));
return (
Profil wysokości
`${Number(v).toFixed(1)} km`}
interval={Math.max(0, Math.floor(data.length / 5) - 1)}
/>
`${Math.round(v)} m`}
domain={[minAlt - pad, maxAlt + pad]}
/>
[`${Math.round(Number(value))} m n.p.m.`, "Wysokość"]}
labelFormatter={(label) => `${Number(label).toFixed(2)} km`}
/>
);
}