81 lines
2.6 KiB
HTML
81 lines
2.6 KiB
HTML
{% 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 %}
|