From 68b421bdac46e76d54e48ac31ac926f9f6e44f2c Mon Sep 17 00:00:00 2001 From: JoshBaneyCS Date: Wed, 30 Apr 2025 02:38:25 +0000 Subject: [PATCH] Update public/scripts/trends.js --- public/scripts/trends.js | 106 ++++++++++++++++----------------------- 1 file changed, 43 insertions(+), 63 deletions(-) diff --git a/public/scripts/trends.js b/public/scripts/trends.js index 4808997..1136ba0 100644 --- a/public/scripts/trends.js +++ b/public/scripts/trends.js @@ -10,26 +10,24 @@ const tfConfig = [ ]; // ─── Helpers ───────────────────────────────────────────────────────────────── -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 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 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; @@ -39,42 +37,33 @@ function subtract(date, count, unit) { let readings = []; let chart; -// ─── Init ───────────────────────────────────────────────────────────────────── -document.addEventListener('DOMContentLoaded', async () => { - await loadReadings(); - setupUI(); - initChart(); - updateView(); +// ─── 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(); }); -// ─── 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)=>{ @@ -88,12 +77,12 @@ function setupUI() { }); } -// ─── Chart Setup ────────────────────────────────────────────────────────────── -function initChart() { +// ─── Chart.js 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)'} }, @@ -107,43 +96,34 @@ function initChart() { } // ─── Render ─────────────────────────────────────────────────────────────────── -function updateView() { +function updateView(){ const idx = +document.getElementById('timeframe-slider').value; - const { unit, count } = tfConfig[idx]; - const cutoff = subtract(new Date(), count, unit); - - const filtered = readings.filter(r=>r.dateObj >= cutoff); + const {unit,count} = tfConfig[idx]; + const cutoff = subtract(Date.now(),count,unit); + 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.formattedTs); + const labels = filtered.map(r=>r.ts); 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 = ''; - data.forEach(r=>{ + filtered.forEach(r=>{ const tr = document.createElement('tr'); tr.innerHTML = ` - ${r.formattedTs} + ${r.ts} ${r.temperature.toFixed(1)} ${r.humidity.toFixed(1)} ${r.heatIndex.toFixed(2)}