added full diagram view modal

src/handlers.rs

@@ -216,7 +216,7 @@ pub async fn report_details_handler(
 }
 
 async fn get_processed_reports() -> Result<Vec<ReportRow>, (StatusCode, String)> {
-    let response = reqwest::get("https://alatreon.org/slimes?limit=1000")
+    let response = reqwest::get("https://alatreon.org/slimes?limit=10000")
         .await
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 

templates/_layout.html

@@ -227,7 +227,7 @@
 }
 
 @media (max-width: 640px) {
-    .nav-links { display: none; }
+    <!-- .nav-links { display: none; } -->
     .nav-left { gap: 1rem; }
 }
 </style>

templates/analytics.html

@@ -1,11 +1,37 @@
 {% extends "_layout.html" %}
 
+{% macro chart_card(id, title) %}
+    <div class="chart-card">
+        <button class="expand-btn" onclick="openFullView('{{ id }}', '{{ title }}')">
+            <i class="fa-solid fa-expand"></i> Full View
+        </button>
+        <h3>{{ title }}</h3>
+        <canvas id="{{ id }}"></canvas>
+    </div>
+{% endmacro %}
+
 {% block content %}
 <div class="header-section">
     <h2>Benchmark Analytics</h2>
     <p style="text-align: center; color: var(--text-muted);">Insights from {{ data.total_reports }} benchmarks</p>
 </div>
 
+<div id="chartModal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3 id="modalTitle">Chart View</h3>
+            <button class="close-modal" onclick="closeModal()" aria-label="Close">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="canvas-container">
+                <canvas id="modalChart"></canvas>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="analytics-grid">
     <div class="fact-card">
         <span class="fact-title">RAM Efficiency</span>
@@ -18,128 +44,65 @@
         <span class="fact-label">Avg Score per Thread</span>
     </div>
 
-    <div class="chart-card">
-        <h3>Score Distribution</h3>
-        <canvas id="distChart"></canvas>
-    </div>
-
-    <div class="chart-card">
-        <h3>Reports by Operating System</h3>
-        <canvas id="osCountChart"></canvas>
-    </div>
-
-    <div class="chart-card">
-        <h3>Avg Score by Operating System</h3>
-        <canvas id="osChart"></canvas>
-    </div>
-
-    <div class="chart-card">
-        <h3>Highest Score by Operating System</h3>
-        <canvas id="osMaxChart"></canvas>
-    </div>
-
-    <div class="chart-card">
-        <h3>Lowest Score by Operating System</h3>
-        <canvas id="osMinChart"></canvas>
-    </div>
+    {{ self::chart_card(id="distChart", title="Score Distribution") }}
+    {{ self::chart_card(id="osCountChart", title="Reports by Operating System") }}
+    {{ self::chart_card(id="osChart", title="Avg Score by Operating System") }}
+    {{ self::chart_card(id="osMaxChart", title="Highest Score by Operating System") }}
+    {{ self::chart_card(id="osMinChart", title="Lowest Score by Operating System") }}
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
     const analyticsData = {{ json_data | safe }};
-
     const primaryColor = '#d946ef';
     const secondaryColor = '#a21caf';
+    const chartConfigs = {};
 
