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

37
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() { async function loadData() {
const points = await fetchConsumption({ const start = document.getElementById("date-start").value;
start: '2026-05-04T00:00:00', const end = document.getElementById("date-end").value;
end: '2026-05-09T00:00:00', const granularity = document.getElementById("granularity").value;
granularity: 'day',
}); const points = await fetchConsumption({
renderChart(points); 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> </head>
<body> <body>
<main> <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"> <section class="chart-section">
<div> <div>
<canvas id="consumption-chart"></canvas> <canvas id="consumption-chart"></canvas>