afourmaux-agreg/agreg-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add parameter choice for chart data

Browse source
This commit is contained in:
Alexis Fourmaux 2026-05-12 16:40:39 +02:00
parent d1840441c5
commit 28baab1956
3 changed files with 55 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
server/frontend/public/assets/js/chart.js
View file

@ -4,7 +4,7 @@ function renderChart(points) {
const labels = points.map(p => formatPeriod(p.period));
const data = points.map(p => p.delta_m3);
new Chart(canvas, {
let chart = new Chart(canvas, {
type: "bar",
data: {
labels,
@ -24,6 +24,8 @@ function renderChart(points) {
},
},
});
return chart;
}
function formatPeriod(isoString) {

35
server/frontend/public/assets/js/main.js
View file

@ -1,10 +1,31 @@
window.onload = loadData
let chart = null;
window.onload = init;
async function init() {
let start = new Date();
start.setDate(start.getDate() - 7);
const end = new Date();
document.getElementById("date-start").valueAsDate = start;
document.getElementById("date-end").valueAsDate = end;
document.getElementById("btn-refresh").addEventListener("click", loadData);
loadData();
}
async function loadData() {
const points = await fetchConsumption({
start: '2026-05-04T00:00:00',
end: '2026-05-09T00:00:00',
granularity: 'day',
});
renderChart(points);
const start = document.getElementById("date-start").value;
const end = document.getElementById("date-end").value;
const granularity = document.getElementById("granularity").value;
const points = await fetchConsumption({
start: start,
end: end,
granularity: granularity,
});
if (chart) {
chart.destroy();
}
chart = renderChart(points);
}

23
server/frontend/public/index.html
View file

@ -9,6 +9,29 @@
</head>
<body>
<main>
<section class="filters">
<fieldset>
<legend>Période</legend>
<div>
<label for="date-start">Du</label>
<input type="date" id="date-start" name="date-start" />
</div>
<div>
<label for="date-end">Au</label>
<input type="date" id="date-end" name="date-end" />
</div>
<div>
<label for="granularity">Granularité</label>
<select id="granularity" name="granularity">
<option value="hour">Heure</option>
<option value="day" selected>Jour</option>
<option value="week">Semaine</option>
<option value="month">Mois</option>
</select>
</div>
</fieldset>
<button class="btn-primary" id="btn-refresh">Actualiser</button>
</section>
<section class="chart-section">
<div>
<canvas id="consumption-chart"></canvas>