123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
"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;
|
|
format?: "pace";
|
|
reversed?: boolean;
|
|
syncId?: string;
|
|
};
|
|
|
|
export function RunMetricChart({
|
|
data,
|
|
label,
|
|
unit,
|
|
color = "var(--color-accent)",
|
|
referenceLine,
|
|
decimals = 0,
|
|
format,
|
|
reversed = false,
|
|
syncId,
|
|
}: Props) {
|
|
const uid = useId();
|
|
const gradId = `grad-${uid.replace(/:/g, "")}`;
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
if (!mounted) {
|
|
return <div className="h-[160px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
|
|
}
|
|
|
|
const values = data.map((p) => p.value);
|
|
const min = Math.min(...values);
|
|
const max = Math.max(...values);
|
|
const pad = Math.max(1, Math.round((max - min) * 0.15));
|
|
const fmt = (v: number) => {
|
|
if (format === "pace") {
|
|
const m = Math.floor(v / 60);
|
|
const s = Math.round(v % 60);
|
|
return `${m}:${s.toString().padStart(2, "0")} /km`;
|
|
}
|
|
return decimals > 0 ? `${Number(v).toFixed(decimals)} ${unit}` : `${Math.round(v)} ${unit}`;
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-lg border border-muted/40 bg-surface p-4">
|
|
<div className="mb-2 text-sm text-fg/60">{label}</div>
|
|
<ResponsiveContainer width="100%" height={120}>
|
|
<AreaChart syncId={syncId} data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor={color} stopOpacity={0.25} />
|
|
<stop offset="95%" stopColor={color} stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
|
|
<XAxis
|
|
dataKey="distanceKm"
|
|
stroke="var(--color-fg)"
|
|
opacity={0.5}
|
|
fontSize={11}
|
|
tickFormatter={(v) => `${Number(v).toFixed(1)} km`}
|
|
interval={Math.max(0, Math.floor(data.length / 5) - 1)}
|
|
/>
|
|
<YAxis
|
|
stroke="var(--color-fg)"
|
|
opacity={0.5}
|
|
fontSize={11}
|
|
width={50}
|
|
tickFormatter={fmt}
|
|
domain={reversed ? [max + pad, min - pad] : [min - pad, max + pad]}
|
|
reversed={reversed}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: "var(--color-bg)",
|
|
border: "1px solid var(--color-muted)",
|
|
borderRadius: 8,
|
|
fontSize: 12,
|
|
color: "var(--color-fg)",
|
|
}}
|
|
formatter={(value) => fmt(Number(value))}
|
|
labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
|
|
/>
|
|
{referenceLine !== undefined && (
|
|
<ReferenceLine
|
|
y={referenceLine}
|
|
stroke="var(--color-fg)"
|
|
strokeOpacity={0.4}
|
|
strokeDasharray="4 4"
|
|
/>
|
|
)}
|
|
<Area
|
|
type="monotone"
|
|
dataKey="value"
|
|
name={label}
|
|
stroke={color}
|
|
strokeWidth={2}
|
|
fill={`url(#${gradId})`}
|
|
dot={false}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|