✍️🌆 Checkpoint

./public/index.js:1954897/86056

db.csv

@@ -169,3 +169,38 @@ ECSW,1636873174467,4
 ECSW,1636873194206,3
 ECSW,1636873221180,3
 ECSW,1636873239096,3
+ECSW,1636873261216,2
+ECSW,1636873286855,2
+ECSW,1636873311157,3
+ECSW,1636873329266,3
+ECSW,1636873346467,3
+ECSW,1636873363409,3
+ECSW,1636873382160,3
+ECSW,1636873410468,3
+ECSW,1636873433254,3
+ECSW,1636873450885,3
+ECSW,1636873468299,3
+ECSW,1636873486240,3
+ECSW,1636873505283,3
+ECSW,1636873523355,3
+ECSW,1636873541184,3
+ECSW,1636873559256,3
+ECSW,1636873577124,3
+ECSW,1636873594449,3
+ECSW,1636873612163,3
+ECSW,1636873630260,3
+ECSW,1636873649679,3
+ECSW,1636873667134,3
+ECSW,1636873685213,2
+ECSW,1636873703221,2
+ECSW,1636873721171,2
+ECSW,1636873739103,3
+ECSW,1636873757098,2
+ECSW,1636873775143,2
+ECSW,1636873793255,2
+ECSW,1636873810439,3
+ECSW,1636873828263,2
+ECSW,1636873846162,2
+ECSW,1636873863197,2
+ECSW,1636873894268,4
+ECSW,1636873912349,3

public/index.js

@@ -28,12 +28,14 @@ const buildings = {
     }
 }
 
+const data = getData()
 
 const map = L.map('map', {
     minZoom: 15,
     maxZoom: 18
 }).setView([32.98649, -96.7485], 18)
 
+
 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
     maxZoom: 18,
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
@@ -62,11 +64,12 @@ for (const [id, building] of Object.entries(buildings)) {
     buildings[id].poly = poly
 }
 
-fetch('/db.csv').then(res => res.text()).then(text => {
-    const data = text.trim().split('\n').map(line => {
-        const [loc, time, count] = line.split(',')
-        return { loc, time: new Date(+time), count: parseInt(count) }
-    })
+// Update map colors every minute
+drawRegions()
+setTimeout(drawRegions, 60 * 1000)
+
+async function drawRegions() {
+    const data = await getData()
 
     const ecsw = data.filter(d => d.loc === 'ECSW')
 
@@ -79,9 +82,20 @@ fetch('/db.csv').then(res => res.text()).then(text => {
     const color = busy ? '#ff0000' : '#00ff00'
     buildings.ECSW.poly.setStyle({ color })
     console.log({avg, current, delta, color})
-})
+}
+
+function getData() {
+    return fetch('/db.csv').then(res => res.text()).then(text => {
+        return text.trim().split('\n').map(line => {
+            const [loc, time, count] = line.split(',')
+            return { loc, time: new Date(+time), count: parseInt(count) }
+        })
+    })
+}
+
 
 async function displayCard(id) {
+    const data = (await getData()).filter(d => d.loc === id)
     const card = document.getElementById("card")
     await card.animate([
         { transform: 'translateY(50px)', opacity: "0" },
@@ -90,9 +104,20 @@ async function displayCard(id) {
         fill: 'forwards',
         easing: 'cubic-bezier(0.4, 0.0, 1, 1)'
     }).finished
+
+    console.log(data)
+
+    const avg = data.reduce((acc, v) => acc + v.count, 0) / data.length
+    const current = data[data.length - 1]?.count ?? NaN
+    const delta = current - avg
+    const busy = delta > 0
+    const color = busy ? '#ff0000' : '#00ff00'
+
+    console.log({ avg, current, delta, busy, color })
+
     card.innerHTML = `
         <h1>${buildings[id].name}</h1>
-        <p>Busier than usual</p>
+        <p>${busy ? "Busier than usual" : "Not as busy :)"}</p>
         <canvas id="myChart" height="80"></canvas>
     `
     card.style.setProperty("--region", `'${id}'`)