feat: enable interactive scrolling and time-scale sync for simulation result charts
This commit is contained in:
@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user