Import source: web/src/components/Sparkline
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,164 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import type { CheckPoint } from "../lib/types";
|
||||
import { fmtLatency, fmtTime } from "../lib/format";
|
||||
import { useUI } from "../lib/ui";
|
||||
|
||||
const W = 460;
|
||||
const H = 90;
|
||||
const PAD = 4;
|
||||
|
||||
interface SparklineProps {
|
||||
series: CheckPoint[];
|
||||
/** Re-keys the head pulse so each landing probe blips. */
|
||||
pulse: number;
|
||||
}
|
||||
|
||||
/** Latency over time — brass line, failures as red drops to the floor. */
|
||||
export function Sparkline({ series, pulse }: SparklineProps) {
|
||||
const { t, lang, reduced } = useUI();
|
||||
const [probe, setProbe] = useState<CheckPoint | null>(null);
|
||||
|
||||
const ok = series.filter((p) => p.ok);
|
||||
const { path, area, posFor, maxLat } = useMemo(() => {
|
||||
if (series.length < 2 || ok.length === 0) {
|
||||
return { path: "", area: "", posFor: () => null, maxLat: 0 };
|
||||
}
|
||||
const t0 = series[0].ts;
|
||||
const t1 = series[series.length - 1].ts;
|
||||
const span = Math.max(1, t1 - t0);
|
||||
const maxLat = Math.max(...ok.map((p) => p.latency_ms)) * 1.15;
|
||||
const x = (ts: number) => PAD + ((ts - t0) / span) * (W - PAD * 2);
|
||||
const y = (lat: number) => H - PAD - (lat / maxLat) * (H - PAD * 2);
|
||||
|
||||
let path = "";
|
||||
for (const p of ok) {
|
||||
path += `${path ? "L" : "M"} ${x(p.ts).toFixed(2)} ${y(p.latency_ms).toFixed(2)} `;
|
||||
}
|
||||
const area = `${path} L ${x(ok[ok.length - 1].ts).toFixed(2)} ${H - PAD} L ${x(ok[0].ts).toFixed(2)} ${H - PAD} Z`;
|
||||
const posFor = (p: CheckPoint) => ({
|
||||
x: x(p.ts),
|
||||
y: p.ok ? y(p.latency_ms) : H - PAD,
|
||||
});
|
||||
return { path, area, posFor, maxLat };
|
||||
}, [series, ok]);
|
||||
|
||||
if (!path) {
|
||||
return (
|
||||
<div className="h-[90px] flex items-center justify-center microlabel">
|
||||
{t.noData}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const head = posFor(series[series.length - 1]);
|
||||
|
||||
const onMove = (e: React.MouseEvent<SVGSVGElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const mx = ((e.clientX - rect.left) / rect.width) * W;
|
||||
let best: CheckPoint | null = null;
|
||||
let bestD = Infinity;
|
||||
for (const p of series) {
|
||||
const pos = posFor(p);
|
||||
if (!pos) continue;
|
||||
const d = Math.abs(pos.x - mx);
|
||||
if (d < bestD) {
|
||||
bestD = d;
|
||||
best = p;
|
||||
}
|
||||
}
|
||||
setProbe(best);
|
||||
};
|
||||
|
||||
const probePos = probe ? posFor(probe) : null;
|
||||
|
||||
return (
|
||||
<div className="relative" dir="ltr">
|
||||
<svg
|
||||
viewBox={`0 0 ${W} ${H}`}
|
||||
className="w-full block"
|
||||
onMouseMove={onMove}
|
||||
onMouseLeave={() => setProbe(null)}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="spark-fill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="var(--color-brass)" stopOpacity="0.16" />
|
||||
<stop offset="100%" stopColor="var(--color-brass)" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* latency grid: max line */}
|
||||
<line x1={PAD} y1={PAD + 6} x2={W - PAD} y2={PAD + 6} stroke="var(--color-ink-800)" strokeWidth={0.5} strokeDasharray="3 5" />
|
||||
<text x={W - PAD} y={PAD + 3} textAnchor="end" fontSize={7.5} fontFamily="var(--font-mono)" fill="var(--color-paper-faint)" className="tabular">
|
||||
{fmtLatency(lang, maxLat / 1.15)}
|
||||
</text>
|
||||
|
||||
<path d={area} fill="url(#spark-fill)" />
|
||||
<motion.path
|
||||
d={path}
|
||||
fill="none"
|
||||
stroke="var(--color-brass)"
|
||||
strokeWidth={1.4}
|
||||
strokeLinejoin="round"
|
||||
initial={reduced ? false : { pathLength: 0 }}
|
||||
animate={{ pathLength: 1 }}
|
||||
transition={reduced ? { duration: 0 } : { duration: 0.9, ease: [0.65, 0, 0.35, 1] }}
|
||||
/>
|
||||
|
||||
{/* failures drop to the floor as red ticks */}
|
||||
{series.filter((p) => !p.ok).map((p) => {
|
||||
const pos = posFor(p)!;
|
||||
return (
|
||||
<line
|
||||
key={p.ts}
|
||||
x1={pos.x}
|
||||
y1={H - PAD - 7}
|
||||
x2={pos.x}
|
||||
y2={H - PAD}
|
||||
stroke="var(--color-down)"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* live head — blips when a probe lands */}
|
||||
{!reduced && (
|
||||
<motion.circle
|
||||
key={pulse}
|
||||
cx={head?.x}
|
||||
cy={head?.y}
|
||||
fill="var(--color-brass)"
|
||||
initial={{ r: 1.5, opacity: 1 }}
|
||||
animate={{ r: 6, opacity: 0 }}
|
||||
transition={{ duration: 0.9, ease: "easeOut" }}
|
||||
/>
|
||||
)}
|
||||
<circle cx={head?.x} cy={head?.y} r={2} fill="var(--color-brass)" />
|
||||
|
||||
{/* hover probe */}
|
||||
{probe && probePos && (
|
||||
<g>
|
||||
<line x1={probePos.x} y1={PAD} x2={probePos.x} y2={H - PAD} stroke="var(--color-paper-faint)" strokeWidth={0.5} opacity={0.5} />
|
||||
<circle cx={probePos.x} cy={probePos.y} r={3} fill="none" stroke={probe.ok ? "var(--color-brass)" : "var(--color-down)"} strokeWidth={1} />
|
||||
</g>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
<div className="mt-1 h-4 flex justify-between microlabel tabular">
|
||||
{probe ? (
|
||||
<>
|
||||
<span style={{ color: probe.ok ? "var(--color-brass)" : "var(--color-down)" }}>
|
||||
{probe.ok ? fmtLatency(lang, probe.latency_ms) : probe.error || t.failed}
|
||||
</span>
|
||||
<span>{fmtTime(lang, probe.ts)}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>{fmtTime(lang, series[0].ts)}</span>
|
||||
<span>{fmtTime(lang, series[series.length - 1].ts)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user