/* TradeDetail — slides over the right column (chart + firing log), perfectly aligned. */ function TradeDetail({ trade, onClose, detailOverride }) { const NT = window.NitroTraderDesignSystem_95e598; const [shown, setShown] = React.useState(false); const [detail, setDetail] = React.useState(null); // { samples, events } — lazy-loaded const [full, setFull] = React.useState(false); // chart: during-trade (default) vs full tape (past close) const [fullSamples, setFullSamples] = React.useState(null); // lazy-loaded only when "full tape" is clicked const [hover, setHover] = React.useState(null); // { idx, w } for the chart crosshair/tooltip const panelRef = React.useRef(null); React.useEffect(() => { const r = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(r); }, []); React.useEffect(() => { if (window.lucide) window.lucide.createIcons({ attrs: { "stroke-width": 1.75 } }); }); // Pull the real price path + action log for this trade when the drawer opens. const tradeId = trade && trade.id; React.useEffect(() => { let alive = true; setDetail(null); // null = still loading (so we never flash a fake chart) if (detailOverride) { setDetail(detailOverride); // replay: render the provided path + events, no fetch } else if (window.NT_TRADE_DETAIL && tradeId != null) { window.NT_TRADE_DETAIL(tradeId).then((d) => { if (alive) setDetail(d || { samples: [], events: [] }); }); } else { setDetail({ samples: [], events: [] }); // nothing to fetch -> "no data", not loading forever } return () => { alive = false; }; }, [tradeId, detailOverride]); // lazy-load the full tape only when the user asks for it React.useEffect(() => { if (!full || fullSamples !== null || detailOverride || !window.NT_TRADE_FULL || tradeId == null) return; let alive = true; window.NT_TRADE_FULL(tradeId).then((s) => { if (alive) setFullSamples(s || []); }); return () => { alive = false; }; }, [full, tradeId]); if (!trade) return null; const tr = trade; const up = tr.pnl > 0, flat = tr.pnl === 0; const c = up ? "var(--profit)" : flat ? "var(--breakeven)" : "var(--loss)"; const money = (n) => (n > 0 ? "+$" + n.toFixed(2) : n < 0 ? "\u2212$" + Math.abs(n).toFixed(2) : "$0.00"); const pct = (n) => (n > 0 ? "+" : n < 0 ? "\u2212" : "") + Math.abs(n).toFixed(1) + "%"; const capital = (tr.entry * tr.qty * 100).toFixed(0); const exitNum = tr.exit === null ? null : parseFloat(String(tr.exit)); const close = () => { setShown(false); setTimeout(onClose, 200); }; // close when clicking anywhere outside the panel (but let a click on another // trade row switch the open trade instead of closing). React.useEffect(() => { const onDown = (e) => { const t = e.target; if (panelRef.current && panelRef.current.contains(t)) return; if (t && t.closest && t.closest(".nt-trow")) return; close(); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, []); const Field = ({ label, value, color }) => (
{label} {value}
); // ----- chart: ONLY the REAL recorded price path. While the fetch is in flight we // show a loading skeleton (never a fake curve); if it finishes with no path, a note. const pw = 392, ph = 64, padX = 10, padTop = 8, padBot = 8; const loading = full ? (fullSamples === null) : (detail === null); const samples = full ? (fullSamples || []) : ((detail && detail.samples) || []); const events = (detail && detail.events) || []; const hasReal = samples.length > 1; const Tms = (iso) => new Date(iso).getTime(); let linePath = "", marks = [], entryY = null, pts = []; if (hasReal) { // Anchor the during-trade line to the real entry/exit fills so it spans exactly // entry -> exit: the raw tick tape starts a couple seconds after the entry fill and // ends just before the exit fill, which left the entry/exit dots floating off the ends. let plot = samples; if (!full && events.length) { const entryEv = events.find((e) => e.type === "entry" && e.price != null); const exitEv = events.slice().reverse().find((e) => e.type !== "entry" && e.type !== "stop_set" && e.price != null); plot = samples.slice(); if (entryEv && Tms(entryEv.ts) <= Tms(plot[0].ts)) plot.unshift({ ts: entryEv.ts, price: +entryEv.price }); if (exitEv && Tms(exitEv.ts) >= Tms(plot[plot.length - 1].ts)) plot.push({ ts: exitEv.ts, price: +exitEv.price }); } const tMin = Tms(plot[0].ts), tMax = Tms(plot[plot.length - 1].ts); const tSpan = (tMax - tMin) || 1; let pLo = Infinity, pHi = -Infinity; plot.forEach((s) => { const v = +s.price; if (v < pLo) pLo = v; if (v > pHi) pHi = v; }); pLo = Math.min(pLo, tr.entry); pHi = Math.max(pHi, tr.entry); const pSpan = (pHi - pLo) || 1; const X = (iso) => padX + ((Tms(iso) - tMin) / tSpan) * (pw - 2 * padX); const Y = (v) => padTop + (1 - (+v - pLo) / pSpan) * (ph - padTop - padBot); linePath = plot.map((s, i) => (i ? "L" : "M") + X(s.ts).toFixed(1) + " " + Y(s.price).toFixed(1)).join(" "); entryY = Y(tr.entry); pts = plot.map((s) => ({ x: X(s.ts), y: Y(s.price), price: +s.price, ts: s.ts, gain: (+s.price / tr.entry - 1) * 100 })); // place each event dot ON the price line (interpolate the line's y at the dot's x) // so entry / exit / trim markers always sit on the curve instead of floating. const yAt = (xm) => { if (xm <= pts[0].x) return pts[0].y; if (xm >= pts[pts.length - 1].x) return pts[pts.length - 1].y; for (let i = 1; i < pts.length; i++) { if (pts[i].x >= xm) { const a = pts[i - 1], b = pts[i]; return a.y + (xm - a.x) / ((b.x - a.x) || 1) * (b.y - a.y); } } return pts[pts.length - 1].y; }; const colorOf = (t) => t === "trim" ? "var(--profit)" : t === "stop" ? "var(--loss)" : t === "entry" ? "var(--text-secondary)" : "var(--breakeven)"; marks = events.filter((e) => e.type !== "stop_set" && e.price != null).map((e) => { const xm = Math.max(padX, Math.min(pw - padX, X(e.ts))); return { x: xm, y: yAt(xm), c: colorOf(e.type), label: e.type + (e.qty ? " " + e.qty : "") + " @ $" + (+e.price).toFixed(2) }; }); } // ----- "what happened": the action log, newest update on top ----- const fmtT = (iso) => { try { const tz = (window.NT_DATA && window.NT_DATA.marketHours && window.NT_DATA.marketHours.display_tz) || "Europe/Amsterdam"; return new Intl.DateTimeFormat("en-GB", { timeZone: tz, hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }).format(new Date(iso)); } catch (e) { return String(iso).slice(11, 19); } }; const describe = (e) => { const p = e.price != null ? "$" + (+e.price).toFixed(2) : ""; const n = (e.note || "").toLowerCase(); const why = e.note ? " · " + e.note : ""; // the real trigger (alert phrase / rule) switch (e.type) { case "entry": return { label: "Entry · bought " + e.qty, at: p, src: "alert" }; case "trim": return { label: "Partial · sold " + e.qty + why, at: p, src: "alert" }; case "stop_set": if (n.indexOf("breakeven") >= 0) return { label: "Stop → breakeven", at: p, src: "rule" }; if (n.indexOf("trail") >= 0) return { label: "Trail stop → " + p, at: "", src: "rule" }; return { label: "Stop set" + (e.note ? " (" + e.note + ")" : ""), at: p, src: "rule" }; case "stop": return { label: "Stopped out · sold " + e.qty, at: p, src: "rule" }; case "close": return { label: "Closed · sold " + e.qty + why, at: p, src: "alert" }; case "take_half": return { label: "Took half · sold " + e.qty + why, at: p, src: "rule" }; case "take_profit": return { label: "Take-profit · sold " + e.qty + why, at: p, src: "rule" }; case "target": return { label: "Target hit · sold " + e.qty + why, at: p, src: "rule" }; case "eod": return { label: "EOD flatten · sold " + e.qty, at: p, src: "rule" }; default: return { label: e.type + (e.qty ? " " + e.qty : "") + why, at: p, src: "rule" }; } }; const timeline = events.slice().reverse(); // newest first return (
{/* header */}
{tr.tk} {tr.strike} ×{tr.qty}
{tr.status === "live" ? "unrealized p&l" : "realized p&l"}
{money(tr.pnl)} {pct(tr.pct)}
CONTRACT PRICE {!detailOverride && tradeId != null && ( )} {tr.t.slice(0, 5)} → {tr.close.slice(0, 5)}
{loading ? (
) : !hasReal ? (
No price path recorded for this trade
) : (
{ const rect = e.currentTarget.getBoundingClientRect(); if (!rect.width) return; const vbX = (e.clientX - rect.left) / rect.width * pw; let best = 0, bd = Infinity; for (let i = 0; i < pts.length; i++) { const d = Math.abs(pts[i].x - vbX); if (d < bd) { bd = d; best = i; } } setHover({ idx: best, w: rect.width }); } : undefined} onMouseLeave={() => setHover(null)}> {entryY != null && ( )} {marks.map((m, i) => ( {m.label ? {m.label} : null} ))} {hover && pts[hover.idx] && ( )} {hover && pts[hover.idx] && (() => { const g = pts[hover.idx].gain; const gc = g > 0 ? "var(--profit)" : g < 0 ? "var(--loss)" : "var(--breakeven)"; const left = Math.max(42, Math.min(pts[hover.idx].x / pw * hover.w, hover.w - 42)); return (
{(g > 0 ? "+" : g < 0 ? "−" : "") + Math.abs(g).toFixed(1) + "%"} ${pts[hover.idx].price.toFixed(2)} · {fmtT(pts[hover.idx].ts)}
); })()}
)}
{tr.stopped && (
STOPPED OUT
)}
Triggered by
{tr.trigger.msg}
{timeline.length > 0 && (
What happened alert rule
{timeline.map((e, i) => { const d = describe(e); const isAlert = d.src === "alert"; return (
{fmtT(e.ts)} {d.label} {d.at ? {d.at} : null}
); })}
)}
); } Object.assign(window, { TradeDetail });