🌍🚉 Checkpoint

./public/index.js:1954897/158649

public/index.js

@@ -35,6 +35,8 @@ const map = L.map('map', {
     maxZoom: 18
 }).setView([32.98613, -96.75042], 18)
 
+const INTERVAL = 10 * 60 * 1000
+const STEP = 2 * 60 * 1000
 
 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
     maxZoom: 18,
@@ -71,7 +73,7 @@ setTimeout(drawRegions, 60 * 1000)
 async function drawRegions() {
     const data = await getData()
 
-    const ecsw = data.filter(d => d.loc === 'ECSW' && Date.now() - d.time < 60 * 60 * 1000)
+    const ecsw = data.filter(d => d.loc === 'ECSW' && Date.now() - d.time < INTERVAL)
 
     console.log(ecsw)
 
@@ -89,17 +91,15 @@ async function drawRegions() {
     console.log({current, max, min})
     const color = red.interpolate(green, current / (max - min))
 
-    console.log(color)
-
-    buildings.ECSW.poly.setStyle({ color })
+    buildings.ECSW.poly.setStyle({ color: color.asRgbCss() })
     console.log({avg, current, delta, color})
 }
 
 class Color {
     constructor(r, g, b) {
-        this.r = Math.ceil(0, Math.floor(255, r))
-        this.g = Math.ceil(0, Math.floor(255, g))
-        this.b = Math.ceil(0, Math.floor(255, b))
+        this.r = Math.max(0, Math.min(255, r))
+        this.g = Math.max(0, Math.min(255, g))
+        this.b = Math.max(0, Math.min(255, b))
     }
     asRgbCss() {
         return "rgb("+this.r+", "+this.g+", "+this.b+")"
@@ -129,7 +129,7 @@ function lerp(v0, v1, x) {
 
 
 async function displayCard(id) {
-    const data = (await getData()).filter(d => d.loc === id && Date.now() - d.time < 60 * 60 * 1000)
+    const data = (await getData()).filter(d => d.loc === id && Date.now() - d.time < INTERVAL)
     const card = document.getElementById("card")
     await card.animate([
         { transform: 'translateY(50px)', opacity: "0" },
@@ -152,6 +152,8 @@ async function displayCard(id) {
     // const green = new Color(0, 255, 0)
     // const color = red.interpolate(green, current / (max - min))
 
+    console.log(delta)
+
     const msg = Number.isNaN(delta)
         ? "No data..."
         : (busy ? "Busier than usual": "Not as busy :)")
@@ -175,9 +177,8 @@ async function displayCard(id) {
 
 function updateChart(data) {
     const parsed = data.map(d => {
-        const TEN_MINUTES = 10 * 60 * 1000
         // this is 0-5
-        let ago = Math.floor((Date.now() - d.time) / TEN_MINUTES)
+        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) => {
@@ -192,7 +193,12 @@ function updateChart(data) {
     })
 
     const ctx = document.getElementById('myChart').getContext('2d')
-    const labels = ['Now', '10m ago', '20m ago', '30m ago', '40m ago', '50m ago'].reverse()
+
+    const min = STEP / 1000 / 60
+
+    const labels = [
+        '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',