940 lines
38 KiB
JavaScript
940 lines
38 KiB
JavaScript
|
/**
|
|||
|
|
* Orderflow Trading Terminal — Simplified
|
|||
|
|
* Full-screen chart with info overlay + Scanner sidebar
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// State
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
const state = {
|
|||
|
|
ws: null,
|
|||
|
|
activeSymbol: null,
|
|||
|
|
instruments: [],
|
|||
|
|
priceChart: null,
|
|||
|
|
candleSeries: null,
|
|||
|
|
vpLines: [],
|
|||
|
|
tradeLines: [],
|
|||
|
|
signals: [],
|
|||
|
|
markers: [],
|
|||
|
|
reconnectTimer: null,
|
|||
|
|
reconnectDelay: 1000,
|
|||
|
|
timeframe: 60,
|
|||
|
|
range: 86400,
|
|||
|
|
chartType: 'candles',
|
|||
|
|
_candleBucket: null,
|
|||
|
|
_deltaCumulative: null,
|
|||
|
|
_biasData: {},
|
|||
|
|
_vpData: {},
|
|||
|
|
_strategyData: {},
|
|||
|
|
_microData: {},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Asset class grouping
|
|||
|
|
const ASSET_GROUPS = {
|
|||
|
|
'Forex': ['EURUSD','GBPUSD','USDJPY','AUDUSD','USDCAD','USDCHF','NZDUSD','EURGBP','EURJPY','GBPJPY'],
|
|||
|
|
'Metals': ['XAUUSDT','XAGUSD'],
|
|||
|
|
'Indices': ['NAS100USDT','SP500','DJ30','DAX40','UK100'],
|
|||
|
|
'Crypto': ['BTCUSDT','ETHUSDT','SOLUSDT','XRPUSDT','BNBUSDT'],
|
|||
|
|
'Stocks': ['AAPL','TSLA','AMZN','MSFT','NVDA','META','GOOGL'],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Initialization
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|||
|
|
await fetchInstruments();
|
|||
|
|
initControls();
|
|||
|
|
connectWebSocket();
|
|||
|
|
|
|||
|
|
setInterval(() => refreshFastData(), 1000);
|
|||
|
|
setInterval(() => refreshSlowData(), 5000);
|
|||
|
|
refreshScannerLoop();
|
|||
|
|
setInterval(() => refreshScannerLoop(), 5000);
|
|||
|
|
|
|||
|
|
window.addEventListener('resize', handleResize);
|
|||
|
|
updatePriceDisplay(null, null);
|
|||
|
|
updateScanner([]);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Controls
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function initControls() {
|
|||
|
|
document.querySelectorAll('.tf-btn').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
document.querySelectorAll('.tf-btn').forEach(b => b.classList.remove('active'));
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
state.timeframe = parseInt(btn.dataset.tf);
|
|||
|
|
if (state.activeSymbol) loadSymbolData(state.activeSymbol);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.querySelectorAll('.range-btn').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
state.range = parseInt(btn.dataset.range);
|
|||
|
|
if (state.activeSymbol) loadSymbolData(state.activeSymbol);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.getElementById('symbolSelect').addEventListener('change', (e) => {
|
|||
|
|
switchInstrument(e.target.value);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.querySelectorAll('.chart-btn').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
document.querySelectorAll('.chart-btn').forEach(b => b.classList.remove('active'));
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
state.chartType = btn.dataset.chart;
|
|||
|
|
switchChartType(state.chartType);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Instruments
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
async function fetchInstruments() {
|
|||
|
|
try {
|
|||
|
|
const resp = await fetch('/api/instruments');
|
|||
|
|
const data = await resp.json();
|
|||
|
|
state.instruments = Array.isArray(data) ? data : [];
|
|||
|
|
} catch (e) {
|
|||
|
|
state.instruments = [];
|
|||
|
|
}
|
|||
|
|
renderInstrumentDropdown();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderInstrumentDropdown() {
|
|||
|
|
const select = document.getElementById('symbolSelect');
|
|||
|
|
select.innerHTML = '';
|
|||
|
|
|
|||
|
|
const placeholder = document.createElement('option');
|
|||
|
|
placeholder.value = '';
|
|||
|
|
placeholder.textContent = '— Select pair —';
|
|||
|
|
placeholder.disabled = true;
|
|||
|
|
placeholder.selected = !state.activeSymbol;
|
|||
|
|
select.appendChild(placeholder);
|
|||
|
|
|
|||
|
|
for (const [groupName, symbols] of Object.entries(ASSET_GROUPS)) {
|
|||
|
|
const group = document.createElement('optgroup');
|
|||
|
|
group.label = groupName;
|
|||
|
|
symbols.forEach(sym => {
|
|||
|
|
const opt = document.createElement('option');
|
|||
|
|
opt.value = sym;
|
|||
|
|
opt.textContent = sym;
|
|||
|
|
group.appendChild(opt);
|
|||
|
|
});
|
|||
|
|
if (group.children.length > 0) select.appendChild(group);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (state.activeSymbol) select.value = state.activeSymbol;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Data Refresh
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
async function refreshFastData() {
|
|||
|
|
if (!state.activeSymbol) return;
|
|||
|
|
const sym = state.activeSymbol;
|
|||
|
|
const tf = state.timeframe;
|
|||
|
|
const range = state.range;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const [candles, delta, micro] = await Promise.all([
|
|||
|
|
fetchJSON(`/api/candles/${sym}?tf=${tf}&range=${range}`),
|
|||
|
|
fetchJSON(`/api/delta/${sym}?tf=${tf}&range=${range}`),
|
|||
|
|
fetchJSON(`/api/microstructure/${sym}`),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
if (candles && candles.length > 0 && state.candleSeries) {
|
|||
|
|
state.candleSeries.setData(mapCandleData(candles));
|
|||
|
|
const last = candles[candles.length - 1];
|
|||
|
|
updatePriceDisplay(last.close, last.delta);
|
|||
|
|
state._candleBucket = {
|
|||
|
|
time: last.time, open: last.open, high: last.high,
|
|||
|
|
low: last.low, close: last.close,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (delta && delta.length > 0) {
|
|||
|
|
state._deltaCumulative = delta[delta.length - 1].value;
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (micro) {
|
|||
|
|
state._microData = micro;
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
} catch (e) { /* silent */ }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function refreshScannerLoop() {
|
|||
|
|
try {
|
|||
|
|
const scanner = await fetchJSON('/api/scanner');
|
|||
|
|
if (scanner) updateScanner(scanner);
|
|||
|
|
} catch (e) { /* silent */ }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function refreshSlowData() {
|
|||
|
|
if (!state.activeSymbol) return;
|
|||
|
|
const sym = state.activeSymbol;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const [strategy, vps, signals, bias] = await Promise.all([
|
|||
|
|
fetchJSON(`/api/strategy-status/${sym}`),
|
|||
|
|
fetchJSON(`/api/volume-profile/${sym}?range=${state.range}`),
|
|||
|
|
fetchJSON(`/api/signals/${sym}`),
|
|||
|
|
fetchJSON(`/api/bias/${sym}`),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
if (strategy) {
|
|||
|
|
state._strategyData = strategy;
|
|||
|
|
updateTradeLines();
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
if (vps && vps.length > 0) {
|
|||
|
|
state._vpData = vps[0];
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
if (signals && signals.length > 0) {
|
|||
|
|
state.signals = signals;
|
|||
|
|
}
|
|||
|
|
if (bias) {
|
|||
|
|
state._biasData = bias;
|
|||
|
|
updateVPLines(bias);
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
} catch (e) { /* silent */ }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Symbol Loading
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
async function switchInstrument(symbol) {
|
|||
|
|
state.activeSymbol = symbol;
|
|||
|
|
const select = document.getElementById('symbolSelect');
|
|||
|
|
if (select.value !== symbol) select.value = symbol;
|
|||
|
|
|
|||
|
|
const overlay = document.getElementById('waitingOverlay');
|
|||
|
|
if (overlay) overlay.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (!state.priceChart) createPriceChart();
|
|||
|
|
await loadSymbolData(symbol);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadSymbolData(symbol) {
|
|||
|
|
const tf = state.timeframe;
|
|||
|
|
const range = state.range;
|
|||
|
|
state._candleBucket = null;
|
|||
|
|
state._deltaCumulative = null;
|
|||
|
|
|
|||
|
|
const [candles, delta, bias, vps, strategy, signals, micro] = await Promise.all([
|
|||
|
|
fetchJSON(`/api/candles/${symbol}?tf=${tf}&range=${range}`),
|
|||
|
|
fetchJSON(`/api/delta/${symbol}?tf=${tf}&range=${range}`),
|
|||
|
|
fetchJSON(`/api/bias/${symbol}`),
|
|||
|
|
fetchJSON(`/api/volume-profile/${symbol}?range=${range}`),
|
|||
|
|
fetchJSON(`/api/strategy-status/${symbol}`),
|
|||
|
|
fetchJSON(`/api/signals/${symbol}`),
|
|||
|
|
fetchJSON(`/api/microstructure/${symbol}`),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// Price chart
|
|||
|
|
if (candles && candles.length > 0 && state.candleSeries) {
|
|||
|
|
state.candleSeries.setData(mapCandleData(candles));
|
|||
|
|
if (state.chartType === 'baseline' && candles.length > 0) {
|
|||
|
|
state.candleSeries.applyOptions({
|
|||
|
|
baseValue: { type: 'price', price: candles[0].open },
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else if (state.candleSeries) {
|
|||
|
|
state.candleSeries.setData([]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Delta (for overlay)
|
|||
|
|
if (delta && delta.length > 0) {
|
|||
|
|
state._deltaCumulative = delta[delta.length - 1].value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Bias + VP lines
|
|||
|
|
if (bias) {
|
|||
|
|
state._biasData = bias;
|
|||
|
|
updateVPLines(bias);
|
|||
|
|
}
|
|||
|
|
if (vps && vps.length > 0) state._vpData = vps[0];
|
|||
|
|
if (strategy) { state._strategyData = strategy; updateTradeLines(); }
|
|||
|
|
if (signals && signals.length > 0) state.signals = signals;
|
|||
|
|
if (micro) state._microData = micro;
|
|||
|
|
|
|||
|
|
// Price display
|
|||
|
|
if (candles && candles.length > 0) {
|
|||
|
|
const last = candles[candles.length - 1];
|
|||
|
|
updatePriceDisplay(last.close, last.delta);
|
|||
|
|
state._candleBucket = {
|
|||
|
|
time: last.time, open: last.open, high: last.high,
|
|||
|
|
low: last.low, close: last.close,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Chart markers
|
|||
|
|
const markers = await fetchJSON(`/api/markers/${symbol}`);
|
|||
|
|
state.markers = markers || [];
|
|||
|
|
applyMarkers();
|
|||
|
|
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function fetchJSON(url) {
|
|||
|
|
try {
|
|||
|
|
const resp = await fetch(url);
|
|||
|
|
if (!resp.ok) return null;
|
|||
|
|
return await resp.json();
|
|||
|
|
} catch { return null; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// TradingView Lightweight Charts
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function createPriceChart() {
|
|||
|
|
const container = document.getElementById('priceChartContainer');
|
|||
|
|
state.priceChart = LightweightCharts.createChart(container, {
|
|||
|
|
autoSize: true,
|
|||
|
|
layout: {
|
|||
|
|
background: { type: 'solid', color: '#1c2128' },
|
|||
|
|
textColor: '#8b949e',
|
|||
|
|
fontSize: 11,
|
|||
|
|
fontFamily: "'Consolas', monospace",
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
vertLines: { color: 'rgba(48, 54, 61, 0.5)' },
|
|||
|
|
horzLines: { color: 'rgba(48, 54, 61, 0.5)' },
|
|||
|
|
},
|
|||
|
|
crosshair: {
|
|||
|
|
mode: LightweightCharts.CrosshairMode.Normal,
|
|||
|
|
vertLine: { color: 'rgba(88, 166, 255, 0.3)', width: 1 },
|
|||
|
|
horzLine: { color: 'rgba(88, 166, 255, 0.3)', width: 1 },
|
|||
|
|
},
|
|||
|
|
rightPriceScale: {
|
|||
|
|
borderColor: '#30363d',
|
|||
|
|
scaleMargins: { top: 0.1, bottom: 0.1 },
|
|||
|
|
},
|
|||
|
|
timeScale: {
|
|||
|
|
borderColor: '#30363d',
|
|||
|
|
timeVisible: true,
|
|||
|
|
secondsVisible: false,
|
|||
|
|
},
|
|||
|
|
handleScroll: { vertTouchDrag: false },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
state.candleSeries = state.priceChart.addCandlestickSeries({
|
|||
|
|
upColor: '#3fb950',
|
|||
|
|
downColor: '#f85149',
|
|||
|
|
borderUpColor: '#3fb950',
|
|||
|
|
borderDownColor: '#f85149',
|
|||
|
|
wickUpColor: '#3fb950',
|
|||
|
|
wickDownColor: '#f85149',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Chart Type Switching
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function switchChartType(type) {
|
|||
|
|
if (!state.priceChart) return;
|
|||
|
|
if (state.candleSeries) {
|
|||
|
|
state.priceChart.removeSeries(state.candleSeries);
|
|||
|
|
state.candleSeries = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
switch (type) {
|
|||
|
|
case 'line':
|
|||
|
|
state.candleSeries = state.priceChart.addLineSeries({ color: '#58a6ff', lineWidth: 2 });
|
|||
|
|
break;
|
|||
|
|
case 'area':
|
|||
|
|
state.candleSeries = state.priceChart.addAreaSeries({
|
|||
|
|
lineColor: '#58a6ff', topColor: 'rgba(88, 166, 255, 0.25)',
|
|||
|
|
bottomColor: 'rgba(88, 166, 255, 0.02)', lineWidth: 2,
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'bars':
|
|||
|
|
state.candleSeries = state.priceChart.addBarSeries({ upColor: '#3fb950', downColor: '#f85149' });
|
|||
|
|
break;
|
|||
|
|
case 'baseline':
|
|||
|
|
state.candleSeries = state.priceChart.addBaselineSeries({
|
|||
|
|
baseValue: { type: 'price', price: 0 },
|
|||
|
|
topLineColor: '#3fb950', topFillColor1: 'rgba(63, 185, 80, 0.2)',
|
|||
|
|
topFillColor2: 'rgba(63, 185, 80, 0.02)', bottomLineColor: '#f85149',
|
|||
|
|
bottomFillColor1: 'rgba(248, 81, 73, 0.02)', bottomFillColor2: 'rgba(248, 81, 73, 0.2)',
|
|||
|
|
lineWidth: 2,
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
state.candleSeries = state.priceChart.addCandlestickSeries({
|
|||
|
|
upColor: '#3fb950', downColor: '#f85149',
|
|||
|
|
borderUpColor: '#3fb950', borderDownColor: '#f85149',
|
|||
|
|
wickUpColor: '#3fb950', wickDownColor: '#f85149',
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (state.activeSymbol) loadSymbolData(state.activeSymbol);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function mapCandleData(candles) {
|
|||
|
|
const type = state.chartType;
|
|||
|
|
if (type === 'line' || type === 'area' || type === 'baseline') {
|
|||
|
|
return candles.map(c => ({ time: c.time, value: c.close }));
|
|||
|
|
}
|
|||
|
|
return candles.map(c => ({ time: c.time, open: c.open, high: c.high, low: c.low, close: c.close }));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function mapCandleUpdate(bucket) {
|
|||
|
|
const type = state.chartType;
|
|||
|
|
if (type === 'line' || type === 'area' || type === 'baseline') {
|
|||
|
|
return { time: bucket.time, value: bucket.close };
|
|||
|
|
}
|
|||
|
|
return { ...bucket };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Chart Markers
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function signalToMarker(sig) {
|
|||
|
|
const isBuy = (sig.direction === 'buy' || sig.direction === 'long');
|
|||
|
|
const time = Math.floor((sig.timestamp_ms || sig.receivedAt || Date.now()) / 1000);
|
|||
|
|
const sigType = (sig.signals && sig.signals[0] && sig.signals[0].signal_type) || sig.signal_type || '';
|
|||
|
|
const action = sig.action || 'alert_only';
|
|||
|
|
|
|||
|
|
if (action === 'enter') return { time, position: isBuy ? 'belowBar' : 'aboveBar', color: isBuy ? '#00e676' : '#ff1744', shape: 'circle', text: 'ENTRY' };
|
|||
|
|
if (action === 'break_even') return { time, position: 'aboveBar', color: '#42a5f5', shape: 'square', text: 'BE' };
|
|||
|
|
if (action === 'trail') return { time, position: 'aboveBar', color: '#26c6da', shape: 'square', text: 'TRAIL' };
|
|||
|
|
if (action === 'exit') return { time, position: 'aboveBar', color: '#ff1744', shape: 'circle', text: 'EXIT' };
|
|||
|
|
if (action === 'exit_warning') return { time, position: 'aboveBar', color: '#ffeb3b', shape: 'circle', text: 'WARN' };
|
|||
|
|
|
|||
|
|
if (sigType.includes('absorption')) return { time, position: isBuy ? 'belowBar' : 'aboveBar', color: isBuy ? '#26a69a' : '#ef5350', shape: isBuy ? 'arrowUp' : 'arrowDown', text: 'ABS' };
|
|||
|
|
if (sigType.includes('initiative')) return { time, position: isBuy ? 'belowBar' : 'aboveBar', color: isBuy ? '#66bb6a' : '#ffa726', shape: isBuy ? 'arrowUp' : 'arrowDown', text: 'INIT' };
|
|||
|
|
if (sigType.includes('sweep')) return { time, position: 'aboveBar', color: '#ab47bc', shape: 'arrowDown', text: 'SWEEP' };
|
|||
|
|
if (sigType.includes('exhaustion')) return { time, position: 'aboveBar', color: '#ffeb3b', shape: 'circle', text: 'EXHAUST' };
|
|||
|
|
if (sigType.includes('divergence')) return { time, position: 'aboveBar', color: '#ff9800', shape: 'circle', text: 'DIV' };
|
|||
|
|
|
|||
|
|
return { time, position: 'aboveBar', color: '#9e9e9e', shape: 'circle', text: 'SIG' };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyMarkers() {
|
|||
|
|
if (!state.candleSeries) return;
|
|||
|
|
if (state.chartType !== 'candles' && state.chartType !== 'bars') return;
|
|||
|
|
const sorted = [...state.markers].sort((a, b) => a.time - b.time);
|
|||
|
|
state.candleSeries.setMarkers(sorted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// VP Lines on Chart
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function updateVPLines(bias) {
|
|||
|
|
if (!state.candleSeries) return;
|
|||
|
|
|
|||
|
|
state.vpLines.forEach(line => {
|
|||
|
|
try { state.candleSeries.removePriceLine(line); } catch {}
|
|||
|
|
});
|
|||
|
|
state.vpLines = [];
|
|||
|
|
|
|||
|
|
const lineConfigs = [
|
|||
|
|
{ price: bias.poc, title: 'POC', color: '#d29922', style: 0, width: 2 },
|
|||
|
|
{ price: bias.vah, title: 'VAH', color: '#f85149', style: 2, width: 1 },
|
|||
|
|
{ price: bias.val, title: 'VAL', color: '#3fb950', style: 2, width: 1 },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
if (bias.merged_vah) lineConfigs.push({ price: bias.merged_vah, title: 'M-VAH', color: '#f85149', style: 1, width: 1 });
|
|||
|
|
if (bias.merged_val) lineConfigs.push({ price: bias.merged_val, title: 'M-VAL', color: '#3fb950', style: 1, width: 1 });
|
|||
|
|
|
|||
|
|
if (bias.qualified_levels && bias.qualified_levels.length > 0) {
|
|||
|
|
bias.qualified_levels.forEach(lv => {
|
|||
|
|
const c = lv.direction === 'buy' ? '#3fb950' : '#f85149';
|
|||
|
|
const label = `${lv.level_type || 'LV'} ${lv.direction === 'buy' ? '▲' : '▼'}`;
|
|||
|
|
lineConfigs.push({ price: lv.price, title: label, color: c, style: 1, width: 1 });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lineConfigs.forEach(cfg => {
|
|||
|
|
if (cfg.price && cfg.price > 0) {
|
|||
|
|
const line = state.candleSeries.createPriceLine({
|
|||
|
|
price: cfg.price, color: cfg.color, lineWidth: cfg.width || 1,
|
|||
|
|
lineStyle: cfg.style, axisLabelVisible: true, title: cfg.title,
|
|||
|
|
});
|
|||
|
|
state.vpLines.push(line);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Trade Lines (Entry / SL / TP)
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function updateTradeLines() {
|
|||
|
|
if (!state.candleSeries) return;
|
|||
|
|
|
|||
|
|
state.tradeLines.forEach(line => {
|
|||
|
|
try { state.candleSeries.removePriceLine(line); } catch {}
|
|||
|
|
});
|
|||
|
|
state.tradeLines = [];
|
|||
|
|
|
|||
|
|
const strategy = state._strategyData || {};
|
|||
|
|
const trade = strategy.trade || {};
|
|||
|
|
const phase = (strategy.phase || trade.phase || '').toLowerCase();
|
|||
|
|
|
|||
|
|
// Only draw when there's an active trade
|
|||
|
|
if (!phase || phase === 'idle' || phase === 'none' || phase === 'closed' || phase === 'waiting_for_price') return;
|
|||
|
|
|
|||
|
|
const lines = [];
|
|||
|
|
if (trade.entry_price && trade.entry_price > 0) {
|
|||
|
|
lines.push({ price: trade.entry_price, title: '► ENTRY', color: '#58a6ff', style: 0, width: 2 });
|
|||
|
|
}
|
|||
|
|
if (trade.stop_loss && trade.stop_loss > 0) {
|
|||
|
|
lines.push({ price: trade.stop_loss, title: '✕ SL', color: '#f85149', style: 2, width: 2 });
|
|||
|
|
}
|
|||
|
|
if (trade.take_profit && trade.take_profit > 0) {
|
|||
|
|
lines.push({ price: trade.take_profit, title: '✓ TP', color: '#3fb950', style: 2, width: 2 });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lines.forEach(cfg => {
|
|||
|
|
const line = state.candleSeries.createPriceLine({
|
|||
|
|
price: cfg.price, color: cfg.color, lineWidth: cfg.width,
|
|||
|
|
lineStyle: cfg.style, axisLabelVisible: true, title: cfg.title,
|
|||
|
|
});
|
|||
|
|
state.tradeLines.push(line);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Scanner
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
const _SCAN_RANK = {
|
|||
|
|
'IN_TRADE': 100, 'TRAILING': 95, 'BREAK_EVEN': 90,
|
|||
|
|
'ENTRY_READY': 80,
|
|||
|
|
'AT_LEVEL_SCANNING': 60, 'WATCHING': 50,
|
|||
|
|
'WAITING_FOR_PRICE': 20,
|
|||
|
|
'IDLE': 10,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function updateScanner(pairs) {
|
|||
|
|
const feed = document.getElementById('scannerFeed');
|
|||
|
|
const countEl = document.getElementById('scannerCount');
|
|||
|
|
if (!feed || !countEl) return;
|
|||
|
|
|
|||
|
|
pairs = Array.isArray(pairs) ? pairs : [];
|
|||
|
|
countEl.textContent = pairs.length;
|
|||
|
|
|
|||
|
|
if (pairs.length === 0) {
|
|||
|
|
feed.innerHTML = '<div class="scanner-empty">No pairs detected</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pairs.sort((a, b) => {
|
|||
|
|
const ra = _SCAN_RANK[a.overall] || 0;
|
|||
|
|
const rb = _SCAN_RANK[b.overall] || 0;
|
|||
|
|
if (rb !== ra) return rb - ra;
|
|||
|
|
return (b.priority || 0) - (a.priority || 0);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const prevMap = state._prevScannerState || {};
|
|||
|
|
const newMap = {};
|
|||
|
|
|
|||
|
|
feed.innerHTML = '';
|
|||
|
|
pairs.forEach((p, idx) => {
|
|||
|
|
const row = document.createElement('div');
|
|||
|
|
row.className = 'scanner-row';
|
|||
|
|
|
|||
|
|
const overall = p.overall || 'IDLE';
|
|||
|
|
newMap[p.symbol] = overall;
|
|||
|
|
|
|||
|
|
if (overall === 'IN_TRADE' || overall === 'TRAILING' || overall === 'BREAK_EVEN') {
|
|||
|
|
row.classList.add('flash-trade');
|
|||
|
|
} else if (overall === 'ENTRY_READY') {
|
|||
|
|
row.classList.add('flash-ready');
|
|||
|
|
} else if (overall === 'AT_LEVEL_SCANNING' || overall === 'WATCHING') {
|
|||
|
|
row.classList.add('flash-near');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (prevMap[p.symbol] && prevMap[p.symbol] !== overall) {
|
|||
|
|
row.classList.add('scanner-flash-change');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (p.symbol === state.activeSymbol) {
|
|||
|
|
row.classList.add('active-pair');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rankLabel = idx < 3 ? `#${idx + 1}` : '';
|
|||
|
|
|
|||
|
|
let statusColor = 'var(--text-muted)';
|
|||
|
|
let statusBg = 'transparent';
|
|||
|
|
if (overall === 'IN_TRADE' || overall === 'TRAILING' || overall === 'BREAK_EVEN') {
|
|||
|
|
statusColor = 'var(--blue)'; statusBg = 'var(--blue-bg)';
|
|||
|
|
} else if (overall === 'ENTRY_READY') {
|
|||
|
|
statusColor = 'var(--green)'; statusBg = 'var(--green-bg)';
|
|||
|
|
} else if (overall === 'AT_LEVEL_SCANNING' || overall === 'WATCHING') {
|
|||
|
|
statusColor = 'var(--orange)'; statusBg = 'var(--orange-bg)';
|
|||
|
|
} else if (overall === 'WAITING_FOR_PRICE') {
|
|||
|
|
statusColor = 'var(--text-secondary)';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const biasArrow = p.bias_direction === 'buy' ? '▲' : p.bias_direction === 'sell' ? '▼' : '–';
|
|||
|
|
const biasColor = p.bias_direction === 'buy' ? 'var(--green)' : p.bias_direction === 'sell' ? 'var(--red)' : 'var(--text-muted)';
|
|||
|
|
|
|||
|
|
let pips = '';
|
|||
|
|
for (let i = 0; i < (p.steps_total || 6); i++) {
|
|||
|
|
pips += `<span class="scanner-pip${i < p.steps_done ? ' done' : ''}"></span>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const conf = p.bias_confidence || 0;
|
|||
|
|
const confColor = conf >= 70 ? 'var(--green)' : conf >= 50 ? 'var(--orange)' : 'var(--red)';
|
|||
|
|
|
|||
|
|
row.innerHTML = `
|
|||
|
|
${rankLabel ? `<span class="scanner-rank">${rankLabel}</span>` : '<span class="scanner-rank-spacer"></span>'}
|
|||
|
|
<span class="scanner-symbol">${p.symbol}</span>
|
|||
|
|
<span class="scanner-status" style="color:${statusColor};background:${statusBg}">${overall.replace(/_/g, ' ')}</span>
|
|||
|
|
<span class="scanner-conf-bar"><span class="scanner-conf-fill" style="width:${conf}%;background:${confColor}"></span></span>
|
|||
|
|
<span class="scanner-steps">${pips}</span>
|
|||
|
|
<span class="scanner-bias" style="color:${biasColor}">${biasArrow}</span>
|
|||
|
|
<span class="scanner-price">${p.current_price ? p.current_price.toFixed(p.current_price > 100 ? 1 : 4) : '--'}</span>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
row.addEventListener('click', () => switchInstrument(p.symbol));
|
|||
|
|
feed.appendChild(row);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
state._prevScannerState = newMap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Chart Info Overlay
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function updateChartInfoOverlay() {
|
|||
|
|
if (!state.activeSymbol) return;
|
|||
|
|
|
|||
|
|
const topLeft = document.getElementById('chartInfoTopLeft');
|
|||
|
|
const topRight = document.getElementById('chartInfoTopRight');
|
|||
|
|
const bottomLeft = document.getElementById('chartInfoBottomLeft');
|
|||
|
|
const bottomRight = document.getElementById('chartInfoBottomRight');
|
|||
|
|
if (!topLeft) return;
|
|||
|
|
|
|||
|
|
const sym = state.activeSymbol;
|
|||
|
|
const bias = state._biasData || {};
|
|||
|
|
const strategy = state._strategyData || {};
|
|||
|
|
const vp = state._vpData || {};
|
|||
|
|
const micro = state._microData || {};
|
|||
|
|
|
|||
|
|
// ── Top-Left: Symbol + Bias + Strategy + Session ──
|
|||
|
|
const biasDir = bias.direction || 'neutral';
|
|||
|
|
const biasConf = bias.confidence || 0;
|
|||
|
|
const biasArrow = biasDir === 'long' ? '▲' : biasDir === 'short' ? '▼' : '◆';
|
|||
|
|
const biasClass = biasDir === 'long' ? 'long' : biasDir === 'short' ? 'short' : 'neutral';
|
|||
|
|
|
|||
|
|
const overall = (strategy.overall || 'IDLE').replace(/_/g, ' ');
|
|||
|
|
let stratClass = '';
|
|||
|
|
if (overall.includes('ENTRY READY')) stratClass = 'ready';
|
|||
|
|
else if (overall.includes('SCANNING') || overall.includes('WATCHING')) stratClass = 'scanning';
|
|||
|
|
else if (overall.includes('IN TRADE') || overall.includes('TRAILING')) stratClass = 'in-trade';
|
|||
|
|
|
|||
|
|
const tfMap = { 60: '1m', 300: '5m', 900: '15m', 3600: '1H', 14400: '4H', 86400: '1D' };
|
|||
|
|
const tfLabel = tfMap[state.timeframe] || state.timeframe + 's';
|
|||
|
|
|
|||
|
|
const hour = new Date().getUTCHours();
|
|||
|
|
let sessionName = 'Off-Hours';
|
|||
|
|
if (hour >= 0 && hour < 7) sessionName = 'Asia';
|
|||
|
|
else if (hour >= 7 && hour < 12) sessionName = 'London';
|
|||
|
|
else if (hour >= 12 && hour < 16) sessionName = 'NY AM';
|
|||
|
|
else if (hour >= 16 && hour < 21) sessionName = 'NY PM';
|
|||
|
|
|
|||
|
|
topLeft.innerHTML = `
|
|||
|
|
<div class="chart-wm-symbol">${sym} · ${tfLabel}</div>
|
|||
|
|
<div class="chart-bias-badge ${biasClass}">${biasArrow} ${biasDir.toUpperCase()} ${biasConf}%</div>
|
|||
|
|
<div class="chart-strategy-chip ${stratClass}">${overall}</div>
|
|||
|
|
<div class="chart-session-info">${sessionName} Session</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// ── Top-Right: VP levels + qualified levels ──
|
|||
|
|
const poc = vp.poc || bias.poc;
|
|||
|
|
const vah = vp.vah || bias.vah;
|
|||
|
|
const val = vp.val || bias.val;
|
|||
|
|
const shape = vp.shape || bias.profile_shape || '--';
|
|||
|
|
|
|||
|
|
let trHtml = '';
|
|||
|
|
if (poc || vah || val) {
|
|||
|
|
trHtml += `<div class="chart-vp-levels">`;
|
|||
|
|
trHtml += `<div class="chart-vp-row"><span class="cvp-label" style="color:var(--text-muted)">Shape</span><span class="cvp-price" style="color:var(--text-muted)">${shape}</span></div>`;
|
|||
|
|
trHtml += `<div class="chart-vp-row"><span class="cvp-label" style="color:#d29922">POC</span><span class="cvp-price" style="color:#d29922">${poc ? formatPrice(poc) : '--'}</span></div>`;
|
|||
|
|
trHtml += `<div class="chart-vp-row"><span class="cvp-label" style="color:#f85149">VAH</span><span class="cvp-price" style="color:#f85149">${vah ? formatPrice(vah) : '--'}</span></div>`;
|
|||
|
|
trHtml += `<div class="chart-vp-row"><span class="cvp-label" style="color:#3fb950">VAL</span><span class="cvp-price" style="color:#3fb950">${val ? formatPrice(val) : '--'}</span></div>`;
|
|||
|
|
|
|||
|
|
const qLevels = bias.qualified_levels || [];
|
|||
|
|
if (qLevels.length > 0) {
|
|||
|
|
qLevels.slice(0, 3).forEach(lv => {
|
|||
|
|
const lvColor = lv.type === 'resistance' ? '#f85149' : '#3fb950';
|
|||
|
|
trHtml += `<div class="chart-vp-row"><span class="cvp-label" style="color:${lvColor}">${lv.type === 'resistance' ? 'RES' : 'SUP'}</span><span class="cvp-price" style="color:${lvColor}">${formatPrice(lv.price)}</span></div>`;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
trHtml += `</div>`;
|
|||
|
|
}
|
|||
|
|
topRight.innerHTML = trHtml;
|
|||
|
|
|
|||
|
|
// ── Bottom-Left: Delta, confidence, R:R, P&L ──
|
|||
|
|
const rows = [];
|
|||
|
|
if (state._deltaCumulative != null) {
|
|||
|
|
const d = state._deltaCumulative;
|
|||
|
|
const dClass = d >= 0 ? 'bull' : 'bear';
|
|||
|
|
rows.push(`<div class="chart-info-row"><span class="ci-label">DELTA</span><span class="ci-val ${dClass}">Σ ${d >= 0 ? '+' : ''}${d.toFixed(0)}</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (strategy.bias_confidence) {
|
|||
|
|
rows.push(`<div class="chart-info-row"><span class="ci-label">CONF</span><span class="ci-val blue">${strategy.bias_confidence}%</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (strategy.trade && strategy.trade.rr_ratio) {
|
|||
|
|
rows.push(`<div class="chart-info-row"><span class="ci-label">R:R</span><span class="ci-val gold">${strategy.trade.rr_ratio.toFixed(1)}x</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (strategy.trade && strategy.trade.pnl_ticks != null) {
|
|||
|
|
const pnl = strategy.trade.pnl_ticks;
|
|||
|
|
const pClass = pnl >= 0 ? 'bull' : 'bear';
|
|||
|
|
rows.push(`<div class="chart-info-row"><span class="ci-label">P&L</span><span class="ci-val ${pClass}">${pnl >= 0 ? '+' : ''}${pnl.toFixed(1)} ticks</span></div>`);
|
|||
|
|
}
|
|||
|
|
bottomLeft.innerHTML = rows.join('');
|
|||
|
|
|
|||
|
|
// ── Bottom-Right: Microstructure snapshot ──
|
|||
|
|
const brRows = [];
|
|||
|
|
if (micro.spread != null) {
|
|||
|
|
brRows.push(`<div class="chart-info-row"><span class="ci-label">SPREAD</span><span class="ci-val ${micro.spread <= 2 ? 'bull' : 'orange'}">${micro.spread}</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (micro.ob_imbalance != null) {
|
|||
|
|
const imb = micro.ob_imbalance;
|
|||
|
|
const imbClass = imb >= 0.2 ? 'bull' : imb <= -0.2 ? 'bear' : 'neutral';
|
|||
|
|
brRows.push(`<div class="chart-info-row"><span class="ci-label">OB IMB</span><span class="ci-val ${imbClass}">${(imb * 100).toFixed(0)}%</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (micro.volume_ratio != null) {
|
|||
|
|
const vr = micro.volume_ratio;
|
|||
|
|
const vrClass = vr >= 1.5 ? 'orange' : vr >= 1.0 ? 'bull' : 'neutral';
|
|||
|
|
brRows.push(`<div class="chart-info-row"><span class="ci-label">VOL %</span><span class="ci-val ${vrClass}">${(vr * 100).toFixed(0)}%</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (micro.volatility != null) {
|
|||
|
|
brRows.push(`<div class="chart-info-row"><span class="ci-label">VOLA</span><span class="ci-val purple">${micro.volatility.toFixed(2)}</span></div>`);
|
|||
|
|
}
|
|||
|
|
if (bottomRight) bottomRight.innerHTML = brRows.join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Resize
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function handleResize() {
|
|||
|
|
// Price chart uses autoSize — nothing extra needed
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const resizeObserver = new ResizeObserver(() => handleResize());
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const pc = document.getElementById('priceChartContainer');
|
|||
|
|
if (pc) resizeObserver.observe(pc);
|
|||
|
|
}, 100);
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// WebSocket
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function connectWebSocket() {
|
|||
|
|
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|||
|
|
const wsUrl = `${protocol}//${location.host}/ws`;
|
|||
|
|
|
|||
|
|
updateWsStatus('connecting');
|
|||
|
|
state.ws = new WebSocket(wsUrl);
|
|||
|
|
|
|||
|
|
state.ws.onopen = () => {
|
|||
|
|
updateWsStatus('connected');
|
|||
|
|
state.reconnectDelay = 1000;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (state.activeSymbol) loadSymbolData(state.activeSymbol);
|
|||
|
|
}, 2000);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
state.ws.onclose = () => {
|
|||
|
|
updateWsStatus('disconnected');
|
|||
|
|
scheduleReconnect();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
state.ws.onerror = () => {};
|
|||
|
|
|
|||
|
|
state.ws.onmessage = (event) => {
|
|||
|
|
try {
|
|||
|
|
handleMessage(JSON.parse(event.data));
|
|||
|
|
} catch (e) {}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setInterval(() => {
|
|||
|
|
if (state.ws && state.ws.readyState === WebSocket.OPEN) state.ws.send('ping');
|
|||
|
|
}, 30000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scheduleReconnect() {
|
|||
|
|
if (state.reconnectTimer) return;
|
|||
|
|
state.reconnectTimer = setTimeout(() => {
|
|||
|
|
state.reconnectTimer = null;
|
|||
|
|
state.reconnectDelay = Math.min(state.reconnectDelay * 2, 30000);
|
|||
|
|
connectWebSocket();
|
|||
|
|
}, state.reconnectDelay);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateWsStatus(status) {
|
|||
|
|
const el = document.getElementById('wsStatus');
|
|||
|
|
const dot = el.querySelector('.ws-dot');
|
|||
|
|
dot.className = 'ws-dot ' + status;
|
|||
|
|
el.lastChild.textContent = ' ' + status.charAt(0).toUpperCase() + status.slice(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Message Router
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function handleMessage(msg) {
|
|||
|
|
const { channel, symbol, data } = msg;
|
|||
|
|
if (symbol && symbol !== state.activeSymbol) {
|
|||
|
|
if (channel === 'signal') handleSignal(symbol, data);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
switch (channel) {
|
|||
|
|
case 'tick': handleTick(data); break;
|
|||
|
|
case 'candle': handleCandle(data); break;
|
|||
|
|
case 'signal': handleSignal(symbol, data); break;
|
|||
|
|
case 'bias': state._biasData = data; updateVPLines(data); updateChartInfoOverlay(); break;
|
|||
|
|
case 'volume_profile': if (data) { state._vpData = data; updateChartInfoOverlay(); } break;
|
|||
|
|
case 'microstructure': if (data) { state._microData = data; updateChartInfoOverlay(); } break;
|
|||
|
|
case 'delta': handleDelta(data); break;
|
|||
|
|
case 'stats': handleStats(symbol, data); break;
|
|||
|
|
case 'trade_state': fetchJSON(`/api/strategy-status/${state.activeSymbol}`).then(s => { if (s) { state._strategyData = s; updateTradeLines(); updateChartInfoOverlay(); } }); break;
|
|||
|
|
case 'pong': break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// Data Handlers
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function handleTick(data) {
|
|||
|
|
const price = data.price;
|
|||
|
|
updatePriceDisplay(price, null);
|
|||
|
|
|
|||
|
|
if (state.candleSeries && state._candleBucket) {
|
|||
|
|
const b = state._candleBucket;
|
|||
|
|
b.high = Math.max(b.high, price);
|
|||
|
|
b.low = Math.min(b.low, price);
|
|||
|
|
b.close = price;
|
|||
|
|
state.candleSeries.update(mapCandleUpdate(b));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Live delta from ticks
|
|||
|
|
if (state._deltaCumulative != null) {
|
|||
|
|
const tickDelta = data.side === 'buy' ? (data.size || 0) : -(data.size || 0);
|
|||
|
|
if (tickDelta !== 0) {
|
|||
|
|
state._deltaCumulative += tickDelta;
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleCandle(data) {
|
|||
|
|
if (!state.candleSeries) return;
|
|||
|
|
const tfSec = state.timeframe;
|
|||
|
|
const bucketTime = Math.floor((data.time || data.timestamp_ms / 1000) / tfSec) * tfSec;
|
|||
|
|
|
|||
|
|
if (!state._candleBucket || state._candleBucket.time !== bucketTime) {
|
|||
|
|
state._candleBucket = {
|
|||
|
|
time: bucketTime, open: data.open, high: data.high,
|
|||
|
|
low: data.low, close: data.close,
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
const b = state._candleBucket;
|
|||
|
|
b.high = Math.max(b.high, data.high);
|
|||
|
|
b.low = Math.min(b.low, data.low);
|
|||
|
|
b.close = data.close;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.candleSeries.update(mapCandleUpdate(state._candleBucket));
|
|||
|
|
updatePriceDisplay(data.close, data.delta);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleDelta(data) {
|
|||
|
|
const barDelta = data.bar_delta || data.value || 0;
|
|||
|
|
state._deltaCumulative = (state._deltaCumulative || 0) + barDelta;
|
|||
|
|
updateChartInfoOverlay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleSignal(symbol, data) {
|
|||
|
|
state.signals.unshift({ symbol, ...data, receivedAt: Date.now() });
|
|||
|
|
if (state.signals.length > 100) state.signals.pop();
|
|||
|
|
|
|||
|
|
if (symbol === state.activeSymbol) {
|
|||
|
|
const marker = signalToMarker(data);
|
|||
|
|
if (marker) {
|
|||
|
|
state.markers.push(marker);
|
|||
|
|
applyMarkers();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleStats(symbol, data) {
|
|||
|
|
if (symbol === state.activeSymbol || !symbol) {
|
|||
|
|
if (data.ticks !== undefined) document.getElementById('tickCount').textContent = `Ticks: ${formatNumber(data.ticks)}`;
|
|||
|
|
if (data.candles !== undefined) document.getElementById('candleCount').textContent = `Candles: ${formatNumber(data.candles)}`;
|
|||
|
|
}
|
|||
|
|
if (data.data_source) document.getElementById('dataSource').textContent = data.data_source;
|
|||
|
|
document.getElementById('lastUpdate').textContent = `Updated: ${new Date().toLocaleTimeString()}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
// UI Helpers
|
|||
|
|
// ════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function updatePriceDisplay(price, delta) {
|
|||
|
|
const priceEl = document.getElementById('currentPrice');
|
|||
|
|
const deltaEl = document.getElementById('currentDelta');
|
|||
|
|
|
|||
|
|
if (price != null && priceEl) priceEl.textContent = formatPrice(price);
|
|||
|
|
else if (priceEl) priceEl.textContent = '--';
|
|||
|
|
|
|||
|
|
if (delta != null && deltaEl) {
|
|||
|
|
deltaEl.textContent = `Δ ${delta >= 0 ? '+' : ''}${delta.toFixed(1)}`;
|
|||
|
|
deltaEl.className = `panel-delta ${delta >= 0 ? 'positive' : 'negative'}`;
|
|||
|
|
} else if (deltaEl) {
|
|||
|
|
deltaEl.textContent = 'Δ --';
|
|||
|
|
deltaEl.className = 'panel-delta';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatPrice(price) {
|
|||
|
|
if (price == null || price === 0) return '--';
|
|||
|
|
if (price > 1000) return price.toFixed(1);
|
|||
|
|
if (price > 10) return price.toFixed(2);
|
|||
|
|
return price.toFixed(4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatNumber(n) {
|
|||
|
|
if (n == null) return '--';
|
|||
|
|
if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
|
|||
|
|
if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
|
|||
|
|
return n.toString();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Footer clock
|
|||
|
|
setInterval(() => {
|
|||
|
|
const el = document.getElementById('lastUpdate');
|
|||
|
|
if (el) el.textContent = `Updated: ${new Date().toLocaleTimeString()}`;
|
|||
|
|
}, 1000);
|