feat: enable interactive scrolling and time-scale sync for simulation result charts

This commit is contained in:
DiTus
2026-03-03 23:13:03 +01:00
parent 9883d1bea9
commit 35ebb0ae87

View File

@ -499,9 +499,9 @@ function displayResults(trades, equityData, config, endPrice, avgPriceData, posS
layout: { background: { color: '#131722' }, textColor: '#d1d4dc' }, layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } }, grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } },
rightPriceScale: { borderColor: '#2a2e39', autoScale: true }, rightPriceScale: { borderColor: '#2a2e39', autoScale: true },
timeScale: { borderColor: '#2a2e39', visible: false }, timeScale: { borderColor: '#2a2e39', visible: true, timeVisible: true, secondsVisible: false },
handleScroll: false, handleScroll: true,
handleScale: false handleScale: true
}); });
equitySeries = equityChart.addSeries(LightweightCharts.AreaSeries, { equitySeries = equityChart.addSeries(LightweightCharts.AreaSeries, {
@ -523,9 +523,9 @@ function displayResults(trades, equityData, config, endPrice, avgPriceData, posS
layout: { background: { color: '#131722' }, textColor: '#d1d4dc' }, layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } }, grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } },
rightPriceScale: { borderColor: '#2a2e39', autoScale: true }, rightPriceScale: { borderColor: '#2a2e39', autoScale: true },
timeScale: { borderColor: '#2a2e39', visible: false }, timeScale: { borderColor: '#2a2e39', visible: true, timeVisible: true, secondsVisible: false },
handleScroll: false, handleScroll: true,
handleScale: false handleScale: true
}); });
posSeries = posSizeChart.addSeries(LightweightCharts.AreaSeries, { posSeries = posSizeChart.addSeries(LightweightCharts.AreaSeries, {
@ -541,6 +541,22 @@ function displayResults(trades, equityData, config, endPrice, avgPriceData, posS
const label = document.getElementById('posSizeLabel'); const label = document.getElementById('posSizeLabel');
if (label) label.textContent = 'Position Size (USD)'; if (label) label.textContent = 'Position Size (USD)';
} }
// Sync Time Scales
if (equityChart && posSizeChart) {
let isSyncing = false;
const syncCharts = (source, target) => {
if (isSyncing) return;
isSyncing = true;
const range = source.timeScale().getVisibleRange();
target.timeScale().setVisibleRange(range);
isSyncing = false;
};
equityChart.timeScale().subscribeVisibleTimeRangeChange(() => syncCharts(equityChart, posSizeChart));
posSizeChart.timeScale().subscribeVisibleTimeRangeChange(() => syncCharts(posSizeChart, equityChart));
}
}; };
setTimeout(initCharts, 100); setTimeout(initCharts, 100);