feat: add minimal chart to display API data with hardcoded parameters
This commit is contained in:
parent
e71a0d9602
commit
8289d23cf9
4 changed files with 70 additions and 1 deletions
32
server/frontend/public/assets/js/chart.js
Normal file
32
server/frontend/public/assets/js/chart.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
function renderChart(points) {
|
||||
const canvas = document.getElementById("consumption-chart");
|
||||
|
||||
const labels = points.map(p => formatPeriod(p.period));
|
||||
const data = points.map(p => p.delta_m3);
|
||||
|
||||
new Chart(canvas, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Consommation (m³)",
|
||||
data
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function formatPeriod(isoString) {
|
||||
const date = new Date(isoString);
|
||||
return date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" });
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue