/* ============================================
VELOX — Icons + chart components
============================================ */
// Lucide-style stroke icons. Single component, takes name prop.
const Icon = ({ name, size = 18, stroke = 2 }) => {
const props = {
width: size, height: size, viewBox: "0 0 24 24",
fill: "none", stroke: "currentColor",
strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
};
const paths = {
dashboard: <>,
chart: <>,
options: <>,
positions: <>,
bot: <>,
activity: <>,
list: <>,
history: <>,
backtest: <>,
book: <>,
bell: <>,
search: <>,
sun: <>,
moon: <>,
settings: <>,
plus: <>,
arrowUp: <>,
arrowDown: <>,
play: <>,
pause: <>,
eye: <>,
x: <>,
trend: <>,
shield: <>,
chevronRight:<>,
info: <>,
check: <>,
layers: <>,
refresh: <>,
filter: <>,
download: <>,
lock: <>,
user: <>,
flash: <>,
target: <>,
};
return ;
};
/* ============================================
Sparkline
============================================ */
const Sparkline = ({ data, width = 64, height = 22, color }) => {
if (!data || data.length < 2) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = width / (data.length - 1);
const pts = data.map((v, i) => `${(i * step).toFixed(1)},${(height - ((v - min) / range) * height).toFixed(1)}`).join(" ");
const up = data[data.length - 1] >= data[0];
const c = color || (up ? "var(--up)" : "var(--down)");
return (
);
};
/* ============================================
Area chart (P&L curve)
============================================ */
const AreaChart = ({ data, height = 220, valueKey = "cumul", labelKey = "date" }) => {
if (!data || !data.length) return null;
const W = 800, H = height, pad = { l: 50, r: 12, t: 12, b: 28 };
const xs = data.map((_, i) => i);
const ys = data.map(d => d[valueKey]);
const minY = Math.min(0, ...ys), maxY = Math.max(...ys);
const rangeY = (maxY - minY) || 1;
const sx = i => pad.l + (i / (data.length - 1)) * (W - pad.l - pad.r);
const sy = v => pad.t + (1 - (v - minY) / rangeY) * (H - pad.t - pad.b);
const linePts = data.map((d, i) => `${sx(i)},${sy(d[valueKey])}`).join(" ");
const areaPts = `${sx(0)},${sy(minY)} ${linePts} ${sx(data.length - 1)},${sy(minY)}`;
// grid: 4 horizontal lines
const ticks = 4;
const gridLines = [];
for (let i = 0; i <= ticks; i++) {
const y = pad.t + (i / ticks) * (H - pad.t - pad.b);
const v = maxY - (i / ticks) * rangeY;
gridLines.push({ y, v });
}
const lastUp = ys[ys.length - 1] >= 0;
const stroke = lastUp ? "var(--up)" : "var(--down)";
const fill = lastUp ? "var(--up-soft)" : "var(--down-soft)";
return (
);
};
/* Bar chart for daily P&L */
const BarChart = ({ data, height = 200, valueKey = "pnl" }) => {
if (!data || !data.length) return null;
const W = 800, H = height, pad = { l: 44, r: 8, t: 8, b: 24 };
const ys = data.map(d => d[valueKey]);
const minY = Math.min(0, ...ys), maxY = Math.max(0, ...ys);
const rangeY = (maxY - minY) || 1;
const bw = (W - pad.l - pad.r) / data.length;
const sy = v => pad.t + (1 - (v - minY) / rangeY) * (H - pad.t - pad.b);
const zeroY = sy(0);
return (
);
};
/* Candlestick chart */
const Candlestick = ({ candles, height = 280 }) => {
if (!candles || !candles.length) return null;
const W = 880, H = height, pad = { l: 50, r: 8, t: 8, b: 22 };
const highs = candles.map(c => c.h), lows = candles.map(c => c.l);
const maxY = Math.max(...highs), minY = Math.min(...lows);
const range = (maxY - minY) || 1;
const cw = (W - pad.l - pad.r) / candles.length;
const sy = v => pad.t + (1 - (v - minY) / range) * (H - pad.t - pad.b);
return (
);
};
/* Donut chart */
const Donut = ({ segments, size = 180, thickness = 22 }) => {
const total = segments.reduce((s, x) => s + x.value, 0) || 1;
const r = size / 2 - thickness / 2;
const cx = size / 2, cy = size / 2;
let acc = 0;
return (
);
};
Object.assign(window, { Icon, Sparkline, AreaChart, BarChart, Candlestick, Donut });