Update public/scripts/trends.js

public/scripts/trends.js

@@ -1,6 +1,6 @@
 // public/scripts/trends.js
 
-// ─── Timeframe options ───────────────────────────────────────────────────────
+// ─── Timeframes ──────────────────────────────────────────────────────────────
 const tfConfig = [
   { unit:'hours',  count:24,  label:'Last 24 Hours'   },
   { unit:'days',   count:7,   label:'Last 7 Days'     },
@@ -11,15 +11,16 @@ 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(n=>parseInt(n,10));
+  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}`;
 }
 function parseLocalDate(ts) {
   const [date, time] = ts.split(' ');
-  const [Y, M, D]    = date.split('-').map(n=>parseInt(n,10));
-  const [h, m, s]    = time.split(':').map(n=>parseInt(n,10));
+  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) {
@@ -34,11 +35,11 @@ function subtract(date, count, unit) {
   return d;
 }
 
-// ─── State & Chart Ref ───────────────────────────────────────────────────────
+// ─── State ────────────────────────────────────────────────────────────────────
 let readings = [];
 let chart;
 
-// ─── On Load ─────────────────────────────────────────────────────────────────
+// ─── Init ─────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', async () => {
   await loadReadings();
   setupUI();
@@ -46,7 +47,7 @@ document.addEventListener('DOMContentLoaded', async() => {
   updateView();
 });
 
-// ─── Load & parse readings ───────────────────────────────────────────────────
+// ─── Load readings ────────────────────────────────────────────────────────────
 async function loadReadings() {
   const data = await fetch('/api/readings').then(r=>r.json());
   readings = data.map(r => ({
@@ -56,9 +57,8 @@ async function loadReadings() {
   }));
 }
 
-// ─── UI wiring ───────────────────────────────────────────────────────────────
+// ─── UI Wiring ────────────────────────────────────────────────────────────────
 function setupUI() {
-  // timeframe slider
   const slider = document.getElementById('timeframe-slider');
   const label  = document.getElementById('timeframe-label');
   slider.addEventListener('input', ()=>{
@@ -67,12 +67,10 @@ function setupUI() {
   });
   label.textContent = tfConfig[slider.value].label;
 
-  // metric toggles
   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;
@@ -80,11 +78,9 @@ function setupUI() {
       const tbody = document.getElementById('trends-table-body');
       const rows  = Array.from(tbody.rows);
       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});
+          ? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent,undefined,{numeric:true})
+          : b.cells[idx].textContent.localeCompare(a.cells[idx].textContent,undefined,{numeric:true});
       });
       th.classList.toggle('asc',asc);
       rows.forEach(r=>tbody.appendChild(r));
@@ -92,7 +88,7 @@ function setupUI() {
   });
 }
 
-// ─── Chart.js setup ──────────────────────────────────────────────────────────
+// ─── Chart Setup ──────────────────────────────────────────────────────────────
 function initChart() {
   const ctx = document.getElementById('trend-chart').getContext('2d');
   chart = new Chart(ctx, {
@@ -110,7 +106,7 @@ function initChart() {
   });
 }
 
-// ─── Render chart & table ───────────────────────────────────────────────────
+// ─── Render ───────────────────────────────────────────────────────────────────
 function updateView() {
   const idx    = +document.getElementById('timeframe-slider').value;
   const { unit, count } = tfConfig[idx];
@@ -140,7 +136,7 @@ function updateView() {
   populateTable(filtered);
 }
 
-// ─── Populate the table ─────────────────────────────────────────────────────
+// ─── Table ───────────────────────────────────────────────────────────────────
 function populateTable(data) {
   const tbody = document.getElementById('trends-table-body');
   tbody.innerHTML = '';