// Chart mocks — synthetic, hand-tuned visuals that look like real orderflow studies.
// All SVG, no images. Used as product hero shots until user provides real screenshots.
const { useMemo } = React;
// ============== Volume Profile ==============
function VolumeProfileMock({ width = 720, height = 420, palette = 'green' }) {
const acc = palette === 'green' ? '#00E599' : '#4D9CFF';
// Generate candles
const candles = useMemo(() => {
let p = 5825;
const arr = [];
for (let i = 0; i < 60; i++) {
const o = p;
const c = p + (Math.sin(i * 0.4) + (Math.random() - 0.5) * 1.4) * 4;
const h = Math.max(o, c) + Math.random() * 2.5;
const l = Math.min(o, c) - Math.random() * 2.5;
arr.push({ o, h, l, c });
p = c;
}
return arr;
}, []);
const ymin = Math.min(...candles.map(c => c.l)) - 4;
const ymax = Math.max(...candles.map(c => c.h)) + 4;
const yToPx = (v) => 30 + ((ymax - v) / (ymax - ymin)) * (height - 60);
// Volume profile bars
const bins = 28;
const profile = useMemo(() => {
const arr = new Array(bins).fill(0);
candles.forEach(c => {
const mid = (c.h + c.l) / 2;
const idx = Math.floor(((mid - ymin) / (ymax - ymin)) * bins);
const range = c.h - c.l;
arr[Math.max(0, Math.min(bins - 1, idx))] += range * 8 + Math.random() * 30;
});
const max = Math.max(...arr);
return arr.map(v => v / max);
}, [candles]);
const profileX = width - 130;
const profileW = 110;
const pocIdx = profile.indexOf(Math.max(...profile));
const candleW = (profileX - 50) / candles.length;
return (
);
}
// ============== Gradient Map (delta heatmap) ==============
function GradientMapMock({ width = 720, height = 420 }) {
const cols = 60, rows = 18;
const cells = useMemo(() => {
const arr = [];
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
// delta wave pattern
const v = Math.sin(c * 0.18 + r * 0.3) * 0.5 +
Math.cos(c * 0.05 - r * 0.12) * 0.4 +
(Math.random() - 0.5) * 0.4;
arr.push({ r, c, v: Math.max(-1, Math.min(1, v)) });
}
}
return arr;
}, []);
const cw = (width - 100) / cols;
const ch = (height - 60) / rows;
return (
);
}
// ============== Order Book / DOM Ladder ==============
function OrderBookMock({ width = 360, height = 420, rows = 18 }) {
const data = useMemo(() => {
const arr = [];
for (let i = 0; i < rows; i++) {
const isAsk = i < rows / 2;
const distance = isAsk ? (rows/2 - i) : (i - rows/2 + 1);
const size = Math.floor(Math.random() * 800 + 80) * (1 + distance * 0.3);
arr.push({
price: 5832.50 - i * 0.25,
size: Math.floor(size),
isAsk,
});
}
return arr;
}, []);
const maxSize = Math.max(...data.map(d => d.size));
const rowH = (height - 50) / rows;
return (
);
}
// ============== CVD line ==============
function CVDMock({ width = 720, height = 200 }) {
const points = useMemo(() => {
let v = 0;
return Array.from({ length: 80 }, (_, i) => {
v += (Math.random() - 0.45) * 200 + Math.sin(i * 0.3) * 80;
return v;
});
}, []);
const min = Math.min(...points), max = Math.max(...points);
const xStep = (width - 60) / (points.length - 1);
const path = points.map((v, i) => {
const x = 30 + i * xStep;
const y = 30 + ((max - v) / (max - min)) * (height - 60);
return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
}).join(' ');
const last = points[points.length - 1];
const lastY = 30 + ((max - last) / (max - min)) * (height - 60);
return (
);
}
// Make global
Object.assign(window, { VolumeProfileMock, GradientMapMock, OrderBookMock, CVDMock });