Update public/scripts/trends.js

public/scripts/trends.js

@@ -11,17 +11,12 @@ 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}`;
+  // 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) {
-  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);
+  // if you have epoch_ms, convert: return new Date(epoch_ms)
+  return new Date(ts.replace(' ', 'T'));
 }
 function subtract(date, count, unit) {
   const d = new Date(date);
@@ -35,11 +30,11 @@ function subtract(date, count, unit) {
   return d;
 }
 
-// ─── State ────────────────────────────────────────────────────────────────────
+// ─── State & Chart Ref ───────────────────────────────────────────────────────
 let readings = [];
 let chart;
 
-// ─── Init ─────────────────────────────────────────────────────────────────────
+// ─── Initialize ───────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', async () => {
   await loadReadings();
   setupUI();
@@ -47,18 +42,27 @@ document.addEventListener('DOMContentLoaded', async () => {
   updateView();
 });
 
-// ─── Load readings ────────────────────────────────────────────────────────────
+// ─── Load data ────────────────────────────────────────────────────────────────
 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)
+    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 ────────────────────────────────────────────────────────────────
 function setupUI() {
+  // Slider
   const slider = document.getElementById('timeframe-slider');
   const label  = document.getElementById('timeframe-label');
   slider.addEventListener('input', () => {
@@ -67,28 +71,29 @@ function setupUI() {
   });
   label.textContent = tfConfig[slider.value].label;
 
+  // Metric checkboxes
   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)=>{
-        return asc
+      Array.from(tbody.rows)
+        .sort((a,b) => asc
           ? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent, undefined, {numeric:true})
-          : b.cells[idx].textContent.localeCompare(a.cells[idx].textContent,undefined,{numeric:true});
-      });
+          : b.cells[idx].textContent.localeCompare(a.cells[idx].textContent, undefined, {numeric:true})
+        )
+        .forEach(r=>tbody.appendChild(r));
       th.classList.toggle('asc', asc);
-      rows.forEach(r=>tbody.appendChild(r));
     });
   });
 }
 
-// ─── Chart Setup ──────────────────────────────────────────────────────────────
+// ─── Chart.js Initialization ──────────────────────────────────────────────────
 function initChart() {
   const ctx = document.getElementById('trend-chart').getContext('2d');
   chart = new Chart(ctx, {
@@ -106,41 +111,49 @@ function initChart() {
   });
 }
 
-// ─── Render ───────────────────────────────────────────────────────────────────
+// ─── Update chart & table ────────────────────────────────────────────────────
 function updateView() {
   const idx = +document.getElementById('timeframe-slider').value;
   const {unit,count} = tfConfig[idx];
   const cutoff = subtract(new Date(), count, unit);
 
+  // Filter
   const filtered = readings.filter(r => r.dateObj >= cutoff);
 
+  // Metrics selected
   const selected = Array.from(document.getElementsByName('metric'))
     .filter(cb=>cb.checked).map(cb=>cb.value);
 
-  const labels = filtered.map(r=>r.formattedTs);
-  const datasets = [];
+  // Chart data
+  chart.data.labels = filtered.map(r=>r.formattedTs);
+  chart.data.datasets = [];
   if (selected.includes('temperature')) {
-    datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
+    chart.data.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 });
+    chart.data.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 });
+    chart.data.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) {
+  // Table
   const tbody = document.getElementById('trends-table-body');
   tbody.innerHTML = '';
-  data.forEach(r=>{
+  filtered.forEach(r => {
     const tr = document.createElement('tr');
     tr.innerHTML = `
       <td>${r.formattedTs}</td>