72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import {
|
||
|
|
Area,
|
||
|
|
AreaChart,
|
||
|
|
ResponsiveContainer,
|
||
|
|
Tooltip,
|
||
|
|
XAxis,
|
||
|
|
YAxis,
|
||
|
|
} from "recharts";
|
||
|
|
|
||
|
|
type RunDataPoint = {
|
||
|
|
label: string;
|
||
|
|
distanceKm: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
data: RunDataPoint[];
|
||
|
|
};
|
||
|
|
|
||
|
|
export function RunningStatsChart({ data }: Props) {
|
||
|
|
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-[220px] 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">Tygodniowy dystans biegowy (od poniedziałku)</div>
|
||
|
|
<ResponsiveContainer width="100%" height={220}>
|
||
|
|
<AreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="distGradient" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.3} />
|
||
|
|
<stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={11} />
|
||
|
|
<YAxis stroke="var(--color-fg)" opacity={0.5} fontSize={11} width={40} />
|
||
|
|
<Tooltip
|
||
|
|
cursor={{ stroke: "var(--color-accent)", strokeWidth: 1 }}
|
||
|
|
contentStyle={{
|
||
|
|
background: "var(--color-bg)",
|
||
|
|
border: "1px solid var(--color-muted)",
|
||
|
|
borderRadius: 8,
|
||
|
|
fontSize: 12,
|
||
|
|
color: "var(--color-fg)",
|
||
|
|
}}
|
||
|
|
formatter={(value) => [`${Number(value).toFixed(2)} km`, "Dystans"]}
|
||
|
|
/>
|
||
|
|
<Area
|
||
|
|
type="monotone"
|
||
|
|
dataKey="distanceKm"
|
||
|
|
stroke="var(--color-accent)"
|
||
|
|
fill="url(#distGradient)"
|
||
|
|
strokeWidth={2}
|
||
|
|
name="distanceKm"
|
||
|
|
/>
|
||
|
|
</AreaChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|