{label}
{value}
{change !== undefined && (
= 0 ? QT.green : QT.red, marginTop: 4 }}>
{qtSign(change)}{qtFmt(Math.abs(change), 2)}%
)}
);
// Sparkline / equity curve — version non interactive (cartes par-compte, etc.)
const QTSpark = ({ data, color = QT.indigo, height = 60, fill = true }) => {
if (!data || data.length < 2) {
return Pas assez de données.
;
}
const values = points.map(p => p.value);
const min = Math.min(...values), max = Math.max(...values);
const range = max - min || 1;
const w = 100, h = height;
// Abscisses proportionnelles au temps quand les dates sont connues
// (sinon la courbe s'arrête visuellement au dernier trade et les
// périodes creuses sont compressées) ; repli sur l'index sinon.
const timeScaled = points.every(p => p.date);
let xs;
if (timeScaled) {
const t0 = new Date(points[0].date).getTime();
const t1 = new Date(points[points.length - 1].date).getTime();
const span = (t1 - t0) || 1;
xs = points.map(p => ((new Date(p.date).getTime() - t0) / span) * w);
} else {
xs = points.map((_, i) => (i / (points.length - 1)) * w);
}
const xy = points.map((p, i) => ({
x: xs[i],
y: h - ((p.value - min) / range) * h,
p,
}));
const polyline = xy.map(pt => `${pt.x},${pt.y}`).join(" ");
const area = `0,${h} ${polyline} ${w},${h}`;
const onMove = (e) => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const xPct = (e.clientX - rect.left) / rect.width;
const xTarget = Math.max(0, Math.min(w, xPct * w));
// Point le plus proche en abscisse (les points ne sont plus équidistants)
let idx = 0;
for (let i = 1; i < xy.length; i++) {
if (Math.abs(xy[i].x - xTarget) < Math.abs(xy[idx].x - xTarget)) idx = i;
}
setHover({ idx, pixelX: e.clientX - rect.left, pixelY: rect.height * (xy[idx].y / h) });
};
const hoverPt = hover ? xy[hover.idx] : null;
return (
setHover(null)}
style={{ position: "relative", width: "100%", height, cursor: "crosshair" }}>
{fill && }
{hoverPt && (
{fmt(hoverPt.p.value)}
{hoverPt.p.date && (
{new Date(hoverPt.p.date).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric" })}
)}
)}
{/* Bandeau démo (item 15) */}
{demoCount > 0 && !demoBannerDismissed && (
Vous avez encore {demoCount} trades de démo sur votre compte.
Une fois ton vrai broker connecté, tu peux les supprimer pour ne garder que tes vrais trades.
{demoDeleting ? "SUPPRESSION…" : "SUPPRIMER LES TRADES DÉMO"}
setDemoBannerDismissed(true)} title="Fermer" style={{
background: "transparent", color: QT.textDim, border: `1px solid ${QT.border}`,
borderRadius: 3, padding: "6px 8px", cursor: "pointer",
}}>
)}
{/* Alerte coupe-circuit : perte du jour au-delà de la limite réglée */}
{dailyLossBreached && (
⚠ LIMITE DE PERTE JOURNALIÈRE DÉPASSÉE
P&L du jour {qtSign(todayStats.pnl)}{qtFmt(Math.abs(todayStats.pnl))} CHF — limite réglée à -{qtFmt(dailyLossLimit)} CHF (Paramètres → Gestion du risque).
)}
{/* Ligne KPI (réelle uniquement) */}
DRAWDOWN MAX
{qtFmt(Math.abs(tot.maxDD), 1)}%
{kpis ? "live" : "démo"}
{/* Equity chart */}
{periods.map(p => (
setPeriod(p)} style={{
padding: "2px 8px", fontSize: 9, letterSpacing: 1,
color: p === period ? QT.indigo : QT.textMute,
background: p === period ? QT.indigoSoft : "transparent",
border: "none", borderRadius: 3, cursor: "pointer",
fontFamily: QT.mono, fontWeight: 600,
}}>{p}
))}
}>
{/* Axe Y */}
{yAxisLabels.map((y, i) => {y} )}
{/* Grille */}
{[0, 25, 50, 75, 100].map(y => (
{equityPoints.length > 1 ? (
`${qtSign(v)}${qtFmt(Math.abs(v))} CHF`}/>
) : (
{loaded ? "AUCUN TRADE ENREGISTRÉ" : "CHARGEMENT…"}
)}
{/* Axe X */}
{(xAxisLabels.length === 5 ? xAxisLabels : ["—","—","—","—","—"]).map((l, i) => {l} )}