Heat-Tracker/public/scripts/trends.js

// public/scripts/trends.js

// ─── Configuration ────────────────────────────────────────────────────────────
const tfConfig = [
  { unit: 'hours', count: 24,   label: 'Last 24 Hours'   },
  { unit: 'days',  count: 7,    label: 'Last 7 Days'     },
  { unit: 'weeks', count: 4,    label: 'Last 4 Weeks'    },
  { unit: 'months',count: 12,   label: 'Last 12 Months'  },
  { unit: 'year',  count: 1,    label: 'All Time'        }
];

// ─── Helpers ──────────────────────────────────────────────────────────────────
// Format an EST SQL timestamp ("YYYY-MM-DD HH:mm:ss") to "M/D/YY @HH:mm"
function formatESTTimestamp(ts) {
  const [date, time] = ts.split(' ');
  const [Y, M, D]    = date.split('-').map(n=>parseInt(n,10));
  const [h, m]       = time.split(':');
  const YY           = String(Y).slice(-2);
  return `${M}/${D}/${YY} @${h.padStart(2,'0')}:${m}`;
}

// Subtract count units from a Date
function subtract(date, count, unit) {
  const d = new Date(date);
  switch (unit) {
    case 'hours':  d.setHours(d.getHours() - count); break;
    case 'days':   d.setDate(d.getDate()   - count); break;
    case 'weeks':  d.setDate(d.getDate()   - 7*count); break;
    case 'months': d.setMonth(d.getMonth() - count); break;
    case 'year':   d.setFullYear(d.getFullYear() - count); break;
  }
  return d;
}

// ─── State ────────────────────────────────────────────────────────────────────
let readings = [];
let chart;

// ─── Initialize ───────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async () => {
  await loadReadings();
  setupUI();
  initChart();
  updateView();  // initial render
});

// ─── 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:    new Date(r.timestamp.replace(' ', 'T'))
  }));
}

// ─── UI Wiring ────────────────────────────────────────────────────────────────
function setupUI() {
  // Timeframe slider
  const slider = document.getElementById('timeframe-slider');
  const label  = document.getElementById('timeframe-label');
  slider.addEventListener('input', () => {
    label.textContent = tfConfig[slider.value].label;
    updateView();
  });
  label.textContent = tfConfig[slider.value].label;

  // Metric toggles
  document.getElementsByName('metric').forEach(cb => {
    cb.addEventListener('change', updateView);
  });

  // Table sorting (simple toggle asc/desc per column)
  document.querySelectorAll('#trends-table thead th.sortable').forEach(th => {
    th.addEventListener('click', () => {
      const field = th.dataset.field;
      const tbody = document.getElementById('trends-table-body');
      const rows  = Array.from(tbody.rows);
      const asc   = !th.classList.contains('asc');
      rows.sort((a,b) => {
        const av = a.cells[th.cellIndex].textContent;
        const bv = b.cells[th.cellIndex].textContent;
        return asc ? av.localeCompare(bv, undefined, {numeric:true})
                   : bv.localeCompare(av, undefined, {numeric:true});
      });
      th.classList.toggle('asc', asc);
      rows.forEach(r => tbody.appendChild(r));
    });
  });
}

// ─── Chart Initialization ─────────────────────────────────────────────────────
function initChart() {
  const ctx = document.getElementById('trend-chart').getContext('2d');
  chart = new Chart(ctx, {
    type: 'line',
    data: { labels: [], datasets: [] },
    options: {
      scales: {
        x: { display: true, title: { display: true, text: 'Time (EST)' } },
        y: { display: true, title: { display: true, text: 'Value' } }
      },
      interaction: { mode: 'index', intersect: false },
      plugins: { legend: { position: 'top' } },
      maintainAspectRatio: false
    }
  });
}

// ─── Update everything on UI change ──────────────────────────────────────────
function updateView() {
  const idx    = +document.getElementById('timeframe-slider').value;
  const { unit, count } = tfConfig[idx];
  const cutoff = subtract(new Date(), count, unit);

  // Filter readings within timeframe
  const filtered = readings.filter(r => r.dateObj >= cutoff);

  // Determine selected metrics
  const selected = Array.from(document.getElementsByName('metric'))
    .filter(cb => cb.checked)
    .map(cb => cb.value);

  // Prepare chart data
  const labels = filtered.map(r => r.formattedTs);
  const datasets = [];
  if (selected.includes('temperature')) {
    datasets.push({
      label: 'Temperature (°F)',
      data: filtered.map(r => r.temperature),
      borderColor: 'rgba(255,99,132,0.8)',
      backgroundColor: 'rgba(255,99,132,0.2)',
      tension: 0.3
    });
  }
  if (selected.includes('humidity')) {
    datasets.push({
      label: 'Humidity (%)',
      data: filtered.map(r => r.humidity),
      borderColor: 'rgba(54,162,235,0.8)',
      backgroundColor: 'rgba(54,162,235,0.2)',
      tension: 0.3
    });
  }
  if (selected.includes('heatIndex')) {
    datasets.push({
      label: 'Heat Index (°F)',
      data: filtered.map(r => r.heatIndex),
      borderColor: 'rgba(255,206,86,0.8)',
      backgroundColor: 'rgba(255,206,86,0.2)',
      tension: 0.3
    });
  }

  // Update chart
  chart.data.labels    = labels;
  chart.data.datasets  = datasets;
  chart.update();

  // Populate table
  populateTable(filtered);
}

// ─── Populate trends table ───────────────────────────────────────────────────
function populateTable(data) {
  const tbody = document.getElementById('trends-table-body');
  tbody.innerHTML = '';
  data.forEach(r => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${r.formattedTs}</td>
      <td>${r.temperature.toFixed(1)}</td>
      <td>${r.humidity.toFixed(1)}</td>
      <td>${r.heatIndex.toFixed(2)}</td>
      <td>${r.stationDockDoor}</td>
      <td>${r.location}</td>
    `;
    tbody.appendChild(tr);
  });
}