From bf8728cfd86a4e5e2db5c90bc02d324788732221 Mon Sep 17 00:00:00 2001 From: JoshBaneyCS Date: Wed, 30 Apr 2025 04:00:25 +0000 Subject: [PATCH] Update public/scripts/trends.js --- public/scripts/trends.js | 106 +++++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 43 deletions(-) diff --git a/public/scripts/trends.js b/public/scripts/trends.js index 1136ba0..4808997 100644 --- a/public/scripts/trends.js +++ b/public/scripts/trends.js @@ -10,24 +10,26 @@ const tfConfig = [ ]; // ─── Helpers ───────────────────────────────────────────────────────────────── -function formatEST(epoch) { - return new Date(epoch).toLocaleString('en-US', { - timeZone: 'America/New_York', - month: 'numeric', - day: 'numeric', - year: '2-digit', - hour12: false, - hour: '2-digit', - minute: '2-digit' - }).replace(',', ' @'); +function formatESTTimestamp(ts) { + // ts is "YYYY-MM-DD HH:mm:ss" in Eastern time + const [date, time] = ts.split(' '); + const [Y, M, D] = date.split('-').map(Number); + const [h, m] = time.split(':'); + return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`; +} +function parseLocalDate(ts) { + const [date, time] = ts.split(' '); + const [Y, M, D] = date.split('-').map(Number); + const [h, m, s] = time.split(':').map(Number); + return new Date(Y, M-1, D, h, m, s); } function subtract(date, count, unit) { const d = new Date(date); - switch(unit){ - case 'hours': d.setHours(d.getHours() - count); break; - case 'days': d.setDate(d.getDate() - count); break; - case 'weeks': d.setDate(d.getDate() - 7*count); break; - case 'months': d.setMonth(d.getMonth() - count); break; + switch(unit) { + case 'hours': d.setHours(d.getHours() - count); break; + case 'days': d.setDate(d.getDate() - count); break; + case 'weeks': d.setDate(d.getDate() - 7*count); break; + case 'months': d.setMonth(d.getMonth() - count); break; case 'years': d.setFullYear(d.getFullYear() - count); break; } return d; @@ -37,33 +39,42 @@ function subtract(date, count, unit) { let readings = []; let chart; -// ─── On Load ───────────────────────────────────────────────────────────────── -document.addEventListener('DOMContentLoaded', async() => { - const data = await fetch('/api/readings').then(r=>r.json()); - readings = data.map(r=>({ - ...r, - ts: formatEST(r.epoch_ms), - date: new Date(r.epoch_ms) - })); - setupUI(); initChart(); updateView(); +// ─── Init ───────────────────────────────────────────────────────────────────── +document.addEventListener('DOMContentLoaded', async () => { + await loadReadings(); + setupUI(); + initChart(); + updateView(); }); +// ─── Load readings ──────────────────────────────────────────────────────────── +async function loadReadings() { + const data = await fetch('/api/readings').then(r=>r.json()); + readings = data.map(r => ({ + ...r, + formattedTs: formatESTTimestamp(r.timestamp), + dateObj: parseLocalDate(r.timestamp) + })); +} + // ─── UI Wiring ──────────────────────────────────────────────────────────────── -function setupUI(){ +function setupUI() { const slider = document.getElementById('timeframe-slider'); const label = document.getElementById('timeframe-label'); - slider.addEventListener('input',()=>{ + slider.addEventListener('input', ()=>{ label.textContent = tfConfig[slider.value].label; updateView(); }); label.textContent = tfConfig[slider.value].label; - document.getElementsByName('metric').forEach(cb=>cb.addEventListener('change',updateView)); + document.getElementsByName('metric').forEach(cb=>{ + cb.addEventListener('change', updateView); + }); document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{ th.addEventListener('click', ()=>{ - const idx = th.cellIndex; - const asc = !th.classList.contains('asc'); + const idx = th.cellIndex; + const asc = !th.classList.contains('asc'); const tbody = document.getElementById('trends-table-body'); const rows = Array.from(tbody.rows); rows.sort((a,b)=>{ @@ -77,12 +88,12 @@ function setupUI(){ }); } -// ─── Chart.js Setup ────────────────────────────────────────────────────────── -function initChart(){ +// ─── Chart Setup ────────────────────────────────────────────────────────────── +function initChart() { const ctx = document.getElementById('trend-chart').getContext('2d'); - chart = new Chart(ctx,{ + chart = new Chart(ctx, { type:'line', - data:{labels:[],datasets:[]}, + data:{ labels:[], datasets:[] }, options:{ scales:{ x:{ title:{display:true,text:'Time (EST)'} }, @@ -96,34 +107,43 @@ function initChart(){ } // ─── Render ─────────────────────────────────────────────────────────────────── -function updateView(){ +function updateView() { const idx = +document.getElementById('timeframe-slider').value; - const {unit,count} = tfConfig[idx]; - const cutoff = subtract(Date.now(),count,unit); + const { unit, count } = tfConfig[idx]; + const cutoff = subtract(new Date(), count, unit); + + const filtered = readings.filter(r=>r.dateObj >= cutoff); - const filtered = readings.filter(r=>r.date>=cutoff); const selected = Array.from(document.getElementsByName('metric')) .filter(cb=>cb.checked).map(cb=>cb.value); - const labels = filtered.map(r=>r.ts); + const labels = filtered.map(r=>r.formattedTs); const datasets = []; - if (selected.includes('temperature')) + if (selected.includes('temperature')) { datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 }); - if (selected.includes('humidity')) + } + if (selected.includes('humidity')) { datasets.push({ label:'Humidity (%)', data:filtered.map(r=>r.humidity), tension:0.3 }); - if (selected.includes('heatIndex')) + } + if (selected.includes('heatIndex')) { datasets.push({ label:'Heat Index (°F)', data:filtered.map(r=>r.heatIndex), tension:0.3 }); + } chart.data.labels = labels; chart.data.datasets = datasets; chart.update(); + populateTable(filtered); +} + +// ─── Table ─────────────────────────────────────────────────────────────────── +function populateTable(data) { const tbody = document.getElementById('trends-table-body'); tbody.innerHTML = ''; - filtered.forEach(r=>{ + data.forEach(r=>{ const tr = document.createElement('tr'); tr.innerHTML = ` - ${r.ts} + ${r.formattedTs} ${r.temperature.toFixed(1)} ${r.humidity.toFixed(1)} ${r.heatIndex.toFixed(2)}