-    const chartOptions = {
+    const baseOptions = {
         responsive: true,
         maintainAspectRatio: true,
         aspectRatio: 1.5,
-        plugins: {
-            legend: { display: false }
-        }
+        plugins: { legend: { display: false } }
     };
 
-    // OS Distribution (Count)
-    new Chart(document.getElementById('osCountChart'), {
+    function initCharts() {
+        chartConfigs['osCountChart'] = {
             type: 'bar',
             data: {
                 labels: analyticsData.os_count_labels,
-            datasets: [{
-                label: 'Number of Reports',
-                data: analyticsData.os_count_values,
-                backgroundColor: primaryColor,
-                borderRadius: 6
-            }]
+                datasets: [{ label: 'Number of Reports', data: analyticsData.os_count_values, backgroundColor: primaryColor, borderRadius: 6 }]
             },
-        options: {
-            ...chartOptions,
-            indexAxis: 'y',
-            scales: {
-                x: {
-                    ticks: { stepSize: 1 },
-                    beginAtZero: true
-                }
-            }
-        }
-    });
+            options: { ...baseOptions, indexAxis: 'y', scales: { x: { ticks: { stepSize: 1 }, beginAtZero: true } } }
+        };
 
-    // Average per OS
-    new Chart(document.getElementById('osChart'), {
+        chartConfigs['osChart'] = {
             type: 'bar',
             data: {
                 labels: analyticsData.os_labels,
-            datasets: [{
-                label: 'Average Score',
-                data: analyticsData.os_scores,
-                backgroundColor: primaryColor,
-                borderRadius: 6
-            }]
+                datasets: [{ label: 'Average Score', data: analyticsData.os_scores, backgroundColor: primaryColor, borderRadius: 6 }]
             },
-        options: {
-            ...chartOptions,
-            indexAxis: 'y',
-        }
-    });
+            options: { ...baseOptions, indexAxis: 'y' }
+        };
 
-    // Highest per OS
-    new Chart(document.getElementById('osMaxChart'), {
+        chartConfigs['osMaxChart'] = {
             type: 'bar',
             data: {
                 labels: analyticsData.os_max_labels,
-            datasets: [{
-                label: 'Highest Score',
-                data: analyticsData.os_max_scores,
-                backgroundColor: secondaryColor,
-                borderRadius: 6
-            }]
+                datasets: [{ label: 'Highest Score', data: analyticsData.os_max_scores, backgroundColor: secondaryColor, borderRadius: 6 }]
             },
-        options: {
-            ...chartOptions,
-            indexAxis: 'y',
-        }
-    });
+            options: { ...baseOptions, indexAxis: 'y' }
+        };
 
-    // Lowest per OS
-    new Chart(document.getElementById('osMinChart'), {
+        chartConfigs['osMinChart'] = {
             type: 'bar',
             data: {
                 labels: analyticsData.os_min_labels,
-            datasets: [{
-                label: 'Lowest Score',
-                data: analyticsData.os_min_scores,
-                backgroundColor: secondaryColor,
-                borderRadius: 6
-            }]
+                datasets: [{ label: 'Lowest Score', data: analyticsData.os_min_scores, backgroundColor: secondaryColor, borderRadius: 6 }]
             },
-        options: {
-            ...chartOptions,
-            indexAxis: 'y',
-        }
-    });
+            options: { ...baseOptions, indexAxis: 'y' }
+        };
 
-    // Score distribution
-    new Chart(document.getElementById('distChart'), {
+        chartConfigs['distChart'] = {
             type: 'bar',
             data: {
                 labels: analyticsData.dist_labels,
@@ -154,14 +117,58 @@
                     categoryPercentage: 0.9
                 }]
             },
-        options: {
-            ...chartOptions,
-            scales: {
-                x: { grid: { display: false } },
-                y: { beginAtZero: true, ticks: { stepSize: 1 } }
+            options: { ...baseOptions, scales: { x: { grid: { display: false } }, y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
+        };
+
+        // Render everything
+        Object.keys(chartConfigs).forEach(id => {
+            const el = document.getElementById(id);
+            if (el) new Chart(el, chartConfigs[id]);
+        });
     }
+
+    let modalChartInstance = null;
+
+    function openFullView(chartId, title) {
+        const modal = document.getElementById('chartModal');
+        const ctx = document.getElementById('modalChart').getContext('2d');
+        const config = JSON.parse(JSON.stringify(chartConfigs[chartId]));
+        
+        document.getElementById('modalTitle').innerText = title;
+        modal.style.display = 'block';
+        document.body.style.overflow = 'hidden';
+
+        config.options.maintainAspectRatio = false;
+        const dataLength = config.data.labels.length;
+        const calculatedHeight = Math.max(500, dataLength * 45);
+        
+        const canvasContainer = document.querySelector('.canvas-container');
+        canvasContainer.style.height = calculatedHeight + 'px';
+
+        if (modalChartInstance) modalChartInstance.destroy();
+        modalChartInstance = new Chart(ctx, config);
+    }
+
+    function closeModal() {
+        const modal = document.getElementById('chartModal');
+        if (modal) {
+            modal.style.display = 'none';
+            document.body.style.overflow = 'auto';
+        }
+        if (modalChartInstance) {
+            modalChartInstance.destroy();
+            modalChartInstance = null;
+        }
+    }
+
+    window.addEventListener('click', function(e) {
+        const modal = document.getElementById('chartModal');
+        if (e.target === modal) {
+            closeModal();
         }
     });
+
+    initCharts();
 </script>
 
 <style>
@@ -182,6 +189,7 @@
 }
 
 .chart-card {
+    position: relative;
     background: var(--bg-card);
     padding: 1.5rem;
     border-radius: 12px;
@@ -216,14 +224,109 @@
 .fact-label {
     font-size: 0.9rem;
     opacity: 0.9;
-    /* text-transform: uppercase; */
-    /* letter-spacing: 1px; */
+}
+
+.canvas-container { width: 100%; }
+
+.expand-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: var(--primary-soft);
+    border: 1px solid var(--primary-border);
+    color: var(--primary-color);
+    padding: 0.4rem 0.7rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    z-index: 10;
+}
+
+.expand-btn:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    left: 0; top: 0;
+    width: 100%; height: 100%;
+    background-color: rgba(0,0,0,0.6);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background-color: var(--bg-main);
+    margin: 2vh auto;
+    width: 95%;
+    max-width: 1400px;
+    height: 96vh;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+}
+
+.modal-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-card);
+}
+
+.close-modal {
+    background: var(--primary-soft);
+    border: 1px solid var(--primary-border);
+    color: var(--primary-color);
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.close-modal:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+.modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem;
+    background: #fff;
 }
 
 @media (max-width: 900px) {
     .analytics-grid {
         grid-template-columns: 1fr;
     }
+    .modal-content { 
+        width: 100%; 
+        height: 100%; 
+        margin: 0; 
+        border-radius: 0;
+        border: none;
+    }
+    .modal-header {
+        padding: 0.75rem 1rem;
+    }
+    .modal-body {
+        padding: 1rem 0.5rem;
+    }
+    #modalTitle {
+        font-size: 1rem;
+    }
 }
 </style>
 {% endblock %}