From 9883d1bea90d10d86183bd69c403cbcfe4bb86a0 Mon Sep 17 00:00:00 2001 From: DiTus Date: Tue, 3 Mar 2026 23:07:03 +0100 Subject: [PATCH] feat: enhance strategy simulation with Inverse Perpetual support, effective leverage caps, and advanced charting --- .../dashboard/static/css/indicators-new.css | 27 ++ src/api/dashboard/static/js/ui/chart.js | 23 + .../dashboard/static/js/ui/strategy-panel.js | 459 +++++++++++++----- 3 files changed, 375 insertions(+), 134 deletions(-) diff --git a/src/api/dashboard/static/css/indicators-new.css b/src/api/dashboard/static/css/indicators-new.css index d2f00e7..a67d85d 100644 --- a/src/api/dashboard/static/css/indicators-new.css +++ b/src/api/dashboard/static/css/indicators-new.css @@ -696,4 +696,31 @@ display: flex; gap: 8px; margin-top: 12px; +} + +.chart-toggle-group { + display: flex; + background: var(--tv-hover); + border-radius: 4px; + padding: 2px; +} + +.chart-toggle-group .toggle-btn { + padding: 2px 8px; + font-size: 10px; + border: none; + background: transparent; + color: var(--tv-text-secondary); + cursor: pointer; + border-radius: 3px; + transition: all 0.2s ease; +} + +.chart-toggle-group .toggle-btn.active { + background: var(--tv-border); + color: var(--tv-text); +} + +.chart-toggle-group .toggle-btn:hover:not(.active) { + color: var(--tv-text); } \ No newline at end of file diff --git a/src/api/dashboard/static/js/ui/chart.js b/src/api/dashboard/static/js/ui/chart.js index e4b8cde..1050d85 100644 --- a/src/api/dashboard/static/js/ui/chart.js +++ b/src/api/dashboard/static/js/ui/chart.js @@ -22,6 +22,7 @@ constructor() { this.summarySignal = null; this.lastCandleTimestamp = null; this.simulationMarkers = []; + this.avgPriceSeries = null; this.init(); } @@ -35,6 +36,18 @@ constructor() { this.simulationMarkers = []; this.updateSignalMarkers(); } + + setAvgPriceData(data) { + if (this.avgPriceSeries) { + this.avgPriceSeries.setData(data || []); + } + } + + clearAvgPriceData() { + if (this.avgPriceSeries) { + this.avgPriceSeries.setData([]); + } + } init() { this.createTimeframeButtons(); @@ -128,6 +141,16 @@ constructor() { lastValueVisible: false, priceLineVisible: false, }, 0); + + this.avgPriceSeries = this.chart.addSeries(LightweightCharts.LineSeries, { + color: '#00bcd4', + lineWidth: 1, + lineStyle: LightweightCharts.LineStyle.Solid, + lastValueVisible: true, + priceLineVisible: false, + crosshairMarkerVisible: false, + title: '', + }); this.currentPriceLine = this.candleSeries.createPriceLine({ price: 0, diff --git a/src/api/dashboard/static/js/ui/strategy-panel.js b/src/api/dashboard/static/js/ui/strategy-panel.js index 35297b1..b6c9b9f 100644 --- a/src/api/dashboard/static/js/ui/strategy-panel.js +++ b/src/api/dashboard/static/js/ui/strategy-panel.js @@ -4,6 +4,43 @@ let activeIndicators = []; let simulationResults = null; let equitySeries = null; let equityChart = null; +let posSeries = null; +let posSizeChart = null; + +const STORAGE_KEY = 'ping_pong_settings'; + +function getSavedSettings() { + const saved = localStorage.getItem(STORAGE_KEY); + if (!saved) return null; + try { + return JSON.parse(saved); + } catch (e) { + return null; + } +} + +function saveSettings() { + const settings = { + startDate: document.getElementById('simStartDate').value, + contractType: document.getElementById('simContractType').value, + direction: document.getElementById('simDirection').value, + capital: document.getElementById('simCapital').value, + exchangeLeverage: document.getElementById('simExchangeLeverage').value, + maxEffectiveLeverage: document.getElementById('simMaxEffectiveLeverage').value, + posSize: document.getElementById('simPosSize').value, + tp: document.getElementById('simTP').value + }; + localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); + + const btn = document.getElementById('saveSimSettings'); + const originalText = btn.textContent; + btn.textContent = 'Saved!'; + btn.style.color = '#26a69a'; + setTimeout(() => { + btn.textContent = originalText; + btn.style.color = ''; + }, 2000); +} export function initStrategyPanel() { window.renderStrategyPanel = renderStrategyPanel; @@ -30,6 +67,7 @@ export function renderStrategyPanel() { if (!container) return; activeIndicators = window.getActiveIndicators?.() || []; + const saved = getSavedSettings(); container.innerHTML = `
@@ -39,39 +77,55 @@ export function renderStrategyPanel() {
- +
+
+ + +
+
- +
- - + + +
+ +
+ +
- - + +
- +
- +
+ + +
${renderIndicatorChecklist('open')}
@@ -94,6 +148,7 @@ export function renderStrategyPanel() { `; document.getElementById('runSimulationBtn').addEventListener('click', runSimulation); + document.getElementById('saveSimSettings').addEventListener('click', saveSettings); } function renderIndicatorChecklist(prefix) { @@ -117,9 +172,11 @@ async function runSimulation() { try { const config = { startDate: new Date(document.getElementById('simStartDate').value).getTime() / 1000, + contractType: document.getElementById('simContractType').value, direction: document.getElementById('simDirection').value, capital: parseFloat(document.getElementById('simCapital').value), - leverage: parseFloat(document.getElementById('simLeverage').value), + exchangeLeverage: parseFloat(document.getElementById('simExchangeLeverage').value), + maxEffectiveLeverage: parseFloat(document.getElementById('simMaxEffectiveLeverage').value), posSize: parseFloat(document.getElementById('simPosSize').value), tp: parseFloat(document.getElementById('simTP').value) / 100, openIndicators: Array.from(document.querySelectorAll('.sim-open-check:checked')).map(el => el.dataset.id), @@ -144,55 +201,48 @@ async function runSimulation() { return; } - // Calculate all indicator values and signals for the sim period - const indicatorSignals = {}; // { indicatorId: [signals per candle] } - + // Calculate indicator signals + const indicatorSignals = {}; for (const indId of [...new Set([...config.openIndicators, ...config.closeIndicators])]) { const ind = activeIndicators.find(a => a.id === indId); const signalFunc = getSignalFunction(ind.type); - const results = ind.cachedResults; // Use already calculated results from chart + const results = ind.cachedResults; if (results && signalFunc) { - // Map results to simCandles indices - const simSignals = simCandles.map(candle => { + indicatorSignals[indId] = simCandles.map(candle => { const idx = candles.findIndex(c => c.time === candle.time); if (idx < 1) return null; - - const res = results[idx]; - const prevRes = results[idx-1]; - - // Standardize result format (some indicators return objects, some return single values) - const values = typeof res === 'object' && res !== null ? res : { ma: res }; - const prevValues = typeof prevRes === 'object' && prevRes !== null ? prevRes : { ma: prevRes }; - + const values = typeof results[idx] === 'object' && results[idx] !== null ? results[idx] : { ma: results[idx] }; + const prevValues = typeof results[idx-1] === 'object' && results[idx-1] !== null ? results[idx-1] : { ma: results[idx-1] }; return signalFunc(ind, candles[idx], candles[idx-1], values, prevValues); }); - - indicatorSignals[indId] = simSignals; - } else { - console.warn(`[Simulation] Missing cached data or signal function for ${indId}`); } } // Simulation loop - let balance = config.capital; - let equity = [{ time: simCandles[0].time, value: balance }]; - let totalQty = 0; // Total position quantity in BTC - let avgPrice = 0; - let trades = []; // { type, recordType, time, entryPrice, exitPrice, pnl, reason, currentUsd, currentQty } + const startPrice = simCandles[0].open; + let balanceBtc = config.contractType === 'inverse' ? config.capital / startPrice : 0; + let balanceUsd = config.contractType === 'linear' ? config.capital : 0; - const PARTIAL_EXIT_PCT = 0.15; // 15% partial exit + let equityData = { usd: [], btc: [] }; + let totalQty = 0; // Linear: BTC, Inverse: USD Contracts + let avgPrice = 0; + let avgPriceData = []; + let posSizeData = { btc: [], usd: [] }; + let trades = []; + + const PARTIAL_EXIT_PCT = 0.15; + const MIN_POSITION_VALUE_USD = 15; for (let i = 0; i < simCandles.length; i++) { const candle = simCandles[i]; const price = candle.close; let actionTakenInThisCandle = false; - // 1. Check TP for total position + // 1. Check TP if (totalQty > 0) { let isTP = false; let exitPrice = price; - if (config.direction === 'long') { if (candle.high >= avgPrice * (1 + config.tp)) { isTP = true; @@ -206,30 +256,40 @@ async function runSimulation() { } if (isTP) { - const qtyToClose = totalQty * PARTIAL_EXIT_PCT; - const pnl = config.direction === 'long' - ? (exitPrice - avgPrice) * qtyToClose - : (avgPrice - exitPrice) * qtyToClose; - - balance += pnl; - totalQty -= qtyToClose; + let qtyToClose = totalQty * PARTIAL_EXIT_PCT; + let remainingQty = totalQty - qtyToClose; + let remainingValueUsd = config.contractType === 'linear' ? remainingQty * exitPrice : remainingQty; + let reason = 'TP (Partial)'; + // Minimum size check + if (remainingValueUsd < MIN_POSITION_VALUE_USD) { + qtyToClose = totalQty; + reason = 'TP (Full - Min Size)'; + } + + let pnl; + if (config.contractType === 'linear') { + pnl = config.direction === 'long' ? (exitPrice - avgPrice) * qtyToClose : (avgPrice - exitPrice) * qtyToClose; + balanceUsd += pnl; + } else { + pnl = config.direction === 'long' + ? qtyToClose * (1/avgPrice - 1/exitPrice) + : qtyToClose * (1/exitPrice - 1/avgPrice); + balanceBtc += pnl; + } + + totalQty -= qtyToClose; trades.push({ - type: config.direction, - recordType: 'exit', - time: candle.time, - entryPrice: avgPrice, - exitPrice: exitPrice, - pnl: pnl, - reason: 'TP (Partial)', - currentUsd: totalQty * price, - currentQty: totalQty + type: config.direction, recordType: 'exit', time: candle.time, + entryPrice: avgPrice, exitPrice: exitPrice, pnl: pnl, reason: reason, + currentUsd: config.contractType === 'linear' ? totalQty * price : totalQty, + currentQty: config.contractType === 'linear' ? totalQty : totalQty / price }); actionTakenInThisCandle = true; } } - // 2. Check Close Signals (Partial Exit) - Only if TP didn't trigger + // 2. Check Close Signals if (!actionTakenInThisCandle && totalQty > 0 && config.closeIndicators.length > 0) { const hasCloseSignal = config.closeIndicators.some(id => { const sig = indicatorSignals[id][i]; @@ -238,30 +298,52 @@ async function runSimulation() { }); if (hasCloseSignal) { - const qtyToClose = totalQty * PARTIAL_EXIT_PCT; - const pnl = config.direction === 'long' - ? (price - avgPrice) * qtyToClose - : (avgPrice - price) * qtyToClose; - - balance += pnl; - totalQty -= qtyToClose; + let qtyToClose = totalQty * PARTIAL_EXIT_PCT; + let remainingQty = totalQty - qtyToClose; + let remainingValueUsd = config.contractType === 'linear' ? remainingQty * price : remainingQty; + let reason = 'Signal (Partial)'; + // Minimum size check + if (remainingValueUsd < MIN_POSITION_VALUE_USD) { + qtyToClose = totalQty; + reason = 'Signal (Full - Min Size)'; + } + + let pnl; + if (config.contractType === 'linear') { + pnl = config.direction === 'long' ? (price - avgPrice) * qtyToClose : (avgPrice - price) * qtyToClose; + balanceUsd += pnl; + } else { + pnl = config.direction === 'long' + ? qtyToClose * (1/avgPrice - 1/price) + : qtyToClose * (1/price - 1/avgPrice); + balanceBtc += pnl; + } + + totalQty -= qtyToClose; trades.push({ - type: config.direction, - recordType: 'exit', - time: candle.time, - entryPrice: avgPrice, - exitPrice: price, - pnl: pnl, - reason: 'Signal (Partial)', - currentUsd: totalQty * price, - currentQty: totalQty + type: config.direction, recordType: 'exit', time: candle.time, + entryPrice: avgPrice, exitPrice: price, pnl: pnl, reason: reason, + currentUsd: config.contractType === 'linear' ? totalQty * price : totalQty, + currentQty: config.contractType === 'linear' ? totalQty : totalQty / price }); actionTakenInThisCandle = true; } } - // 3. Check Open Signals (Pyramiding) - Only if no exit happened in this candle + // Calculate Current Equity for Margin Check + let currentEquityBtc, currentEquityUsd; + if (config.contractType === 'linear') { + const upnlUsd = totalQty > 0 ? (config.direction === 'long' ? (price - avgPrice) : (avgPrice - price)) * totalQty : 0; + currentEquityUsd = balanceUsd + upnlUsd; + currentEquityBtc = currentEquityUsd / price; + } else { + const upnlBtc = totalQty > 0 ? (config.direction === 'long' ? totalQty * (1/avgPrice - 1/price) : totalQty * (1/price - 1/avgPrice)) : 0; + currentEquityBtc = balanceBtc + upnlBtc; + currentEquityUsd = currentEquityBtc * price; + } + + // 3. Check Open Signals if (!actionTakenInThisCandle) { const hasOpenSignal = config.openIndicators.some(id => { const sig = indicatorSignals[id][i]; @@ -270,54 +352,88 @@ async function runSimulation() { }); if (hasOpenSignal) { - const entryUsd = config.posSize * config.leverage; - const entryQty = entryUsd / price; + const entryValUsd = config.posSize * config.exchangeLeverage; + const currentNotionalBtc = config.contractType === 'linear' ? totalQty : totalQty / price; + const entryNotionalBtc = entryValUsd / price; - const newQty = totalQty + entryQty; - avgPrice = ((totalQty * avgPrice) + (entryQty * price)) / newQty; - totalQty = newQty; - - trades.push({ - type: config.direction, - recordType: 'entry', - time: candle.time, - entryPrice: price, - reason: 'Entry', - currentUsd: totalQty * price, - currentQty: totalQty - }); + const projectedEffectiveLeverage = (currentNotionalBtc + entryNotionalBtc) / Math.max(currentEquityBtc, 0.0000001); + + if (projectedEffectiveLeverage <= config.maxEffectiveLeverage) { + if (config.contractType === 'linear') { + const entryQty = entryValUsd / price; + avgPrice = ((totalQty * avgPrice) + (entryQty * price)) / (totalQty + entryQty); + totalQty += entryQty; + } else { + // Inverse: totalQty is USD contracts + avgPrice = (totalQty + entryValUsd) / ((totalQty / avgPrice || 0) + (entryValUsd / price)); + totalQty += entryValUsd; + } + + trades.push({ + type: config.direction, recordType: 'entry', time: candle.time, + entryPrice: price, reason: 'Entry', + currentUsd: config.contractType === 'linear' ? totalQty * price : totalQty, + currentQty: config.contractType === 'linear' ? totalQty : totalQty / price + }); + } } } - // Calculate current equity (realized balance + unrealized PnL) - const unrealizedPnl = totalQty > 0 - ? (config.direction === 'long' ? (price - avgPrice) : (avgPrice - price)) * totalQty - : 0; + // Final Equity Recording + let finalEquityBtc, finalEquityUsd; + if (config.contractType === 'linear') { + const upnl = totalQty > 0 ? (config.direction === 'long' ? (price - avgPrice) : (avgPrice - price)) * totalQty : 0; + finalEquityUsd = balanceUsd + upnl; + finalEquityBtc = finalEquityUsd / price; + } else { + const upnl = totalQty > 0 ? (config.direction === 'long' ? totalQty * (1/avgPrice - 1/price) : totalQty * (1/price - 1/avgPrice)) : 0; + finalEquityBtc = balanceBtc + upnl; + finalEquityUsd = finalEquityBtc * price; + } - equity.push({ time: candle.time, value: balance + unrealizedPnl }); + equityData.usd.push({ time: candle.time, value: finalEquityUsd }); + equityData.btc.push({ time: candle.time, value: finalEquityBtc }); + + if (totalQty > 0.000001) avgPriceData.push({ time: candle.time, value: avgPrice }); + posSizeData.btc.push({ time: candle.time, value: config.contractType === 'linear' ? totalQty : totalQty / price }); + posSizeData.usd.push({ time: candle.time, value: config.contractType === 'linear' ? totalQty * price : totalQty }); } - displayResults(trades, equity, config); + displayResults(trades, equityData, config, simCandles[simCandles.length-1].close, avgPriceData, posSizeData); } catch (error) { console.error('[Simulation] Error:', error); - alert('Simulation failed. See console for details.'); + alert('Simulation failed.'); } finally { btn.disabled = false; btn.textContent = 'Run Simulation'; } } -function displayResults(trades, equity, config) { +function displayResults(trades, equityData, config, endPrice, avgPriceData, posSizeData) { const resultsDiv = document.getElementById('simulationResults'); resultsDiv.style.display = 'block'; - const totalTrades = trades.length; - const profitableTrades = trades.filter(t => t.pnl > 0).length; - const winRate = totalTrades > 0 ? (profitableTrades / totalTrades * 100).toFixed(1) : 0; - const totalPnl = trades.reduce((sum, t) => sum + t.pnl, 0); - const finalBalance = config.capital + totalPnl; - const roi = (totalPnl / config.capital * 100).toFixed(2); + // Update main chart with avg price + if (window.dashboard) { + window.dashboard.setAvgPriceData(avgPriceData); + } + + const entryTrades = trades.filter(t => t.recordType === 'entry').length; + const exitTrades = trades.filter(t => t.recordType === 'exit').length; + const profitableTrades = trades.filter(t => t.recordType === 'exit' && t.pnl > 0).length; + const winRate = exitTrades > 0 ? (profitableTrades / exitTrades * 100).toFixed(1) : 0; + + const startPrice = equityData.usd[0].value / equityData.btc[0].value; + const startBtc = config.capital / startPrice; + + const finalUsd = equityData.usd[equityData.usd.length - 1].value; + const finalBtc = finalUsd / endPrice; + + const totalPnlUsd = finalUsd - config.capital; + const roi = (totalPnlUsd / config.capital * 100).toFixed(2); + + const roiBtc = ((finalBtc - startBtc) / startBtc * 100).toFixed(2); resultsDiv.innerHTML = `
@@ -325,29 +441,45 @@ function displayResults(trades, equity, config) {
-
${roi}%
-
ROI
+
${roi}%
+
ROI (USD)
-
${winRate}%
-
Win Rate
+
${roiBtc}%
+
ROI (BTC)
- Total Trades - ${totalTrades} -
-
- Profit/Loss - $${totalPnl.toFixed(2)} + Starting Balance + $${config.capital.toFixed(0)} / ${startBtc.toFixed(4)} BTC
Final Balance - $${finalBalance.toFixed(2)} + $${finalUsd.toFixed(2)} / ${finalBtc.toFixed(4)} BTC +
+
+ Trades (Entry / Exit) + ${entryTrades} / ${exitTrades}
+
+ Equity Chart +
+ + +
+
+ +
+ Position Size (BTC) +
+ + +
+
+
@@ -357,30 +489,86 @@ function displayResults(trades, equity, config) {
`; - // Create Equity Chart - setTimeout(() => { - const chartContainer = document.getElementById('equityChart'); - if (!chartContainer) return; - - equityChart = LightweightCharts.createChart(chartContainer, { - layout: { background: { color: '#131722' }, textColor: '#d1d4dc' }, - grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } }, - rightPriceScale: { borderColor: '#2a2e39' }, - timeScale: { borderColor: '#2a2e39', visible: false }, - handleScroll: false, - handleScale: false + // Create Charts + const initCharts = () => { + // Equity Chart + const equityContainer = document.getElementById('equityChart'); + if (equityContainer) { + equityContainer.innerHTML = ''; + equityChart = LightweightCharts.createChart(equityContainer, { + 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 + }); + + equitySeries = equityChart.addSeries(LightweightCharts.AreaSeries, { + lineColor: totalPnlUsd >= 0 ? '#26a69a' : '#ef5350', + topColor: totalPnlUsd >= 0 ? 'rgba(38, 166, 154, 0.4)' : 'rgba(239, 83, 80, 0.4)', + bottomColor: 'rgba(0, 0, 0, 0)', + lineWidth: 2, + }); + + equitySeries.setData(equityData['usd']); + equityChart.timeScale().fitContent(); + } + + // Pos Size Chart + const posSizeContainer = document.getElementById('posSizeChart'); + if (posSizeContainer) { + posSizeContainer.innerHTML = ''; + posSizeChart = LightweightCharts.createChart(posSizeContainer, { + 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 + }); + + posSeries = posSizeChart.addSeries(LightweightCharts.AreaSeries, { + lineColor: '#00bcd4', + topColor: 'rgba(0, 188, 212, 0.4)', + bottomColor: 'rgba(0, 0, 0, 0)', + lineWidth: 2, + }); + + posSeries.setData(posSizeData['usd']); + posSizeChart.timeScale().fitContent(); + + const label = document.getElementById('posSizeLabel'); + if (label) label.textContent = 'Position Size (USD)'; + } + }; + + setTimeout(initCharts, 100); + + // Toggle Logic + resultsDiv.querySelectorAll('.toggle-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + const unit = btn.dataset.unit; + + // Sync all toggle button groups + resultsDiv.querySelectorAll(`.toggle-btn`).forEach(b => { + if (b.dataset.unit === unit) b.classList.add('active'); + else b.classList.remove('active'); + }); + + if (equitySeries) { + equitySeries.setData(equityData[unit]); + equityChart.timeScale().fitContent(); + } + if (posSeries) { + posSeries.setData(posSizeData[unit]); + posSizeChart.timeScale().fitContent(); + + const label = document.getElementById('posSizeLabel'); + if (label) label.textContent = `Position Size (${unit.toUpperCase()})`; + } }); - - equitySeries = equityChart.addSeries(LightweightCharts.AreaSeries, { - lineColor: totalPnl >= 0 ? '#26a69a' : '#ef5350', - topColor: totalPnl >= 0 ? 'rgba(38, 166, 154, 0.4)' : 'rgba(239, 83, 80, 0.4)', - bottomColor: 'rgba(0, 0, 0, 0)', - lineWidth: 2, - }); - - equitySeries.setData(equity); - equityChart.timeScale().fitContent(); - }, 100); + }); document.getElementById('toggleTradeMarkers').addEventListener('click', () => { toggleSimulationMarkers(trades); @@ -389,6 +577,9 @@ function displayResults(trades, equity, config) { document.getElementById('clearSim').addEventListener('click', () => { resultsDiv.style.display = 'none'; clearSimulationMarkers(); + if (window.dashboard) { + window.dashboard.clearAvgPriceData(); + } }); }