feat: added the graph popup option

2 files changed, 135 insertions, 1 deletions

diff --git a/index.html b/index.html
index 9da7941..92554ac 100644
--- a/index.html
+++ b/index.html
@@ -134,6 +134,18 @@
         </div>
     </div>
 
+    <!-- Chart Popup Modal -->
+    <div id="chart-modal" class="modal">
+        <div class="modal-content chart-modal-content">
+            <span class="close-button">&times;</span>
+            <h3 id="chart-modal-title">Chart Details</h3>
+            <div class="expanded-chart-container">
+                <canvas id="expandedChart"></canvas>
+            </div>
+            <button id="close-chart-modal" class="button">Close</button>
+        </div>
+    </div>
+
     <footer>
         <p>&copy; Surgot/2025 - Built with passion (and a lot of processing power!)</p>
     </footer>
@@ -388,10 +400,21 @@
                 const displayName = definition.label || metricName;
                 const metricCard = document.createElement('div');
                 metricCard.className = 'metric-card';
-                metricCard.innerHTML = `<h5>${displayName}</h5><div class="chart-container"><canvas id="${metricName}Chart"></canvas></div>`;
+                metricCard.innerHTML = `<h5>${displayName}</h5><div class="chart-container" data-metric="${metricName}" data-label="${displayName}"><canvas id="${metricName}Chart"></canvas></div>`;
                 metricGrid.appendChild(metricCard);
                 chartContainers[metricName] = metricCard;
             }
+            
+            // Add click events to all chart containers after they're created
+            document.querySelectorAll('.chart-container').forEach(container => {
+                container.addEventListener('click', function() {
+                    const metricName = this.getAttribute('data-metric');
+                    const displayName = this.getAttribute('data-label');
+                    if (metricName && displayName) {
+                        expandChart(metricName, displayName);
+                    }
+                });
+            });
         }
 
         function initCharts(metrics) {
@@ -544,6 +567,89 @@
             }
         });
 
+        // Chart expansion functionality
+        const chartModal = document.getElementById('chart-modal');
+        const chartModalTitle = document.getElementById('chart-modal-title');
+        const closeChartModalBtn = document.querySelector('#chart-modal .close-button');
+        const closeChartBtn = document.getElementById('close-chart-modal');
+        let expandedChart = null;
+        
+        function expandChart(metricName, displayName) {
+            // Set the modal title
+            chartModalTitle.textContent = displayName;
+            
+            // Show the modal
+            chartModal.style.display = 'block';
+            setTimeout(() => chartModal.classList.add('show'), 10);
+            
+            // Create an expanded version of the chart
+            const expandedChartCanvas = document.getElementById('expandedChart');
+            const ctx = expandedChartCanvas.getContext('2d');
+            
+            // If there's already an expanded chart, destroy it first
+            if (expandedChart) {
+                expandedChart.destroy();
+            }
+            
+            // Clone the options and data from the original chart
+            const originalChart = charts[metricName];
+            if (!originalChart) return;
+            
+            const chartOptions = JSON.parse(JSON.stringify(originalChart.options));
+            // Adjust options for the expanded view
+            chartOptions.maintainAspectRatio = false;
+            if (chartOptions.scales && chartOptions.scales.y) {
+                chartOptions.scales.y.ticks.maxTicksLimit = 10; // More ticks for expanded view
+            }
+            
+            // Create the expanded chart with cloned data
+            const chartData = {
+                datasets: originalChart.data.datasets.map(dataset => ({
+                    ...dataset,
+                    data: [...dataset.data],
+                    pointRadius: 3 // Show points in expanded view
+                }))
+            };
+            
+            expandedChart = new Chart(ctx, {
+                type: 'line',
+                data: chartData,
+                options: chartOptions
+            });
+        }
+        
+        // Close modal events
+        function closeChartModal() {
+            chartModal.classList.remove('show');
+            setTimeout(() => chartModal.style.display = 'none', 300);
+        }
+        
+        if (closeChartModalBtn) {
+            closeChartModalBtn.addEventListener('click', closeChartModal);
+        }
+        
+        if (closeChartBtn) {
+            closeChartBtn.addEventListener('click', closeChartModal);
+        }
+        
+        // Close modal when clicking outside of it
+        chartModal.addEventListener('click', (event) => {
+            if (event.target === chartModal) {
+                closeChartModal();
+            }
+        });
+        
+        // Close modal with Escape key
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                if (chartModal.classList.contains('show')) {
+                    closeChartModal();
+                } else if (passwordModal.style.display === 'block') {
+                    closePasswordModal();
+                }
+            }
+        });
+
     </script>
 
 </body>
diff --git a/static/css/style.css b/static/css/style.css
index a32b5d9..b56451f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -251,6 +251,7 @@ header span {
 }
 
 .chart-container {
+    cursor: pointer;
     position: relative;
     width: 100%;
     height: 200px;
@@ -258,6 +259,20 @@ header span {
     margin-bottom: 10px;
 }
 
+.chart-container::after {
+    content: '🔍';
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    font-size: 16px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.chart-container:hover::after {
+    opacity: 0.8;
+}
+
 .metric-section-header {
     grid-column: 1 / -1;
     margin-top: 15px;
@@ -392,3 +407,16 @@ header span {
 .shake {
     animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
+
+/* Expanded Chart Modal Styles */
+.chart-modal-content {
+    width: 90%;
+    max-width: 800px;
+}
+
+.expanded-chart-container {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    margin: 20px 0;
+}