gogo2/ANNOTATE/web/templates/components/chart_panel.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>
                    <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('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();
        }
    });

    // 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>