diff --git a/charts.html b/charts.html index c8e43f6..044dc32 100644 --- a/charts.html +++ b/charts.html @@ -15,12 +15,14 @@ const humidityColor = 'rgb(45,141,45)'; const tempColor = 'rgb(0,134,222)'; const co2Color = 'rgb(194,30,30)'; + let minutesDisplayed = 60; async function getData() { let urlEndpoint = "/" + ROOT_URL + "data/"; const pathname = window.location.pathname; if (pathname.includes("since")) { - urlEndpoint += "since/" + pathname.slice(pathname.lastIndexOf("/") + 1); + minutesDisplayed = Number(pathname.slice(pathname.lastIndexOf("/") + 1)); + urlEndpoint += "since/" + minutesDisplayed; } const data = await fetch(urlEndpoint); return transformData(await data.json()); @@ -127,16 +129,30 @@ setInterval(async () => { const newDatum = await fetch("/" + ROOT_URL + "data/last/"); const snapshot = (await newDatum.json()).snapshots[0]; - chart.data.datasets[0].data.splice(0, 1); - chart.data.datasets[0].data.push({x: snapshot.time, y: snapshot.humidity}); - chart.data.datasets[1].data.splice(0, 1); - chart.data.datasets[1].data.push({x: snapshot.time, y: snapshot.temp}); - chart.data.datasets[2].data.splice(0, 1); - chart.data.datasets[2].data.push({x: snapshot.time, y: snapshot.co2}); - chart.update(0); + if (snapshot.time !== chart.data.datasets[0].x) { + removeExpiredData(chart); + insertSnapshot(chart, snapshot); + } }, 10 * 1000); } + function insertSnapshot(chart, snapshot) { + chart.data.datasets[0].data.push({x: snapshot.time, y: snapshot.humidity}); + chart.data.datasets[1].data.push({x: snapshot.time, y: snapshot.temp}); + chart.data.datasets[2].data.push({x: snapshot.time, y: snapshot.co2}); + chart.update(0); + } + + function removeExpiredData(chart) { + for (let i = 0; i < chart.data.datasets[0].data.length; i++) { + if ((Date.now() - Date.parse(chart.data.datasets[0].data[i].x)) > minutesDisplayed * 60000) { + chart.data.datasets[0].data.splice(i, 1); + chart.data.datasets[1].data.splice(i, 1); + chart.data.datasets[2].data.splice(i, 1); + } + } + } + initChart();