Add tab system to right sidebar with Indicators and Strategies
- Add two-tab navigation (Indicators, Strategies) in right sidebar - Move all strategy-related content to Strategies tab - Implement sidebar collapse/expand functionality - Add indicator visibility toggle (eye button) - Fix bug where wrong interval data was deleted on TF switch - Add localStorage persistence for sidebar state and active tab - Ensure indicators recalculate when TF changes
This commit is contained in:
DiTus
@ -1353,125 +1353,126 @@
|
||||
<!-- Right Sidebar - Tools Panel -->
|
||||
<div class="right-sidebar collapsed" id="rightSidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-title">
|
||||
<span>🔧</span>
|
||||
<span class="sidebar-title-text">Tools</span>
|
||||
<div class="sidebar-tabs">
|
||||
<button class="sidebar-tab active" data-tab="indicators">📊 Indicators</button>
|
||||
<button class="sidebar-tab" data-tab="strategies">📋 Strategies</button>
|
||||
</div>
|
||||
<button class="sidebar-toggle" onclick="toggleSidebar()">◀</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-content">
|
||||
<!-- Indicators Panel -->
|
||||
<div class="sidebar-section-indicators" id="indicatorPanel">
|
||||
<div class="sidebar-section-header" style="padding: 8px 12px;">
|
||||
<span>📊</span> Indicators
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Strategy Selection -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<span>📋</span> Select Strategy
|
||||
</div>
|
||||
<div class="sidebar-section-content" id="strategyList">
|
||||
<div class="loading-strategies" style="text-align: center; color: var(--tv-text-secondary); padding: 20px;">
|
||||
Loading strategies...
|
||||
<!-- Indicators Tab -->
|
||||
<div class="sidebar-tab-panel active" id="tab-indicators">
|
||||
<div class="sidebar-section-indicators" id="indicatorPanel">
|
||||
<div class="sidebar-section-header" style="padding: 8px 12px;">
|
||||
<span>📊</span> Indicators
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<span>⚙️</span> Configuration
|
||||
</div>
|
||||
<div class="sidebar-section-content">
|
||||
<div class="config-group">
|
||||
<label class="config-label">Start Date</label>
|
||||
<input type="datetime-local" id="simStartDate" class="config-input">
|
||||
<!-- Strategies Tab -->
|
||||
<div class="sidebar-tab-panel" id="tab-strategies">
|
||||
<!-- Strategy Selection -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<span>📋</span> Select Strategy
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label class="config-label">Confirmation TF (Optional)</label>
|
||||
<select id="simSecondaryTF" class="config-input">
|
||||
<option value="">None</option>
|
||||
<option value="1h">1h</option>
|
||||
<option value="4h">4h</option>
|
||||
<option value="1d" selected>1d</option>
|
||||
<option value="1w">1w</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label class="config-label">Risk % per Trade</label>
|
||||
<input type="number" id="simRiskPercent" class="config-input" value="2" min="0.1" max="100" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label class="config-label">Stop Loss %</label>
|
||||
<input type="number" id="simStopLoss" class="config-input" value="2" min="0.1" max="20" step="0.1">
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Strategy Parameters -->
|
||||
<div id="strategyParams"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Run Button -->
|
||||
<button class="action-btn primary" onclick="runSimulation()" id="runSimBtn" disabled>
|
||||
▶ Run Simulation
|
||||
</button>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="sidebar-section" id="resultsSection" style="display: none;">
|
||||
<div class="sidebar-section-header">
|
||||
<span>📊</span> Results
|
||||
</div>
|
||||
<div class="sidebar-section-content">
|
||||
<!-- Equity Sparkline -->
|
||||
<div class="equity-sparkline" id="equitySparkline"></div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="results-summary">
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simTrades">--</div>
|
||||
<div class="result-stat-label">Trades</div>
|
||||
</div>
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simWinRate">--</div>
|
||||
<div class="result-stat-label">Win Rate</div>
|
||||
</div>
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simPnL">--</div>
|
||||
<div class="result-stat-label">Total P&L</div>
|
||||
</div>
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simProfitFactor">--</div>
|
||||
<div class="result-stat-label">Profit Factor</div>
|
||||
<div class="sidebar-section-content" id="strategyList">
|
||||
<div class="loading-strategies" style="text-align: center; color: var(--tv-text-secondary); padding: 20px;">
|
||||
Loading strategies...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<button class="action-btn secondary" onclick="showSimulationMarkers()">
|
||||
📍 Plot on Chart
|
||||
</button>
|
||||
<button class="action-btn secondary" onclick="saveSimulation()">
|
||||
💾 Save Simulation
|
||||
</button>
|
||||
<button class="action-btn success" onclick="showExportDialog()">
|
||||
📥 Export Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saved Simulations -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<span>💾</span> Saved Simulations
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<span>⚙️</span> Configuration
|
||||
</div>
|
||||
<div class="sidebar-section-content">
|
||||
<div class="config-group">
|
||||
<label class="config-label">Start Date</label>
|
||||
<input type="datetime-local" id="simStartDate" class="config-input">
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label class="config-label">Confirmation TF (Optional)</label>
|
||||
<select id="simSecondaryTF" class="config-input">
|
||||
<option value="">None</option>
|
||||
<option value="1h">1h</option>
|
||||
<option value="4h">4h</option>
|
||||
<option value="1d" selected>1d</option>
|
||||
<option value="1w">1w</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label class="config-label">Risk % per Trade</label>
|
||||
<input type="number" id="simRiskPercent" class="config-input" value="2" min="0.1" max="100" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label class="config-label">Stop Loss %</label>
|
||||
<input type="number" id="simStopLoss" class="config-input" value="2" min="0.1" max="20" step="0.1">
|
||||
</div>
|
||||
|
||||
<div id="strategyParams"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section-content" id="savedSimulations">
|
||||
<div style="text-align: center; color: var(--tv-text-secondary); padding: 10px; font-size: 12px;">
|
||||
No saved simulations
|
||||
|
||||
<!-- Run Button -->
|
||||
<button class="action-btn primary" onclick="runSimulation()" id="runSimBtn" disabled>
|
||||
▶ Run Simulation
|
||||
</button>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="sidebar-section" id="resultsSection" style="display: none;">
|
||||
<div class="sidebar-section-header">
|
||||
<span>📊</span> Results
|
||||
</div>
|
||||
<div class="sidebar-section-content">
|
||||
<div class="equity-sparkline" id="equitySparkline"></div>
|
||||
|
||||
<div class="results-summary">
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simTrades">--</div>
|
||||
<div class="result-stat-label">Trades</div>
|
||||
</div>
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simWinRate">--</div>
|
||||
<div class="result-stat-label">Win Rate</div>
|
||||
</div>
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simPnL">--</div>
|
||||
<div class="result-stat-label">Total P&L</div>
|
||||
</div>
|
||||
<div class="result-stat">
|
||||
<div class="result-stat-value" id="simProfitFactor">--</div>
|
||||
<div class="result-stat-label">Profit Factor</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="action-btn secondary" onclick="showSimulationMarkers()">
|
||||
📍 Plot on Chart
|
||||
</button>
|
||||
<button class="action-btn secondary" onclick="saveSimulation()">
|
||||
💾 Save Simulation
|
||||
</button>
|
||||
<button class="action-btn success" onclick="showExportDialog()">
|
||||
📥 Export Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saved Simulations -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<span>💾</span> Saved Simulations
|
||||
</div>
|
||||
<div class="sidebar-section-content" id="savedSimulations">
|
||||
<div style="text-align: center; color: var(--tv-text-secondary); padding: 10px; font-size: 12px;">
|
||||
No saved simulations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user