From 1c312ab0a502120a9841cd7ab9b81f1f6635c8e9 Mon Sep 17 00:00:00 2001 From: JoshBaneyCS Date: Wed, 30 Apr 2025 02:21:43 +0000 Subject: [PATCH] Update public/scripts/trends.js --- public/scripts/trends.js | 140 +++++++++++++++++---------------------- 1 file changed, 62 insertions(+), 78 deletions(-) diff --git a/public/scripts/trends.js b/public/scripts/trends.js index 5aa9414..0956ab9 100644 --- a/public/scripts/trends.js +++ b/public/scripts/trends.js @@ -1,96 +1,98 @@ // public/scripts/trends.js -// ─── Configuration for timeframes ───────────────────────────────────────────── +// ─── Timeframe options ─────────────────────────────────────────────────────── const tfConfig = [ - { unit: 'hours', count: 24, label: 'Last 24 Hours' }, - { unit: 'days', count: 7, label: 'Last 7 Days' }, - { unit: 'weeks', count: 4, label: 'Last 4 Weeks' }, - { unit: 'months', count: 12, label: 'Last 12 Months' }, - { unit: 'years', count: 1, label: 'All Time' } + { unit:'hours', count:24, label:'Last 24 Hours' }, + { unit:'days', count:7, label:'Last 7 Days' }, + { unit:'weeks', count:4, label:'Last 4 Weeks' }, + { unit:'months', count:12, label:'Last 12 Months' }, + { unit:'years', count:1, label:'All Time' } ]; -// ─── Helpers ────────────────────────────────────────────────────────────────── -// Reformat EST SQL timestamp "YYYY-MM-DD HH:mm:ss" → "M/D/YY @HH:mm" +// ─── Helpers ───────────────────────────────────────────────────────────────── function formatESTTimestamp(ts) { - const [datePart, timePart] = ts.split(' '); - const [Y, M, D] = datePart.split('-').map(n => parseInt(n, 10)); - const [h, m] = timePart.split(':'); - const YY = String(Y).slice(-2); - return `${M}/${D}/${YY} @${h.padStart(2,'0')}:${m}`; + const [date, time] = ts.split(' '); + const [Y, M, D] = date.split('-').map(n=>parseInt(n,10)); + 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(n=>parseInt(n,10)); + const [h, m, s] = time.split(':').map(n=>parseInt(n,10)); + return new Date(Y, M-1, D, h, m, s); } - -// Subtract count units from a Date 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; - case 'years': d.setFullYear(d.getFullYear() - 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; } -// ─── State ──────────────────────────────────────────────────────────────────── +// ─── State & Chart Ref ─────────────────────────────────────────────────────── let readings = []; let chart; -// ─── Initialize on page load ───────────────────────────────────────────────── -document.addEventListener('DOMContentLoaded', async () => { +// ─── On Load ───────────────────────────────────────────────────────────────── +document.addEventListener('DOMContentLoaded', async() => { await loadReadings(); setupUI(); initChart(); updateView(); }); -// ─── Load readings from API ─────────────────────────────────────────────────── +// ─── Load & parse readings ─────────────────────────────────────────────────── async function loadReadings() { - const data = await fetch('/api/readings').then(r => r.json()); + const data = await fetch('/api/readings').then(r=>r.json()); readings = data.map(r => ({ ...r, formattedTs: formatESTTimestamp(r.timestamp), - dateObj: new Date(r.timestamp.replace(' ', 'T')) + dateObj: parseLocalDate(r.timestamp) })); } -// ─── UI Wiring ──────────────────────────────────────────────────────────────── +// ─── UI wiring ─────────────────────────────────────────────────────────────── function setupUI() { - // Timeframe slider + label + // timeframe slider 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; - // Metric toggles + // metric toggles document.getElementsByName('metric').forEach(cb => { cb.addEventListener('change', updateView); }); - // Table sorting - document.querySelectorAll('#trends-table thead th.sortable').forEach(th => { - th.addEventListener('click', () => { - 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) => { - const aText = a.cells[idx].textContent; - const bText = b.cells[idx].textContent; + // table sorting + document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{ + th.addEventListener('click', ()=>{ + 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)=>{ + const av = a.cells[idx].textContent; + const bv = b.cells[idx].textContent; return asc - ? aText.localeCompare(bText, undefined, { numeric: true }) - : bText.localeCompare(aText, undefined, { numeric: true }); + ? av.localeCompare(bv,undefined,{numeric:true}) + : bv.localeCompare(av,undefined,{numeric:true}); }); th.classList.toggle('asc', asc); - rows.forEach(r => tbody.appendChild(r)); + rows.forEach(r=>tbody.appendChild(r)); }); }); } -// ─── Initialize Chart.js line chart ─────────────────────────────────────────── +// ─── Chart.js setup ────────────────────────────────────────────────────────── function initChart() { const ctx = document.getElementById('trend-chart').getContext('2d'); chart = new Chart(ctx, { @@ -98,69 +100,51 @@ function initChart() { data: { labels: [], datasets: [] }, options: { scales: { - x: { display: true, title: { display: true, text: 'Time (EST)' } }, - y: { display: true, title: { display: true, text: 'Value' } } + x: { title: { display:true, text:'Time (EST)' } }, + y: { title: { display:true, text:'Value' } } }, - interaction: { mode: 'index', intersect: false }, - plugins: { legend: { position: 'top' } }, - maintainAspectRatio: false + interaction: { mode:'index', intersect:false }, + plugins: { legend:{ position:'top' } }, + maintainAspectRatio:false } }); } -// ─── Update both chart & table based on UI state ───────────────────────────── +// ─── Render chart & table ─────────────────────────────────────────────────── function updateView() { - // Determine timeframe cutoff const idx = +document.getElementById('timeframe-slider').value; const { unit, count } = tfConfig[idx]; const cutoff = subtract(new Date(), count, unit); - // Filter readings const filtered = readings.filter(r => r.dateObj >= cutoff); - // Determine selected metrics const selected = Array.from(document.getElementsByName('metric')) - .filter(cb => cb.checked) - .map(cb => cb.value); + .filter(cb=>cb.checked).map(cb=>cb.value); - // Prepare chart labels & datasets - const labels = filtered.map(r => r.formattedTs); + const labels = filtered.map(r=>r.formattedTs); const datasets = []; - if (selected.includes('temperature')) { - datasets.push({ - label: 'Temperature (°F)', - data: filtered.map(r => r.temperature), - tension: 0.3 - }); + datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 }); } if (selected.includes('humidity')) { - datasets.push({ - label: 'Humidity (%)', - data: filtered.map(r => r.humidity), - tension: 0.3 - }); + datasets.push({ label:'Humidity (%)', data:filtered.map(r=>r.humidity), tension:0.3 }); } if (selected.includes('heatIndex')) { - datasets.push({ - label: 'Heat Index (°F)', - data: filtered.map(r => r.heatIndex), - tension: 0.3 - }); + datasets.push({ label:'Heat Index (°F)', data:filtered.map(r=>r.heatIndex), tension:0.3 }); } - chart.data.labels = labels; - chart.data.datasets = datasets; + chart.data.labels = labels; + chart.data.datasets = datasets; chart.update(); populateTable(filtered); } -// ─── Populate the trends table ──────────────────────────────────────────────── +// ─── Populate the table ───────────────────────────────────────────────────── function populateTable(data) { const tbody = document.getElementById('trends-table-body'); tbody.innerHTML = ''; - data.forEach(r => { + data.forEach(r=>{ const tr = document.createElement('tr'); tr.innerHTML = ` ${r.formattedTs}