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

feat: add minimal chart to display API data with hardcoded parameters

Browse source
This commit is contained in:
Alexis Fourmaux 2026-05-11 23:17:43 +02:00
parent e71a0d9602
commit 8289d23cf9
4 changed files with 70 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
server/frontend/public/assets/js/api.js Normal file
View file

@ -0,0 +1,16 @@
const API_BASE = 'http://192.168.1.195:8000'
const DEV_EUI = '0586fe41112d83d9';
async function fetchConsumption({ start, end, granularity }) {
const params = new URLSearchParams({ start, end, granularity });
const url = `${API_BASE}/readings/${DEV_EUI}?${params}`;
const result = await fetch(url);
if (!result.ok) {
const err = await result.json().catch(() => ({}));
throw new Error(err.detail || `Erreur HTTP ${result.status}`);
}
const raw = await result.json();
return raw.points;
}

32
server/frontend/public/assets/js/chart.js Normal file
View 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" });
}

10
server/frontend/public/assets/js/main.js Normal file
View file

@ -0,0 +1,10 @@
window.onload = loadData
async function loadData() {
const points = await fetchConsumption({
start: '2026-05-04T00:00:00',
end: '2026-05-09T00:00:00',
granularity: 'day',
});
renderChart(points);
}

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

@ -5,8 +5,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simugaz WebUI</title>
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<main>
<section class="chart-section">
<div>
<canvas id="consumption-chart"></canvas>
</div>
</section>
</main>
<script src="/assets/js/api.js"></script>
<script src="/assets/js/chart.js"></script>
<script src="/assets/js/main.js"></script>
</body>
</html>