130 lines
3.9 KiB
JavaScript
130 lines
3.9 KiB
JavaScript
// dock‑door ranges
|
||
const doors = [
|
||
...Array.from({length: 138 - 124 + 1}, (_, i) => 124 + i),
|
||
...Array.from({length: 201 - 142 + 1}, (_, i) => 142 + i),
|
||
...Array.from({length: 209 - 202 + 1}, (_, i) => 202 + i),
|
||
];
|
||
|
||
// store readings per door
|
||
const doorData = {};
|
||
|
||
// color by heat index
|
||
function getColorFromHI(H) {
|
||
const pct = Math.min(Math.max((H - 70) / 30, 0), 1);
|
||
const r = 255, g = Math.round(255 * (1 - pct));
|
||
return `rgba(${r},${g},0,0.8)`;
|
||
}
|
||
|
||
// build the row of squares
|
||
function createGrid() {
|
||
const row = document.getElementById('dock-row');
|
||
doors.forEach(d => {
|
||
doorData[d] = [];
|
||
const sq = document.createElement('div');
|
||
sq.className = 'dock-square';
|
||
sq.dataset.door = d;
|
||
sq.textContent = d;
|
||
row.appendChild(sq);
|
||
});
|
||
}
|
||
|
||
// compute stats
|
||
function computeStats(arr) {
|
||
if (!arr.length) return null;
|
||
let sum = 0, max = arr[0], min = arr[0];
|
||
arr.forEach(r => {
|
||
sum += r.heatIndex;
|
||
if (r.heatIndex > max.heatIndex) max = r;
|
||
if (r.heatIndex < min.heatIndex) min = r;
|
||
});
|
||
const avg = (sum / arr.length).toFixed(2);
|
||
const latest = arr[arr.length - 1];
|
||
return { latest, max, min, avg };
|
||
}
|
||
|
||
// color a square
|
||
function fillSquare(door, hi) {
|
||
const sq = document.querySelector(`.dock-square[data-door="${door}"]`);
|
||
if (sq) sq.style.background = getColorFromHI(hi);
|
||
}
|
||
|
||
// load initial readings
|
||
async function loadInitial() {
|
||
const all = await fetch('/api/readings').then(r => r.json());
|
||
all.forEach(r => {
|
||
if (doorData[r.dockDoor]) doorData[r.dockDoor].push(r);
|
||
});
|
||
Object.entries(doorData).forEach(([d, arr]) => {
|
||
const stats = computeStats(arr);
|
||
if (stats) fillSquare(d, stats.latest.heatIndex);
|
||
});
|
||
}
|
||
|
||
// real‑time updates
|
||
function subscribeRealtime() {
|
||
const es = new EventSource('/api/stream');
|
||
es.addEventListener('new-reading', e => {
|
||
const r = JSON.parse(e.data);
|
||
if (doorData[r.dockDoor]) {
|
||
doorData[r.dockDoor].push(r);
|
||
fillSquare(r.dockDoor, r.heatIndex);
|
||
}
|
||
});
|
||
}
|
||
|
||
// tooltips on hover
|
||
function setupTooltips() {
|
||
const tooltip = document.getElementById('tooltip');
|
||
document.querySelectorAll('.dock-square').forEach(sq => {
|
||
sq.addEventListener('mouseenter', () => {
|
||
const d = Number(sq.dataset.door);
|
||
const stats = computeStats(doorData[d]);
|
||
if (!stats) return;
|
||
tooltip.innerHTML = `
|
||
<strong>Door ${d}</strong><br/>
|
||
Latest: HI ${stats.latest.heatIndex}, T ${stats.latest.temperature}°F, H ${stats.latest.humidity}%<br/>
|
||
Time: ${new Date(stats.latest.timestamp).toLocaleString()}<br/>
|
||
Max: ${stats.max.heatIndex} at ${new Date(stats.max.timestamp).toLocaleString()}<br/>
|
||
Min: ${stats.min.heatIndex} at ${new Date(stats.min.timestamp).toLocaleString()}<br/>
|
||
Avg HI: ${stats.avg}
|
||
`;
|
||
tooltip.style.display = 'block';
|
||
});
|
||
sq.addEventListener('mousemove', e => {
|
||
tooltip.style.top = `${e.clientY + 10}px`;
|
||
tooltip.style.left = `${e.clientX + 10}px`;
|
||
});
|
||
sq.addEventListener('mouseleave', () => {
|
||
tooltip.style.display = 'none';
|
||
});
|
||
});
|
||
}
|
||
|
||
// zoom via CSS vars
|
||
function setupZoom() {
|
||
const root = document.documentElement.style;
|
||
let scale = 1;
|
||
const initial = { size: 60, gap: 8, vgap: 24, wh: 200 };
|
||
const wrapper = document.querySelector('.heatmap-wrapper');
|
||
|
||
wrapper.addEventListener('wheel', e => {
|
||
if (e.ctrlKey) {
|
||
e.preventDefault();
|
||
scale += e.deltaY * -0.001;
|
||
scale = Math.min(Math.max(scale, 0.5), 3);
|
||
root.setProperty('--square-size', `${initial.size * scale}px`);
|
||
root.setProperty('--gap', `${initial.gap * scale}px`);
|
||
root.setProperty('--vertical-gap', `${initial.vgap * scale}px`);
|
||
root.setProperty('--warehouse-height', `${initial.wh * scale}px`);
|
||
}
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
createGrid();
|
||
loadInitial();
|
||
subscribeRealtime();
|
||
setupTooltips();
|
||
setupZoom();
|
||
});
|