250 lines
11 KiB
HTML
250 lines
11 KiB
HTML
<div class="card chart-panel">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-chart-candlestick"></i>
|
|
Multi-Timeframe Charts
|
|
</h5>
|
|
<div class="d-flex gap-3">
|
|
<!-- Prediction Display Toggles -->
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="Prediction toggles">
|
|
<button type="button" class="btn btn-outline-success active" id="toggle-ghost-candles" title="Toggle Ghost Candles">
|
|
<i class="fas fa-ghost"></i> Candles
|
|
</button>
|
|
<button type="button" class="btn btn-outline-warning active" id="toggle-trend-lines" title="Toggle Trend Lines">
|
|
<i class="fas fa-chart-line"></i> Trends
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info active" id="toggle-actions" title="Toggle Action Predictions">
|
|
<i class="fas fa-bullseye"></i> Actions
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary active" id="toggle-pivots" title="Toggle Pivot Points">
|
|
<i class="fas fa-circle-dot"></i> Pivots
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Chart Controls -->
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
<button type="button" class="btn btn-outline-light" id="zoom-in-btn" title="Zoom In">
|
|
<i class="fas fa-search-plus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light" id="zoom-out-btn" title="Zoom Out">
|
|
<i class="fas fa-search-minus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light" id="reset-zoom-btn" title="Reset Zoom">
|
|
<i class="fas fa-expand"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light" id="maximize-btn" title="Maximize Chart Area">
|
|
<i class="fas fa-arrows-alt"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light" id="fullscreen-btn" title="Fullscreen">
|
|
<i class="fas fa-expand-arrows-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<!-- Chart container with multiple timeframes -->
|
|
<div id="chart-container">
|
|
<!-- Timeframe charts will be dynamically created here -->
|
|
<div class="timeframe-chart" id="chart-1s">
|
|
<div class="chart-header">
|
|
<span class="timeframe-label">1 Second</span>
|
|
<div class="chart-header-controls">
|
|
<span class="chart-info" id="info-1s"></span>
|
|
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1s"
|
|
title="Minimize Chart">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-plot" id="plot-1s"></div>
|
|
</div>
|
|
|
|
<div class="timeframe-chart" id="chart-1m">
|
|
<div class="chart-header">
|
|
<span class="timeframe-label">1 Minute</span>
|
|
<div class="chart-header-controls">
|
|
<span class="chart-info" id="info-1m"></span>
|
|
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1m"
|
|
title="Minimize Chart">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-plot" id="plot-1m"></div>
|
|
</div>
|
|
|
|
<div class="timeframe-chart" id="chart-1h">
|
|
<div class="chart-header">
|
|
<span class="timeframe-label">1 Hour</span>
|
|
<div class="chart-header-controls">
|
|
<span class="chart-info" id="info-1h"></span>
|
|
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1h"
|
|
title="Minimize Chart">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-plot" id="plot-1h"></div>
|
|
</div>
|
|
|
|
<div class="timeframe-chart" id="chart-1d">
|
|
<div class="chart-header">
|
|
<span class="timeframe-label">1 Day</span>
|
|
<div class="chart-header-controls">
|
|
<span class="chart-info" id="info-1d"></span>
|
|
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1d"
|
|
title="Minimize Chart">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-plot" id="plot-1d"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading overlay -->
|
|
<div id="chart-loading" class="chart-loading d-none">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-2">Loading chart data...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Chart panel controls
|
|
document.getElementById('zoom-in-btn').addEventListener('click', function () {
|
|
if (appState.chartManager) {
|
|
appState.chartManager.handleZoom(1.5);
|
|
}
|
|
});
|
|
|
|
document.getElementById('zoom-out-btn').addEventListener('click', function () {
|
|
if (appState.chartManager) {
|
|
appState.chartManager.handleZoom(0.67);
|
|
}
|
|
});
|
|
|
|
document.getElementById('reset-zoom-btn').addEventListener('click', function () {
|
|
if (appState.chartManager) {
|
|
appState.chartManager.resetZoom();
|
|
}
|
|
});
|
|
|
|
document.getElementById('maximize-btn').addEventListener('click', function () {
|
|
const mainRow = document.querySelector('.row.mt-3');
|
|
const leftSidebar = mainRow.querySelector('.col-md-2:first-child');
|
|
const chartArea = mainRow.querySelector('.col-md-8');
|
|
const rightSidebar = mainRow.querySelector('.col-md-2:last-child');
|
|
const chartPanel = document.querySelector('.chart-panel');
|
|
const maximizeIcon = this.querySelector('i');
|
|
|
|
// Toggle maximize state
|
|
if (chartArea.classList.contains('chart-maximized')) {
|
|
// Restore normal view
|
|
leftSidebar.style.display = '';
|
|
rightSidebar.style.display = '';
|
|
chartArea.classList.remove('chart-maximized');
|
|
chartPanel.classList.remove('chart-panel-maximized');
|
|
maximizeIcon.className = 'fas fa-arrows-alt';
|
|
this.title = 'Maximize Chart Area';
|
|
} else {
|
|
// Maximize chart area
|
|
leftSidebar.style.display = 'none';
|
|
rightSidebar.style.display = 'none';
|
|
chartArea.classList.add('chart-maximized');
|
|
chartPanel.classList.add('chart-panel-maximized');
|
|
maximizeIcon.className = 'fas fa-compress-arrows-alt';
|
|
this.title = 'Restore Normal View';
|
|
}
|
|
|
|
// Update chart layouts after transition
|
|
setTimeout(() => {
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.updateChartLayout();
|
|
}
|
|
}, 350);
|
|
});
|
|
|
|
document.getElementById('fullscreen-btn').addEventListener('click', function () {
|
|
const chartContainer = document.getElementById('chart-container');
|
|
if (chartContainer.requestFullscreen) {
|
|
chartContainer.requestFullscreen();
|
|
} else if (chartContainer.webkitRequestFullscreen) {
|
|
chartContainer.webkitRequestFullscreen();
|
|
} else if (chartContainer.msRequestFullscreen) {
|
|
chartContainer.msRequestFullscreen();
|
|
}
|
|
});
|
|
|
|
// Prediction display toggles
|
|
document.getElementById('toggle-ghost-candles').addEventListener('click', function () {
|
|
this.classList.toggle('active');
|
|
const enabled = this.classList.contains('active');
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.toggleGhostCandles(enabled);
|
|
}
|
|
console.log('Ghost candles:', enabled ? 'enabled' : 'disabled');
|
|
});
|
|
|
|
document.getElementById('toggle-trend-lines').addEventListener('click', function () {
|
|
this.classList.toggle('active');
|
|
const enabled = this.classList.contains('active');
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.toggleTrendLines(enabled);
|
|
}
|
|
console.log('Trend lines:', enabled ? 'enabled' : 'disabled');
|
|
});
|
|
|
|
document.getElementById('toggle-actions').addEventListener('click', function () {
|
|
this.classList.toggle('active');
|
|
const enabled = this.classList.contains('active');
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.toggleActions(enabled);
|
|
}
|
|
console.log('Action predictions:', enabled ? 'enabled' : 'disabled');
|
|
});
|
|
|
|
document.getElementById('toggle-pivots').addEventListener('click', function () {
|
|
this.classList.toggle('active');
|
|
const enabled = this.classList.contains('active');
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.togglePivots(enabled);
|
|
}
|
|
console.log('Pivot points:', enabled ? 'enabled' : 'disabled');
|
|
});
|
|
|
|
// Minimize button functionality
|
|
document.querySelectorAll('.minimize-btn').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
const timeframe = this.getAttribute('data-timeframe');
|
|
const chartElement = document.getElementById(`chart-${timeframe}`);
|
|
const plotElement = document.getElementById(`plot-${timeframe}`);
|
|
|
|
if (chartElement.classList.contains('minimized')) {
|
|
// Restore chart
|
|
chartElement.classList.remove('minimized');
|
|
plotElement.style.display = 'block';
|
|
this.innerHTML = '<i class="fas fa-minus"></i>';
|
|
this.title = 'Minimize Chart';
|
|
|
|
// Update chart layout
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.updateChartLayout();
|
|
}
|
|
} else {
|
|
// Minimize chart
|
|
chartElement.classList.add('minimized');
|
|
plotElement.style.display = 'none';
|
|
this.innerHTML = '<i class="fas fa-plus"></i>';
|
|
this.title = 'Restore Chart';
|
|
|
|
// Update chart layout
|
|
if (window.appState && window.appState.chartManager) {
|
|
window.appState.chartManager.updateChartLayout();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script> |