From ccc9818242302867d39edcdf34287078df26b215 Mon Sep 17 00:00:00 2001 From: JoshBaneyCS Date: Wed, 30 Apr 2025 01:40:12 +0000 Subject: [PATCH] Update public/scripts/trends.js time --- public/scripts/trends.js | 89 +++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 47 deletions(-) diff --git a/public/scripts/trends.js b/public/scripts/trends.js index 4c03b86..5aa9414 100644 --- a/public/scripts/trends.js +++ b/public/scripts/trends.js @@ -1,21 +1,21 @@ // public/scripts/trends.js -// ─── Configuration ──────────────────────────────────────────────────────────── +// ─── Configuration for timeframes ───────────────────────────────────────────── 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: 'year', 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 ────────────────────────────────────────────────────────────────── -// Format an EST SQL timestamp ("YYYY-MM-DD HH:mm:ss") to "M/D/YY @HH:mm" +// Reformat EST SQL timestamp "YYYY-MM-DD HH:mm:ss" → "M/D/YY @HH:mm" function formatESTTimestamp(ts) { - const [date, time] = ts.split(' '); - const [Y, M, D] = date.split('-').map(n=>parseInt(n,10)); - const [h, m] = time.split(':'); - const YY = String(Y).slice(-2); + 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}`; } @@ -23,11 +23,11 @@ function formatESTTimestamp(ts) { 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 'year': d.setFullYear(d.getFullYear() - count); break; + 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; } @@ -36,27 +36,27 @@ function subtract(date, count, unit) { let readings = []; let chart; -// ─── Initialize ─────────────────────────────────────────────────────────────── +// ─── Initialize on page load ───────────────────────────────────────────────── document.addEventListener('DOMContentLoaded', async () => { await loadReadings(); setupUI(); initChart(); - updateView(); // initial render + updateView(); }); -// ─── Load data ──────────────────────────────────────────────────────────────── +// ─── Load readings from API ─────────────────────────────────────────────────── async function loadReadings() { 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: new Date(r.timestamp.replace(' ', 'T')) })); } // ─── UI Wiring ──────────────────────────────────────────────────────────────── function setupUI() { - // Timeframe slider + // Timeframe slider + label const slider = document.getElementById('timeframe-slider'); const label = document.getElementById('timeframe-label'); slider.addEventListener('input', () => { @@ -70,18 +70,19 @@ function setupUI() { cb.addEventListener('change', updateView); }); - // Table sorting (simple toggle asc/desc per column) + // Table sorting document.querySelectorAll('#trends-table thead th.sortable').forEach(th => { th.addEventListener('click', () => { - const field = th.dataset.field; - const tbody = document.getElementById('trends-table-body'); - const rows = Array.from(tbody.rows); - const asc = !th.classList.contains('asc'); - rows.sort((a,b) => { - const av = a.cells[th.cellIndex].textContent; - const bv = b.cells[th.cellIndex].textContent; - return asc ? av.localeCompare(bv, undefined, {numeric:true}) - : bv.localeCompare(av, undefined, {numeric:true}); + 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; + return asc + ? aText.localeCompare(bText, undefined, { numeric: true }) + : bText.localeCompare(aText, undefined, { numeric: true }); }); th.classList.toggle('asc', asc); rows.forEach(r => tbody.appendChild(r)); @@ -89,7 +90,7 @@ function setupUI() { }); } -// ─── Chart Initialization ───────────────────────────────────────────────────── +// ─── Initialize Chart.js line chart ─────────────────────────────────────────── function initChart() { const ctx = document.getElementById('trend-chart').getContext('2d'); chart = new Chart(ctx, { @@ -107,13 +108,14 @@ function initChart() { }); } -// ─── Update everything on UI change ────────────────────────────────────────── +// ─── Update both chart & table based on UI state ───────────────────────────── 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 within timeframe + // Filter readings const filtered = readings.filter(r => r.dateObj >= cutoff); // Determine selected metrics @@ -121,15 +123,14 @@ function updateView() { .filter(cb => cb.checked) .map(cb => cb.value); - // Prepare chart data - const labels = filtered.map(r => r.formattedTs); + // Prepare chart labels & datasets + const labels = filtered.map(r => r.formattedTs); const datasets = []; + if (selected.includes('temperature')) { datasets.push({ label: 'Temperature (°F)', data: filtered.map(r => r.temperature), - borderColor: 'rgba(255,99,132,0.8)', - backgroundColor: 'rgba(255,99,132,0.2)', tension: 0.3 }); } @@ -137,8 +138,6 @@ function updateView() { datasets.push({ label: 'Humidity (%)', data: filtered.map(r => r.humidity), - borderColor: 'rgba(54,162,235,0.8)', - backgroundColor: 'rgba(54,162,235,0.2)', tension: 0.3 }); } @@ -146,22 +145,18 @@ function updateView() { datasets.push({ label: 'Heat Index (°F)', data: filtered.map(r => r.heatIndex), - borderColor: 'rgba(255,206,86,0.8)', - backgroundColor: 'rgba(255,206,86,0.2)', tension: 0.3 }); } - // Update chart - chart.data.labels = labels; - chart.data.datasets = datasets; + chart.data.labels = labels; + chart.data.datasets = datasets; chart.update(); - // Populate table populateTable(filtered); } -// ─── Populate trends table ─────────────────────────────────────────────────── +// ─── Populate the trends table ──────────────────────────────────────────────── function populateTable(data) { const tbody = document.getElementById('trends-table-body'); tbody.innerHTML = '';