Initial commit

templates/grafiek.html

@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+
+{% block title %}CO2-verloop {{ lokaal }}{% endblock %}
+{% block page_title %}CO2-verloop: {{ lokaal }}{% endblock %}
+{% block main_class %}medium{% endblock %}
+
+{% block head %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+{% endblock %}
+
+{% block content %}
+<div class="card">
+    <div class="page-head">
+        <h2>📊 {{ lokaal }}</h2>
+        <div class="actions">
+            <a href="{{ url_for('co2_sensor.dashboard') }}" class="btn btn-light">⬅ Terug</a>
+            <button type="button" onclick="downloadChart()" class="btn-success">💾 Download als JPEG</button>
+        </div>
+    </div>
+
+    <div id="chart-wrapper" style="width: 100%; height: 420px; background: #fff;">
+        <canvas id="co2Chart"></canvas>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    const ctx = document.getElementById('co2Chart').getContext('2d');
+
+    // Witte achtergrond zodat de JPEG-export niet zwart wordt
+    const whiteBackgroundPlugin = {
+        id: 'custom_canvas_background_color',
+        beforeDraw: (chart) => {
+            const c = chart.canvas.getContext('2d');
+            c.save();
+            c.globalCompositeOperation = 'destination-over';
+            c.fillStyle = 'white';
+            c.fillRect(0, 0, chart.width, chart.height);
+            c.restore();
+        }
+    };
+
+    const co2Chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: {{ labels|tojson }},
+            datasets: [{
+                label: 'CO2-gehalte (ppm)',
+                data: {{ data|tojson }},
+                borderColor: '#1e6fa5',
+                backgroundColor: 'rgba(30, 111, 165, 0.1)',
+                borderWidth: 2,
+                pointRadius: 2,
+                fill: true,
+                tension: 0.3
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: {
+                y: { beginAtZero: false, suggestedMin: 400, title: { display: true, text: 'ppm' }, grid: { color: '#eef2f6' } },
+                x: { title: { display: true, text: 'Tijdstip' }, grid: { display: false } }
+            }
+        },
+        plugins: [whiteBackgroundPlugin]
+    });
+
+    function downloadChart() {
+        const canvas = document.getElementById('co2Chart');
+        const link = document.createElement('a');
+        const timestamp = new Date().toISOString().slice(0, 10);
+        link.download = `CO2_Grafiek_{{ lokaal }}_${timestamp}.jpg`;
+        link.href = canvas.toDataURL('image/jpeg', 0.9);
+        link.click();
+    }
+</script>
+{% endblock %}