diff --git a/server/frontend/public/assets/js/api.js b/server/frontend/public/assets/js/api.js
new file mode 100644
index 0000000..8387651
--- /dev/null
+++ b/server/frontend/public/assets/js/api.js
@@ -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;
+}
\ No newline at end of file
diff --git a/server/frontend/public/assets/js/chart.js b/server/frontend/public/assets/js/chart.js
new file mode 100644
index 0000000..80aa9d0
--- /dev/null
+++ b/server/frontend/public/assets/js/chart.js
@@ -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" });
+}
diff --git a/server/frontend/public/assets/js/main.js b/server/frontend/public/assets/js/main.js
new file mode 100644
index 0000000..65a0475
--- /dev/null
+++ b/server/frontend/public/assets/js/main.js
@@ -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);
+}
\ No newline at end of file
diff --git a/server/frontend/public/index.html b/server/frontend/public/index.html
index 99b0eac..482124a 100644
--- a/server/frontend/public/index.html
+++ b/server/frontend/public/index.html
@@ -5,8 +5,19 @@
Simugaz WebUI
+
- Hello, World!
+
+
+
+
+
+
+