Heat-Tracker/public/scripts/trends.js

// public/scripts/trends.js

// Helper to compute average
function average(arr) {
  return arr.reduce((a, b) => a + b, 0) / arr.length;
}

// Period definitions
const periodKeys   = ['hourly','daily','weekly','monthly','yearly'];
const periodLabels = ['Hourly','Daily','Weekly','Monthly','Yearly'];
const periodConfig = {
  hourly:  { keyFn: r => r.timestamp.slice(0,13), labelFn: k => k.replace('T',' ') },
  daily:   { keyFn: r => r.timestamp.slice(0,10), labelFn: k => k },
  weekly:  { keyFn: r => {
      const d = new Date(r.timestamp), y = d.getFullYear();
      const w = Math.ceil((((d - new Date(y,0,1))/864e5) + new Date(y,0,1).getDay()+1)/7);
      return `${y}-W${w}`;
    }, labelFn: k => k },
  monthly: { keyFn: r => r.timestamp.slice(0,7), labelFn: k => k },
  yearly:  { keyFn: r => r.timestamp.slice(0,4), labelFn: k => k }
};

let trendChart, dataTable;

// Fetch all readings from server
async function fetchReadings() {
  const res = await fetch('/api/readings');
  return res.ok ? res.json() : [];
}

// Render the DataTable under the chart
function renderTable(allReadings) {
  const tbody = $('#trendTable tbody').empty();
  allReadings.forEach(r => {
    const ts  = new Date(r.timestamp)
        .toLocaleString('en-US',{timeZone:'America/New_York'});
    const loc = r.stationDockDoor;   // dock door or station code
    const dir = r.location;          // Inbound, Outbound, A-Mod, AFE-1...
    tbody.append(`
      <tr>
        <td>${ts}</td>
        <td>${r.temperature.toFixed(1)}</td>
        <td>${r.humidity.toFixed(1)}</td>
        <td>${r.heatIndex.toFixed(1)}</td>
        <td>${loc}</td>
        <td>${dir}</td>
      </tr>
    `);
  });

  if ($.fn.DataTable.isDataTable('#trendTable')) {
    dataTable.clear().rows.add($('#trendTable tbody tr')).draw();
  } else {
    dataTable = $('#trendTable').DataTable({
      paging:     true,
      pageLength: 25,
      ordering:   true,
      order:      [[0,'desc']],
      autoWidth:  false,
      scrollX:    true
    });
  }
}

// Build or update the Chart.js line chart
async function drawTrend() {
  const all    = await fetchReadings();
  const slider = document.getElementById('periodSlider');
  const key    = periodKeys[slider.value];
  const cfg    = periodConfig[key];

  // Group readings by time bucket
  const groups = {};
  all.forEach(r => {
    const k = cfg.keyFn(r);
    groups[k] = groups[k] || { temps:[], hums:[], his:[] };
    groups[k].temps.push(r.temperature);
    groups[k].hums.push(r.humidity);
    groups[k].his.push(r.heatIndex);
  });

  const labels = Object.keys(groups).sort();
  const stats  = labels.map(k => {
    const g = groups[k];
    return {
      temp: { avg: average(g.temps).toFixed(2), min: Math.min(...g.temps), max: Math.max(...g.temps) },
      hum:  { avg: average(g.hums).toFixed(2),  min: Math.min(...g.hums),  max: Math.max(...g.hums)  },
      hi:   { avg: average(g.his).toFixed(2),   min: Math.min(...g.his),   max: Math.max(...g.his)   }
    };
  });

  // Create datasets from checked toggles
  const checked = Array.from(document.querySelectorAll('#metricToggles input:checked'));
  const datasets = checked.map(chk => {
    const m = chk.dataset.metric, s = chk.dataset.stat;
    return {
      label: `${m.toUpperCase()} ${s.toUpperCase()}`,
      data:  stats.map(x => x[m][s]),
      fill:  false,
      tension: 0.1
    };
  });

  const ctx = document.getElementById('trendChart').getContext('2d');
  if (trendChart) {
    trendChart.data.labels   = labels.map(cfg.labelFn);
    trendChart.data.datasets = datasets;
    trendChart.update();
  } else {
    trendChart = new Chart(ctx, {
      type: 'line',
      data: { labels: labels.map(cfg.labelFn), datasets },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend:  { display: true },
          tooltip: { mode:'index', intersect:false },
          zoom:    {
            pan:  { enabled:true, mode:'x', modifierKey:'ctrl' },
            zoom: { wheel:{enabled:true}, pinch:{enabled:true}, mode:'x' }
          }
        },
        scales: {
          x: { display:true },
          y: { display:true }
        }
      }
    });
  }

  // Always update the table below
  renderTable(all);
}

// Wire up controls and initial draw
document.addEventListener('DOMContentLoaded', () => {
  drawTrend();

  document.getElementById('periodSlider')
      .addEventListener('input', e => {
        document.getElementById('periodLabel').textContent = periodLabels[e.target.value];
        drawTrend();
      });

  document.querySelectorAll('#metricToggles input')
      .forEach(chk => chk.addEventListener('change', drawTrend));
});