diff --git a/public/index.js b/public/index.js index bf952e2..834dcc3 100644 --- a/public/index.js +++ b/public/index.js @@ -78,12 +78,41 @@ async function drawRegions() { const avg = ecsw.reduce((acc, v) => acc + v.count, 0) / ecsw.length const current = ecsw[ecsw.length - 1]?.count ?? NaN const delta = current - avg - const busy = delta > 0 - const color = busy ? '#ff0000' : '#00ff00' + + if (Number.isNaN(delta)) return + + const min = Math.min(...data.map(d => d.count)) + const max = Math.max(...data.map(d => d.count)) + // const busy = delta > 0 + // const color = busy ? '#ff0000' : '#00ff00' + + const red = new Color(255, 0, 0) + const green = new Color(0, 255, 0) + const color = red.interpolate(green, current / (max - min)) + buildings.ECSW.poly.setStyle({ color }) console.log({avg, current, delta, color}) } +class Color { + constructor(r, g, b) { + this.r = r + this.g = g + this.b = b + } + asRgbCss() { + return "rgb("+this.r+", "+this.g+", "+this.b+")" + } + interpolate(other, ratio) { + return new Color( + this.r + (other.r - this.r) * ratio, + this.g + (other.g - this.g) * ratio, + this.b + (other.b - this.b) * ratio + ) + } +} + + function getData() { return fetch('/db.csv').then(res => res.text()).then(text => { return text.trim().split('\n').map(line => { @@ -106,14 +135,16 @@ async function displayCard(id) { }).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 avg = data.reduce((acc, v) => acc + v.count, 0) / data.length const delta = current - avg - const busy = delta > 0 - const color = busy ? '#ff0000' : '#00ff00' + const min = Math.min(...data.map(d => d.count)) + const max = Math.max(...data.map(d => d.count)) - console.log({ avg, current, delta, busy, color }) + const red = new Color(255, 0, 0) + const green = new Color(0, 255, 0) + const color = red.interpolate(green, current / (max - min)) const msg = Number.isNaN(delta) ? "No data..."