112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useId, useState } from "react";
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
CartesianGrid,
|
|
ReferenceLine,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
|
|
type GcbPoint = { distanceKm: number; left: number; right: number };
|
|
|
|
type Props = {
|
|
data: GcbPoint[];
|
|
syncId?: string;
|
|
};
|
|
|
|
export function GcbChart({ data, syncId }: Props) {
|
|
const uid = useId();
|
|
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" />;
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-lg border border-muted/40 bg-surface p-4">
|
|
<div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
|
|
<span>Balans kontaktu</span>
|
|
<span className="flex items-center gap-1">
|
|
<span className="inline-block h-2 w-4 rounded" style={{ background: "var(--color-accent)" }} />
|
|
Lewa
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<span className="inline-block h-2 w-4 rounded" style={{ background: "var(--color-sand)" }} />
|
|
Prawa
|
|
</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={120}>
|
|
<AreaChart syncId={syncId} data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id={`gcb-l-${uid}`} x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.2} />
|
|
<stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
|
|
</linearGradient>
|
|
<linearGradient id={`gcb-r-${uid}`} x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="var(--color-sand)" stopOpacity={0.2} />
|
|
<stop offset="95%" stopColor="var(--color-sand)" 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={44}
|
|
tickFormatter={(v) => `${Number(v).toFixed(0)}%`}
|
|
domain={[40, 60]}
|
|
ticks={[40, 45, 50, 55, 60]}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: "var(--color-bg)",
|
|
border: "1px solid var(--color-muted)",
|
|
borderRadius: 8,
|
|
fontSize: 12,
|
|
color: "var(--color-fg)",
|
|
}}
|
|
formatter={(value, name) => [
|
|
`${Number(value).toFixed(1)}%`,
|
|
name === "left" ? "Lewa" : "Prawa",
|
|
]}
|
|
labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
|
|
/>
|
|
<ReferenceLine y={50} stroke="var(--color-fg)" strokeOpacity={0.3} strokeDasharray="4 4" />
|
|
<Area
|
|
type="monotone"
|
|
dataKey="left"
|
|
name="left"
|
|
stroke="var(--color-accent)"
|
|
strokeWidth={2}
|
|
fill={`url(#gcb-l-${uid})`}
|
|
dot={false}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="right"
|
|
name="right"
|
|
stroke="var(--color-sand)"
|
|
strokeWidth={2}
|
|
fill={`url(#gcb-r-${uid})`}
|
|
dot={false}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|