mirror of
https://github.com/RGJorge/ContainerFlow.git
synced 2026-08-03 07:21:42 +02:00
v0.0.27
This commit is contained in:
RGJorge
@@ -0,0 +1,328 @@
|
||||
import { useRef, useEffect, useState, useCallback } from "react";
|
||||
import { useT } from "../i18n";
|
||||
|
||||
interface SparklineProps {
|
||||
data: number[];
|
||||
timestamps?: number[];
|
||||
hoverValues?: number[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
color?: string;
|
||||
threshold?: number;
|
||||
showArea?: boolean;
|
||||
showAverage?: boolean;
|
||||
formatAverage?: (v: number) => string;
|
||||
className?: string;
|
||||
formatValue?: (v: number) => string;
|
||||
formatHoverValue?: (v: number) => string;
|
||||
}
|
||||
|
||||
const PAD = { top: 4, bottom: 0, left: 0, right: 0 };
|
||||
|
||||
function formatDateTime(ts: number): string {
|
||||
const d = new Date(ts * 1000);
|
||||
const dd = String(d.getDate()).padStart(2, "0");
|
||||
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const time = d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||
return `${dd}/${mm} ${time}`;
|
||||
}
|
||||
|
||||
export function Sparkline({
|
||||
data,
|
||||
timestamps,
|
||||
hoverValues,
|
||||
width: propWidth,
|
||||
height: propHeight = 60,
|
||||
color = "#06b6d4",
|
||||
threshold,
|
||||
showArea = true,
|
||||
showAverage = false,
|
||||
formatAverage,
|
||||
className,
|
||||
formatValue,
|
||||
formatHoverValue,
|
||||
}: SparklineProps) {
|
||||
const { t } = useT();
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
|
||||
const [dims, setDims] = useState<{ w: number; h: number }>({ w: 0, h: propHeight });
|
||||
|
||||
// Draw the sparkline
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const w = propWidth || dims.w;
|
||||
const h = propHeight;
|
||||
if (w === 0) return;
|
||||
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = w * dpr;
|
||||
canvas.height = h * dpr;
|
||||
canvas.style.width = `${w}px`;
|
||||
canvas.style.height = `${h}px`;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
ctx.scale(dpr, dpr);
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
if (data.length === 0) {
|
||||
ctx.fillStyle = "#64748b";
|
||||
ctx.font = "11px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(t("detail.noHistory"), w / 2, h / 2 + 4);
|
||||
return;
|
||||
}
|
||||
|
||||
const plotW = w - PAD.left - PAD.right;
|
||||
const plotH = h - PAD.top - PAD.bottom;
|
||||
const avg = data.reduce((a, b) => a + b, 0) / data.length;
|
||||
const max = Math.max(...data, threshold ?? 0, avg, 1);
|
||||
const range = max || 1;
|
||||
const xStep = data.length > 1 ? plotW / (data.length - 1) : plotW;
|
||||
|
||||
const toX = (i: number) => PAD.left + i * xStep;
|
||||
const toY = (v: number) => PAD.top + plotH - (v / range) * plotH;
|
||||
|
||||
const AMBER = "#f59e0b";
|
||||
const hasThreshold = threshold !== undefined && threshold > 0;
|
||||
|
||||
// Helper: pick color based on whether value exceeds threshold
|
||||
const segColor = (v: number) => hasThreshold && v >= threshold ? AMBER : color;
|
||||
|
||||
// Helper: interpolate X where data crosses threshold between two points
|
||||
const crossX = (i0: number, i1: number) => {
|
||||
const v0 = data[i0], v1 = data[i1];
|
||||
const t = (threshold! - v0) / (v1 - v0);
|
||||
return toX(i0) + t * (toX(i1) - toX(i0));
|
||||
};
|
||||
|
||||
// Build segments: groups of consecutive points with the same over/under state
|
||||
// Each segment includes the crossing point so lines connect smoothly
|
||||
type Seg = { points: { x: number; y: number }[]; over: boolean };
|
||||
const segments: Seg[] = [];
|
||||
if (data.length > 1 && hasThreshold) {
|
||||
let cur: Seg = { points: [{ x: toX(0), y: toY(data[0]) }], over: data[0] >= threshold };
|
||||
for (let i = 1; i < data.length; i++) {
|
||||
const over = data[i] >= threshold;
|
||||
if (over !== cur.over) {
|
||||
// Crossing point
|
||||
const cx = crossX(i - 1, i);
|
||||
const cy = toY(threshold);
|
||||
cur.points.push({ x: cx, y: cy });
|
||||
segments.push(cur);
|
||||
cur = { points: [{ x: cx, y: cy }], over };
|
||||
}
|
||||
cur.points.push({ x: toX(i), y: toY(data[i]) });
|
||||
}
|
||||
segments.push(cur);
|
||||
}
|
||||
|
||||
// Area fill
|
||||
if (showArea && data.length > 1) {
|
||||
if (hasThreshold && segments.length > 0) {
|
||||
for (const seg of segments) {
|
||||
if (seg.points.length < 2) continue;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(seg.points[0].x, seg.points[0].y);
|
||||
for (let j = 1; j < seg.points.length; j++) ctx.lineTo(seg.points[j].x, seg.points[j].y);
|
||||
ctx.lineTo(seg.points[seg.points.length - 1].x, PAD.top + plotH);
|
||||
ctx.lineTo(seg.points[0].x, PAD.top + plotH);
|
||||
ctx.closePath();
|
||||
const c = seg.over ? AMBER : color;
|
||||
const cr = parseInt(c.slice(1, 3), 16);
|
||||
const cg = parseInt(c.slice(3, 5), 16);
|
||||
const cb = parseInt(c.slice(5, 7), 16);
|
||||
const gradient = ctx.createLinearGradient(0, PAD.top, 0, PAD.top + plotH);
|
||||
gradient.addColorStop(0, `rgba(${cr},${cg},${cb},0.35)`);
|
||||
gradient.addColorStop(1, `rgba(${cr},${cg},${cb},0.08)`);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
}
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(toX(0), toY(data[0]));
|
||||
for (let i = 1; i < data.length; i++) ctx.lineTo(toX(i), toY(data[i]));
|
||||
ctx.lineTo(toX(data.length - 1), PAD.top + plotH);
|
||||
ctx.lineTo(toX(0), PAD.top + plotH);
|
||||
ctx.closePath();
|
||||
const cr = parseInt(color.slice(1, 3), 16);
|
||||
const cg = parseInt(color.slice(3, 5), 16);
|
||||
const cb = parseInt(color.slice(5, 7), 16);
|
||||
const gradient = ctx.createLinearGradient(0, PAD.top, 0, PAD.top + plotH);
|
||||
gradient.addColorStop(0, `rgba(${cr},${cg},${cb},0.25)`);
|
||||
gradient.addColorStop(1, `rgba(${cr},${cg},${cb},0.02)`);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// Line stroke
|
||||
if (data.length > 1) {
|
||||
if (hasThreshold && segments.length > 0) {
|
||||
for (const seg of segments) {
|
||||
if (seg.points.length < 2) continue;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(seg.points[0].x, seg.points[0].y);
|
||||
for (let j = 1; j < seg.points.length; j++) ctx.lineTo(seg.points[j].x, seg.points[j].y);
|
||||
ctx.strokeStyle = seg.over ? AMBER : color;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.lineJoin = "round";
|
||||
ctx.lineCap = "round";
|
||||
ctx.stroke();
|
||||
}
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(toX(0), toY(data[0]));
|
||||
for (let i = 1; i < data.length; i++) ctx.lineTo(toX(i), toY(data[i]));
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.lineJoin = "round";
|
||||
ctx.lineCap = "round";
|
||||
ctx.stroke();
|
||||
}
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
ctx.arc(toX(0), toY(data[0]), 2, 0, Math.PI * 2);
|
||||
ctx.fillStyle = segColor(data[0]);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Threshold dashed line
|
||||
if (hasThreshold) {
|
||||
const y = toY(threshold);
|
||||
if (y >= PAD.top && y <= PAD.top + plotH) {
|
||||
ctx.beginPath();
|
||||
ctx.setLineDash([4, 4]);
|
||||
ctx.moveTo(PAD.left, y);
|
||||
ctx.lineTo(w - PAD.right, y);
|
||||
ctx.strokeStyle = AMBER;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
}
|
||||
|
||||
// Average dashed line
|
||||
if (showAverage && data.length > 1) {
|
||||
const avgY = toY(avg);
|
||||
if (avgY >= PAD.top && avgY <= PAD.top + plotH) {
|
||||
ctx.beginPath();
|
||||
ctx.setLineDash([3, 3]);
|
||||
ctx.moveTo(PAD.left, avgY);
|
||||
ctx.lineTo(w - PAD.right, avgY);
|
||||
ctx.strokeStyle = "rgba(148, 163, 184, 0.5)";
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover crosshair + dot
|
||||
if (hoverIndex !== null && hoverIndex >= 0 && hoverIndex < data.length) {
|
||||
const hx = toX(hoverIndex);
|
||||
const hy = toY(data[hoverIndex]);
|
||||
|
||||
// Vertical line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(hx, PAD.top);
|
||||
ctx.lineTo(hx, PAD.top + plotH);
|
||||
ctx.strokeStyle = "rgba(148, 163, 184, 0.4)";
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
|
||||
// Dot
|
||||
const dotColor = hasThreshold && data[hoverIndex] >= threshold ? AMBER : color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(hx, hy, 3.5, 0, Math.PI * 2);
|
||||
ctx.fillStyle = dotColor;
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(hx, hy, 2, 0, Math.PI * 2);
|
||||
ctx.fillStyle = "#0f172a";
|
||||
ctx.fill();
|
||||
}
|
||||
}, [data, propWidth, propHeight, color, threshold, showArea, showAverage, formatAverage, hoverIndex, dims.w]);
|
||||
|
||||
// Mouse tracking
|
||||
const handleMouseMove = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (data.length === 0) return;
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const plotW = dims.w - PAD.left - PAD.right;
|
||||
const xStep = data.length > 1 ? plotW / (data.length - 1) : plotW;
|
||||
const idx = Math.round((mouseX - PAD.left) / xStep);
|
||||
const clamped = Math.max(0, Math.min(data.length - 1, idx));
|
||||
setHoverIndex(clamped);
|
||||
}, [data.length, dims.w]);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoverIndex(null);
|
||||
}, []);
|
||||
|
||||
// ResizeObserver for responsive width — triggers re-draw when container resizes
|
||||
useEffect(() => {
|
||||
if (propWidth) return;
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
if (entry) {
|
||||
const w = Math.floor(entry.contentRect.width);
|
||||
if (w > 0) setDims((prev) => prev.w !== w ? { ...prev, w } : prev);
|
||||
}
|
||||
});
|
||||
observer.observe(container);
|
||||
return () => observer.disconnect();
|
||||
}, [propWidth]);
|
||||
|
||||
// Tooltip content
|
||||
const tooltip = hoverIndex !== null && hoverIndex >= 0 && hoverIndex < data.length
|
||||
? {
|
||||
value: (() => {
|
||||
if (hoverValues && hoverValues[hoverIndex] !== undefined) {
|
||||
return formatHoverValue ? formatHoverValue(hoverValues[hoverIndex]) : `${hoverValues[hoverIndex].toFixed(1)}`;
|
||||
}
|
||||
return formatValue ? formatValue(data[hoverIndex]) : `${data[hoverIndex].toFixed(1)}%`;
|
||||
})(),
|
||||
time: timestamps && timestamps[hoverIndex] ? formatDateTime(timestamps[hoverIndex]) : null,
|
||||
x: PAD.left + (data.length > 1 ? (dims.w - PAD.left - PAD.right) / (data.length - 1) : 0) * hoverIndex,
|
||||
}
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={`relative ${className || ""}`}>
|
||||
<div className="overflow-hidden rounded-lg">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className="cursor-crosshair"
|
||||
/>
|
||||
</div>
|
||||
{/* Tooltip — below the chart */}
|
||||
{tooltip && (
|
||||
<div
|
||||
className="absolute pointer-events-none z-10"
|
||||
style={{
|
||||
left: `${Math.max(45, Math.min(tooltip.x, dims.w - 45))}px`,
|
||||
bottom: "-22px",
|
||||
transform: "translateX(-50%)",
|
||||
}}
|
||||
>
|
||||
<div className="bg-slate-700 border border-slate-600 rounded px-1.5 py-0.5 shadow-lg whitespace-nowrap flex items-center gap-1.5">
|
||||
<span className="text-[10px] font-mono font-semibold" style={{ color }}>{tooltip.value}</span>
|
||||
{tooltip.time && (
|
||||
<span className="text-[9px] text-slate-400 font-mono">{tooltip.time}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user