🏟🌦 Checkpoint

./public/index.js:1954897/89394

db.csv

@@ -543,3 +543,32 @@ ECSW,1636909147757,4
 ECSW,1636909163750,6
 ECSW,1636909180516,5
 ECSW,1636909215665,6
+ECSW,1636909229400,5
+ECSW,1636909243731,6
+ECSW,1636909274937,7
+ECSW,1636909289079,5
+ECSW,1636909315656,6
+ECSW,1636909333963,6
+ECSW,1636909348537,5
+ECSW,1636909363417,4
+ECSW,1636909382345,5
+ECSW,1636909407321,5
+ECSW,1636909421900,3
+ECSW,1636909438132,5
+ECSW,1636909452476,4
+ECSW,1636909466423,4
+ECSW,1636909481481,4
+ECSW,1636909495551,3
+ECSW,1636909532824,3
+ECSW,1636909545720,3
+ECSW,1636909565938,4
+ECSW,1636909580958,6
+ECSW,1636909601361,6
+ECSW,1636909625543,6
+ECSW,1636909659108,6
+ECSW,1636909672982,4
+ECSW,1636909693465,5
+ECSW,1636909707199,5
+ECSW,1636909721382,5
+ECSW,1636909744777,4
+ECSW,1636909764092,5

public/index.js

@@ -68,9 +68,15 @@ for (const [id, building] of Object.entries(buildings)) {
 
 // Update map colors every minute
 drawRegions()
+let chart = null
+let currentChart = null
 setInterval(() => {
     drawRegions()
-}, 60 * 1000)
+    if (chart) {
+        updateChart(currentChart)
+    }
+// }, 60 * 1000)
+}, 6000)
 
 async function drawRegions() {
     const data = await getData()
@@ -161,7 +167,7 @@ async function displayCard(id) {
         <canvas id="myChart" height="80"></canvas>
     `
     card.style.setProperty("--region", `'${id}'`)
-    updateChart(data)
+    updateChart(id)
     await card.animate([
         { transform: 'translateY(0%)', opacity: "1" },
     ], {
@@ -172,24 +178,31 @@ async function displayCard(id) {
 }
 
 
-function updateChart(data) {
-    const parsed = data.map(d => {
-        // this is 0-5
-        let ago = Math.floor((Date.now() - d.time) / STEP)
-        // if (20 < ago) ago = 20
-        return {time: d.time, ago, count: d.count}
-    }).reduce((acc, v) => {
-        if (!acc[v.ago]) {
-            acc[v.ago] = []
-        }
-        acc[v.ago].push(v.count)
-        return acc
-    }, Array.from({ length: 6 })).map(v => {
-        if (typeof v === 'undefined') return NaN
-        return v.reduce((acc, v) => acc + v, 0) / v.length
-    })
+async function updateChart(id) {
+    currentChart = id
+    const parsed = (await getData())
+        .filter(d => d.loc === id && Date.now() - d.time < INTERVAL)
+        .map(d => {
+            // this is 0-5
+            let ago = Math.floor((Date.now() - d.time) / STEP)
+            // if (20 < ago) ago = 20
+            return {time: d.time, ago, count: d.count}
+        }).reduce((acc, v) => {
+            if (!acc[v.ago]) {
+                acc[v.ago] = []
+            }
+            acc[v.ago].push(v.count)
+            return acc
+        }, Array.from({ length: 6 })).map(v => {
+            if (typeof v === 'undefined') return NaN
+            return v.reduce((acc, v) => acc + v, 0) / v.length
+        })
+
+    const canvas = document.getElementById('myChart')
+    canvas.width = canvas.width
+    canvas.innerHTML = canvas.innerHTML
+    const ctx = canvas.getContext('2d')
 
-    const ctx = document.getElementById('myChart').getContext('2d')
 
     const min = STEP / 1000 / 60
 
@@ -197,27 +210,40 @@ function updateChart(data) {
         'Now', `${min}m ago`, `${min * 2}m ago`, `${min * 3}m ago`, `${min * 4}m ago`, `${min * 5}m ago`
     ].reverse()
 
-    new Chart(ctx, {
-        type: 'line',
-        data: {
-            labels,
-            datasets: [{
-                label: 'Density',
-                data: parsed.slice(0, labels.length).reverse(),
-                borderColor: '#55aadd',
-                backgroundColor: '#55aadd',
-                // borderWidth: 2
-            }]
-        },
-        options: {
-            scales: {
-                x: {
-                    beginAtZero: true,
-                },
-                y: {
-                    beginAtZero: true,
+    if (!chart) {
+        chart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [{
+                    label: 'Density',
+                    data: parsed.slice(0, labels.length).reverse(),
+                    borderColor: '#55aadd',
+                    backgroundColor: '#55aadd',
+                    // borderWidth: 2
+                }]
+            },
+            options: {
+                scales: {
+                    x: {
+                        beginAtZero: true,
+                    },
+                    y: {
+                        beginAtZero: true,
+                    }
                 }
             }
-        }
-    })
+        })
+    } else {
+        chart.data.datasets = [{
+            label: 'Density',
+            data: parsed.slice(0, labels.length).reverse(),
+            borderColor: '#55aadd',
+            backgroundColor: '#55aadd',
+            // borderWidth: 2
+        }]
+        chart.update()
+    }
+
+
 }