p1otek/btc-trading
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
DiTus
2026-03-03 23:13:03 +01:00
parent 9883d1bea9
commit 35ebb0ae87
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/dashboard/static/js/ui/strategy-panel.js
View File

@ -499,9 +499,9 @@ function displayResults(trades, equityData, config, endPrice, avgPriceData, posS
layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } },
rightPriceScale: { borderColor: '#2a2e39', autoScale: true },
timeScale: { borderColor: '#2a2e39', visible: false },
handleScroll: false,
handleScale: false
timeScale: { borderColor: '#2a2e39', visible: true, timeVisible: true, secondsVisible: false },
handleScroll: true,
handleScale: true
});
equitySeries = equityChart.addSeries(LightweightCharts.AreaSeries, {
@ -523,9 +523,9 @@ function displayResults(trades, equityData, config, endPrice, avgPriceData, posS
layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } },
rightPriceScale: { borderColor: '#2a2e39', autoScale: true },
timeScale: { borderColor: '#2a2e39', visible: false },
handleScroll: false,
handleScale: false
timeScale: { borderColor: '#2a2e39', visible: true, timeVisible: true, secondsVisible: false },
handleScroll: true,
handleScale: true
});
posSeries = posSizeChart.addSeries(LightweightCharts.AreaSeries, {
@ -541,6 +541,22 @@ function displayResults(trades, equityData, config, endPrice, avgPriceData, posS
const label = document.getElementById('posSizeLabel');
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);