diff --git a/public/scripts/trends.js b/public/scripts/trends.js index 3e805ff..17830a5 100644 --- a/public/scripts/trends.js +++ b/public/scripts/trends.js @@ -1,26 +1,22 @@ // public/scripts/trends.js -// ─── 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:'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 ───────────────────────────────────────────────────────────────── -function formatESTTimestamp(ts) { - // ts is "YYYY-MM-DD HH:mm:ss" or ISO → we assume you converted to "M/D/YY @HH:mm" - return ts; // adjust if you need to parse differently -} -function parseLocalDate(ts) { - // if you have epoch_ms, convert: return new Date(epoch_ms) - return new Date(ts.replace(' ', 'T')); -} +// --- State --- +let readings = []; +let chart; + +// --- Helpers --- function subtract(date, count, unit) { const d = new Date(date); - switch(unit){ + 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; @@ -30,37 +26,36 @@ function subtract(date, count, unit) { return d; } -// ─── State & Chart Ref ─────────────────────────────────────────────────────── -let readings = []; -let chart; - -// ─── Initialize ─────────────────────────────────────────────────────────────── +// --- Load & initialize --- document.addEventListener('DOMContentLoaded', async () => { - await loadReadings(); - setupUI(); - initChart(); - updateView(); + console.log('📡 Loading readings from /api/readings…'); + try { + const data = await fetch('/api/readings').then(r => r.json()); + console.log('✅ Received readings:', data); + readings = data.map(r => ({ + stationDockDoor: r.stationDockDoor, + location: r.location, + temperature: r.temperature, + humidity: r.humidity, + heatIndex: r.heatIndex, + dateObj: new Date(r.epoch_ms), + formattedTs: new Date(r.epoch_ms).toLocaleString('en-US', { + timeZone:'America/New_York', + month:'numeric', day:'numeric', year:'2-digit', + hour:'2-digit', minute:'2-digit', hour12:false + }).replace(',',' @') + })); + console.log('✔ Parsed readings:', readings); + + setupUI(); + initChart(); + updateView(); + } catch (err) { + console.error('❌ Failed to load readings:', err); + } }); -// ─── Load data ──────────────────────────────────────────────────────────────── -async function loadReadings() { - const data = await fetch('/api/readings').then(r=>r.json()); - readings = data.map(r => ({ - stationDockDoor: r.stationDockDoor, - location: r.location, - temperature: r.temperature, - humidity: r.humidity, - heatIndex: r.heatIndex, - formattedTs: new Date(r.epoch_ms).toLocaleString('en-US', { - timeZone:'America/New_York', - month:'numeric', day:'numeric', year:'2-digit', - hour12: false, hour:'2-digit', minute:'2-digit' - }).replace(',',' @'), - dateObj: new Date(r.epoch_ms) - })); -} - -// ─── UI Wiring ──────────────────────────────────────────────────────────────── +// --- UI wiring --- function setupUI() { // Slider const slider = document.getElementById('timeframe-slider'); @@ -71,14 +66,14 @@ function setupUI() { }); label.textContent = tfConfig[slider.value].label; - // Metric checkboxes + // Metrics toggles document.getElementsByName('metric').forEach(cb => { cb.addEventListener('change', updateView); }); // Table sorting - document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{ - th.addEventListener('click', ()=>{ + 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'); @@ -87,70 +82,83 @@ function setupUI() { ? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent, undefined, {numeric:true}) : b.cells[idx].textContent.localeCompare(a.cells[idx].textContent, undefined, {numeric:true}) ) - .forEach(r=>tbody.appendChild(r)); + .forEach(r => tbody.appendChild(r)); th.classList.toggle('asc', asc); }); }); } -// ─── Chart.js Initialization ────────────────────────────────────────────────── +// --- Chart.js init --- function initChart() { + if (typeof Chart === 'undefined') { + console.error('❌ Chart.js not loaded!'); + return; + } + console.log('📊 Initializing Chart.js'); const ctx = document.getElementById('trend-chart').getContext('2d'); chart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [] }, options: { scales: { - x: { title: { display:true, text:'Time (EST)' } }, - y: { 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 + maintainAspectRatio:false } }); } -// ─── Update chart & table ──────────────────────────────────────────────────── +// --- Render chart & table --- function updateView() { - const idx = +document.getElementById('timeframe-slider').value; - const {unit,count} = tfConfig[idx]; - const cutoff = subtract(new Date(), count, unit); + if (!chart) return; + console.log('🔄 updateView called'); - // Filter + // Timeframe cutoff + const idx = +document.getElementById('timeframe-slider').value; + const { unit, count } = tfConfig[idx]; + const cutoff = subtract(new Date(), count, unit); + console.log(` Showing data since ${cutoff.toISOString()}`); + + // Filter readings const filtered = readings.filter(r => r.dateObj >= cutoff); + console.log(` ${filtered.length}/${readings.length} points after filtering`); // Metrics selected const selected = Array.from(document.getElementsByName('metric')) - .filter(cb=>cb.checked).map(cb=>cb.value); + .filter(cb => cb.checked).map(cb => cb.value); + console.log(' Metrics selected:', selected); - // Chart data - chart.data.labels = filtered.map(r=>r.formattedTs); + // Update chart + chart.data.labels = filtered.map(r => r.formattedTs); chart.data.datasets = []; if (selected.includes('temperature')) { chart.data.datasets.push({ - label: 'Temperature (°F)', - data: filtered.map(r=>r.temperature), + label:'Temperature (°F)', + data: filtered.map(r => r.temperature), tension: 0.3 }); } if (selected.includes('humidity')) { chart.data.datasets.push({ - label: 'Humidity (%)', - data: filtered.map(r=>r.humidity), + label:'Humidity (%)', + data: filtered.map(r => r.humidity), tension: 0.3 }); } if (selected.includes('heatIndex')) { chart.data.datasets.push({ - label: 'Heat Index (°F)', - data: filtered.map(r=>r.heatIndex), + label:'Heat Index (°F)', + data: filtered.map(r => r.heatIndex), tension: 0.3 }); } + console.log(' Chart update:', chart.data); chart.update(); - // Table + // Update table const tbody = document.getElementById('trends-table-body'); tbody.innerHTML = ''; filtered.forEach(r => { @@ -165,4 +173,5 @@ function updateView() { `; tbody.appendChild(tr); }); + console.log(' Table populated with', filtered.length, 'rows'); }