// Trade Axis — shared visual components (logo, chart, panels)
// NOTE: Global React; exports via window at bottom.
const { useState, useEffect, useRef, useMemo } = React;
/* ---------- Logo mark (inspired by original) ---------- */
function LogoMark({ size = 28 }) {
return (
);
}
function Logo() {
return (
Trade Axis
);
}
/* ---------- Live candles chart ---------- */
// Generates a deterministic candle series that animates subtly
function useCandles(count = 40, seed = 7) {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick((t) => t + 1), 1400);
return () => clearInterval(id);
}, []);
return useMemo(() => {
// simple LCG for deterministic "market"
let s = seed + tick;
const rnd = () => {
s = (s * 1103515245 + 12345) & 0x7fffffff;
return s / 0x7fffffff;
};
const candles = [];
let price = 100;
for (let i = 0; i < count; i++) {
const drift = (rnd() - 0.48) * 2.5;
const open = price;
const close = Math.max(50, open + drift);
const high = Math.max(open, close) + rnd() * 1.2;
const low = Math.min(open, close) - rnd() * 1.2;
candles.push({ open, close, high, low });
price = close;
}
return candles;
}, [tick, count, seed]);
}
function LiveChart({ width = 640, height = 320, symbol = "XAUUSD" }) {
const candles = useCandles(48, 11);
const max = Math.max(...candles.map(c => c.high));
const min = Math.min(...candles.map(c => c.low));
const pad = 20;
const w = width - pad * 2;
const h = height - pad * 2;
const cw = w / candles.length;
const y = (v) => pad + h - ((v - min) / (max - min || 1)) * h;
const last = candles[candles.length - 1];
const prev = candles[candles.length - 2] || last;
const bid = (4834 + last.close / 100).toFixed(2);
const ask = (4835 + last.close / 100).toFixed(2);
const delta = ((last.close - prev.close)).toFixed(2);
return (
);
}
/* ---------- Mini sparkline equity curve ---------- */
function Sparkline({ width = 260, height = 70, trend = "up", seed = 3 }) {
const pts = useMemo(() => {
let s = seed;
const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
const n = 40;
const arr = [];
let v = 50;
for (let i = 0; i < n; i++) {
const drift = (rnd() - (trend === "up" ? 0.35 : 0.65)) * 5;
v = Math.max(10, Math.min(90, v + drift));
arr.push(v);
}
return arr;
}, [trend, seed]);
const max = Math.max(...pts), min = Math.min(...pts);
const path = pts.map((p, i) => {
const x = (i / (pts.length - 1)) * width;
const y = height - ((p - min) / (max - min || 1)) * (height - 6) - 3;
return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`;
}).join(" ");
const color = trend === "up" ? "var(--ta-green)" : "var(--ta-red)";
return (
);
}
/* ---------- Status pill ---------- */
function StatusPill({ kind = "active", label }) {
const color = kind === "active" ? "var(--ta-green)" : "var(--ta-red)";
return (
{label}
);
}
/* ---------- Floating live number ---------- */
function LiveNumber({ base = 978.54, swing = 6, decimals = 2, prefix = "", suffix = "" }) {
const [v, setV] = useState(base);
useEffect(() => {
const id = setInterval(() => {
setV(base + (Math.random() - 0.5) * swing);
}, 1800);
return () => clearInterval(id);
}, [base, swing]);
return {prefix}{v.toFixed(decimals)}{suffix};
}
Object.assign(window, { LogoMark, Logo, LiveChart, Sparkline, StatusPill, LiveNumber, useCandles });