Update public/scripts/trends.js

public/scripts/trends.js

@@ -1,4 +1,4 @@
-// Timeframe configurations
+// Timeframes
 const tfConfig = [
   { unit:'hours',  count:24,  label:'Last 24 Hours'  },
   { unit:'days',   count:7,   label:'Last 7 Days'    },
@@ -10,7 +10,7 @@ const tfConfig = [
 let readings = [];
 let chart;
 
-// Subtract a given amount from a Date
+//  Subtract helper
 function subtract(date, count, unit) {
   const d = new Date(date);
   switch(unit) {
@@ -24,26 +24,33 @@ function subtract(date, count, unit) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  // 1) Grab embedded data
+  // 1) Grab the server‐injected readings
   const data = window.__INITIAL_READINGS__ || [];
+  if (!data.length) {
+    console.warn('No initial readings found.');
+  }
 
-  readings = data.map(r => ({
+  // 2) Map into local array with Date objs & formatted strings
+  readings = data.map(r => {
+    const dt = new Date(r.epoch_ms);
+    return {
       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', {
+      dateObj:         dt,
+      formattedTs: dt.toLocaleString('en-US', {
         timeZone: 'America/New_York',
         month:    'numeric',
         day:      'numeric',
         year:     '2-digit',
-      hour12:   false,
         hour:     '2-digit',
-      minute:   '2-digit'
+        minute:   '2-digit',
+        hour12:   false
       }).replace(',', ' @')
-  }));
+    };
+  });
 
   setupUI();
   initChart();
@@ -51,7 +58,7 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 function setupUI() {
-  // Timeframe slider
+  // Slider + label
   const slider = document.getElementById('timeframe-slider');
   const label  = document.getElementById('timeframe-label');
   slider.addEventListener('input', () => {
@@ -60,7 +67,7 @@ function setupUI() {
   });
   label.textContent = tfConfig[slider.value].label;
 
-  // Metric toggles
+  // Metric checkboxes
   document.getElementsByName('metric').forEach(cb => {
     cb.addEventListener('change', updateView);
   });
@@ -72,13 +79,10 @@ function setupUI() {
       const asc = !th.classList.contains('asc');
       const tbody = document.getElementById('trends-table-body');
       Array.from(tbody.rows)
-        .sort((a, b) => {
-          const av = a.cells[idx].textContent;
-          const bv = b.cells[idx].textContent;
-          return asc
-            ? av.localeCompare(bv, undefined, { numeric: true })
-            : bv.localeCompare(av, undefined, { numeric: true });
-        })
+        .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})
+        )
         .forEach(r => tbody.appendChild(r));
       th.classList.toggle('asc', asc);
     });
@@ -105,20 +109,26 @@ function initChart() {
 function updateView() {
   if (!chart) return;
 
-  // Determine cutoff
+  // Determine "now" from the latest reading, not the browser clock
+  const maxEpoch = Math.max(...readings.map(r => r.dateObj.getTime()));
+  const nowDate  = new Date(maxEpoch);
+
+  // Compute cutoff
   const idx    = +document.getElementById('timeframe-slider').value;
   const { unit, count } = tfConfig[idx];
-  const cutoff = subtract(Date.now(), count, unit);
+  const cutoff = (idx === 4)
+    ? new Date(0)                       // "All Time"
+    : subtract(nowDate, count, unit);
 
-  // Filter readings
+  // Filter
   const filtered = readings.filter(r => r.dateObj >= cutoff);
 
-  // Determine selected metrics
+  // Which metrics?
   const selected = Array.from(document.getElementsByName('metric'))
     .filter(cb => cb.checked)
     .map(cb => cb.value);
 
-  // Build chart
+  // Update chart
   chart.data.labels   = filtered.map(r => r.formattedTs);
   chart.data.datasets = [];
   if (selected.includes('temperature')) {
@@ -160,3 +170,4 @@ function updateView() {
     tbody.appendChild(tr);
   });
 }
+