100 lines
4.0 KiB
HTML
100 lines
4.0 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="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="fullscreen-btn" title="Fullscreen">
|
|
<i class="fas fa-expand-arrows-alt"></i>
|
|
</button>
|
|
</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>
|
|
<span class="chart-info" id="info-1s"></span>
|
|
</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>
|
|
<span class="chart-info" id="info-1m"></span>
|
|
</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>
|
|
<span class="chart-info" id="info-1h"></span>
|
|
</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>
|
|
<span class="chart-info" id="info-1d"></span>
|
|
</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('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();
|
|
}
|
|
});
|
|
</script>
|