{% extends 'base.html' %}
{% block title %}Analyse — {{ meter.name }}{% endblock %}
{% block content %}<div class="container py-3"><h1 class="h3">Analyse — {{ meter.name }}</h1><p class="text-muted">Les valeurs brutes restent les relevés physiques en {{ meter.unit }}. Les intervalles ignorent explicitement les resets et les ruptures de compteur.</p>
<div class="row g-3 mb-3"><div class="col-lg-6"><div class="card"><div class="card-header">Index</div><div class="card-body"><canvas id="meterIndexChart" height="180" aria-label="Courbe des index"></canvas></div></div></div><div class="col-lg-6"><div class="card"><div class="card-header">Consommation par intervalle / jour</div><div class="card-body"><canvas id="meterConsumptionChart" height="180" aria-label="Consommation par intervalle et par jour"></canvas></div></div></div></div>
<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Du</th><th>Au</th><th>Index début</th><th>Index fin</th><th>Delta</th><th>Par jour</th><th>Contexte</th></tr></thead><tbody>{% for item in intervals|reverse %}<tr><td>{{ item.start_date.strftime('%d/%m/%Y') }}</td><td>{{ item.end_date.strftime('%d/%m/%Y') }}</td><td>{{ item.reading_start.value }} {{ meter.unit }}</td><td>{{ item.reading_end.value }} {{ meter.unit }}</td><td>{{ '%.2f'|format(item.raw_delta) }}</td><td>{{ '%.2f'|format(item.consumption_per_day) }}</td><td>{{ item.context.calendar }}</td></tr>{% else %}<tr><td colspan="7">Pas assez de relevés exploitables pour calculer un intervalle.</td></tr>{% endfor %}</tbody></table></div>
<a class="btn btn-outline-secondary" href="{{ url_for('planning.meter_monitoring') }}">Retour à la surveillance</a></div>
<script>
(function(){const rows=[{% for i in intervals %}{d:'{{ i.end_date.strftime('%d/%m') }}',start:{{ i.reading_start.value }},end:{{ i.reading_end.value }},delta:{{ i.raw_delta }},day:{{ i.consumption_per_day }}},{% endfor %}];
function draw(id, key, color){const c=document.getElementById(id),x=c.getContext('2d'),w=c.width=c.clientWidth*2,h=c.height=c.clientHeight*2;x.scale(2,2);const ww=c.clientWidth,hh=c.clientHeight,pad=18,max=Math.max(...rows.map(r=>r[key]),1),step=(ww-pad*2)/Math.max(rows.length-1,1);x.strokeStyle=color;x.lineWidth=2;x.beginPath();rows.forEach((r,n)=>{const px=pad+n*step,py=hh-pad-(r[key]/max)*(hh-pad*2);n?x.lineTo(px,py):x.moveTo(px,py)});x.stroke();x.fillStyle='#495057';x.font='11px sans-serif';rows.forEach((r,n)=>{if(n%Math.max(1,Math.floor(rows.length/6))===0)x.fillText(r.d,pad+n*step-10,hh-2)});}
if(rows.length){draw('meterIndexChart','end','#0d6efd');draw('meterConsumptionChart','delta','#198754');}
})();
</script>{% endblock %}