Update public/scripts/trends.js

public/scripts/trends.js

@@ -10,24 +10,26 @@ const tfConfig = [
 ];
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
-function formatEST(epoch) {
+function formatESTTimestamp(ts) {
-  return new Date(epoch).toLocaleString('en-US', {
+  // ts is "YYYY-MM-DD HH:mm:ss" in Eastern time
-    timeZone: 'America/New_York',
+  const [date, time] = ts.split(' ');
-    month:    'numeric',
+  const [Y, M, D]    = date.split('-').map(Number);
-    day:      'numeric',
+  const [h, m]       = time.split(':');
-    year:     '2-digit',
+  return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`;
-    hour12:   false,
+}
-    hour:     '2-digit',
+function parseLocalDate(ts) {
-    minute:   '2-digit'
+  const [date, time] = ts.split(' ');
-  }).replace(',', ' @');
+  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);
 }
 function subtract(date, count, unit) {
   const d = new Date(date);
-  switch(unit){
+  switch(unit) {
-    case 'hours':  d.setHours(d.getHours()  - count); break;
+    case 'hours':  d.setHours(d.getHours() - count);    break;
-    case 'days':   d.setDate(d.getDate()     - count); break;
+    case 'days':   d.setDate(d.getDate() - count);      break;
-    case 'weeks':  d.setDate(d.getDate()     - 7*count); break;
+    case 'weeks':  d.setDate(d.getDate() - 7*count);    break;
-    case 'months': d.setMonth(d.getMonth()   - count); break;
+    case 'months': d.setMonth(d.getMonth() - count);    break;
     case 'years':  d.setFullYear(d.getFullYear() - count); break;
   }
   return d;
@@ -37,33 +39,42 @@ function subtract(date, count, unit) {
 let readings = [];
 let chart;
 
-// ─── On Load ─────────────────────────────────────────────────────────────────
+// ─── Init ─────────────────────────────────────────────────────────────────────
-document.addEventListener('DOMContentLoaded', async() => {
+document.addEventListener('DOMContentLoaded', async () => {
-  const data = await fetch('/api/readings').then(r=>r.json());
+  await loadReadings();
-  readings = data.map(r=>({
+  setupUI();
-    ...r,
+  initChart();
-    ts: formatEST(r.epoch_ms),
+  updateView();
-    date: new Date(r.epoch_ms)
-  }));
-  setupUI(); initChart(); updateView();
 });
 
+// ─── Load readings ────────────────────────────────────────────────────────────
+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)
+  }));
+}
+
 // ─── UI Wiring ────────────────────────────────────────────────────────────────
-function setupUI(){
+function setupUI() {
   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;
 
-  document.getElementsByName('metric').forEach(cb=>cb.addEventListener('change',updateView));
+  document.getElementsByName('metric').forEach(cb=>{
+    cb.addEventListener('change', updateView);
+  });
 
   document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{
     th.addEventListener('click', ()=>{
-      const idx = th.cellIndex;
+      const idx   = th.cellIndex;
-      const asc = !th.classList.contains('asc');
+      const asc   = !th.classList.contains('asc');
       const tbody = document.getElementById('trends-table-body');
       const rows  = Array.from(tbody.rows);
       rows.sort((a,b)=>{
@@ -77,12 +88,12 @@ function setupUI(){
   });
 }
 
-// ─── Chart.js Setup ──────────────────────────────────────────────────────────
+// ─── Chart Setup ──────────────────────────────────────────────────────────────
-function initChart(){
+function initChart() {
   const ctx = document.getElementById('trend-chart').getContext('2d');
-  chart = new Chart(ctx,{ 
+  chart = new Chart(ctx, {
     type:'line',
-    data:{labels:[],datasets:[]},
+    data:{ labels:[], datasets:[] },
     options:{
       scales:{
         x:{ title:{display:true,text:'Time (EST)'} },
@@ -96,34 +107,43 @@ function initChart(){
 }
 
 // ─── Render ───────────────────────────────────────────────────────────────────
-function updateView(){
+function updateView() {
   const idx    = +document.getElementById('timeframe-slider').value;
-  const {unit,count} = tfConfig[idx];
+  const { unit, count } = tfConfig[idx];
-  const cutoff = subtract(Date.now(),count,unit);
+  const cutoff = subtract(new Date(), count, unit);
+
+  const filtered = readings.filter(r=>r.dateObj >= cutoff);
 
-  const filtered = readings.filter(r=>r.date>=cutoff);
   const selected = Array.from(document.getElementsByName('metric'))
     .filter(cb=>cb.checked).map(cb=>cb.value);
 
-  const labels = filtered.map(r=>r.ts);
+  const labels = filtered.map(r=>r.formattedTs);
   const datasets = [];
-  if (selected.includes('temperature'))
+  if (selected.includes('temperature')) {
     datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
-  if (selected.includes('humidity'))
+  }
+  if (selected.includes('humidity')) {
     datasets.push({ label:'Humidity (%)',      data:filtered.map(r=>r.humidity),    tension:0.3 });
-  if (selected.includes('heatIndex'))
+  }
+  if (selected.includes('heatIndex')) {
     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) {
   const tbody = document.getElementById('trends-table-body');
   tbody.innerHTML = '';
-  filtered.forEach(r=>{
+  data.forEach(r=>{
     const tr = document.createElement('tr');
     tr.innerHTML = `
-      <td>${r.ts}</td>
+      <td>${r.formattedTs}</td>
       <td>${r.temperature.toFixed(1)}</td>
       <td>${r.humidity.toFixed(1)}</td>
       <td>${r.heatIndex.toFixed(2)}</td>