added analytics page

2026-04-04 13:04:26 +02:00
parent 5f58664b6d
commit a82b6da9ca
6 changed files with 454 additions and 3 deletions
--- a/templates/analytics.html
+++ b/templates/analytics.html
@@ -0,0 +1,200 @@
+{% extends "_layout.html" %}
+
+{% 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 class="analytics-grid">
+    <div class="fact-card">
+        <span class="fact-title">RAM Efficiency</span>
+        <span class="fact-value">{{ data.avg_score_per_gb | round(precision=1) }}</span>
+        <span class="fact-label">Avg Score per GB RAM</span>
+    </div>
+    <div class="fact-card">
+        <span class="fact-title">CPU Thread Efficiency</span>
+        <span class="fact-value">{{ data.avg_score_per_thread | round(precision=1) }}</span>
+        <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>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>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+    const analyticsData = {{ json_data | safe }};
+
+    const primaryColor = '#d946ef';
+    const secondaryColor = '#a21caf';
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: true,
+        aspectRatio: 1.5,
+        plugins: {
+            legend: { display: false }
+        }
+    };
+
+    // Average per OS
+    new Chart(document.getElementById('osChart'), {
+        type: 'bar',
+        data: {
+            labels: analyticsData.os_labels,
+            datasets: [{
+                label: 'Average Score',
+                data: analyticsData.os_scores,
+                backgroundColor: primaryColor,
+                borderRadius: 6
+            }]
+        },
+        options: {
+            ...chartOptions,
+            indexAxis: 'y',
+        }
+    });
+
+    // Highest per OS
+    new Chart(document.getElementById('osMaxChart'), {
+        type: 'bar',
+        data: {
+            labels: analyticsData.os_max_labels,
+            datasets: [{
+                label: 'Highest Score',
+                data: analyticsData.os_max_scores,
+                backgroundColor: secondaryColor,
+                borderRadius: 6
+            }]
+        },
+        options: {
+            ...chartOptions,
+            indexAxis: 'y',
+        }
+    });
+
+    // Lowest per OS
+    new Chart(document.getElementById('osMinChart'), {
+        type: 'bar',
+        data: {
+            labels: analyticsData.os_min_labels,
+            datasets: [{
+                label: 'Lowest Score',
+                data: analyticsData.os_min_scores,
+                backgroundColor: secondaryColor,
+                borderRadius: 6
+            }]
+        },
+        options: {
+            ...chartOptions,
+            indexAxis: 'y',
+        }
+    });
+
+    // Score distribution
+    new Chart(document.getElementById('distChart'), {
+        type: 'bar',
+        data: {
+            labels: analyticsData.dist_labels,
+            datasets: [{
+                label: 'Reports',
+                data: analyticsData.dist_counts,
+                backgroundColor: 'rgba(217, 70, 239, 0.6)',
+                borderColor: primaryColor,
+                borderWidth: 2,
+                borderRadius: 4,
+                barPercentage: 1.0,
+                categoryPercentage: 0.9
+            }]
+        },
+        options: {
+            ...chartOptions,
+            scales: {
+                x: { grid: { display: false } },
+                y: { beginAtZero: true, ticks: { stepSize: 1 } }
+            }
+        }
+    });
+</script>
+
+<style>
+.header-section h2 { margin-bottom: 0.5rem; }
+
+.chart-card h3 {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+}
+
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.chart-card {
+    background: var(--bg-card);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    min-width: 0;
+    overflow: hidden;
+}
+
+.fact-card {
+    background: var(--bg-card);
+    color: var(--primary-color);
+    padding: 2rem;
+    border-radius: 12px;
+    text-align: center;
+}
+
+.fact-value {
+    font-size: 2.5rem;
+    font-weight: 800;
+    display: block;
+}
+
+.fact-title {
+    font-size: 0.9rem;
+    opacity: 0.9;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.fact-label {
+    font-size: 0.9rem;
+    opacity: 0.9;
+    /* text-transform: uppercase; */
+    /* letter-spacing: 1px; */
+}
+
+@media (max-width: 900px) {
+    .analytics-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+{% endblock %}