JoshBaneyCS/Heat-Tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update public/scripts/trends.js

Browse Source
This commit is contained in:
JoshBaneyCS 2025-04-30 02:38:25 +00:00
parent 04100e8d5f
commit 68b421bdac
1 changed files with 43 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
public/scripts/trends.js
View File

@ -10,22 +10,20 @@ 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(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(Number);
const [h, m, s] = time.split(':').map(Number);
return new Date(Y, M-1, D, h, m, s);
function formatEST(epoch) {
return new Date(epoch).toLocaleString('en-US', {
timeZone: 'America/New_York',
month: 'numeric',
day: 'numeric',
year: '2-digit',
hour12: false,
hour: '2-digit',
minute: '2-digit'
}).replace(',', ' @');
}
function subtract(date, count, unit) {
const d = new Date(date);
switch(unit) {
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;
@ -39,37 +37,28 @@ function subtract(date, count, unit) {
let readings = [];
let chart;
// ─── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async () => {
await loadReadings();
setupUI();
initChart();
updateView();
// ─── On Load ─────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async() => {
const data = await fetch('/api/readings').then(r=>r.json());
readings = data.map(r=>({
...r,
ts: formatEST(r.epoch_ms),
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', ()=>{
@ -88,12 +77,12 @@ function setupUI() {
});
}
// ─── Chart Setup ──────────────────────────────────────────────────────────────
function initChart() {
// ─── Chart.js Setup ──────────────────────────────────────────────────────────
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)'} },
@ -107,43 +96,34 @@ function initChart() {
}
// ─── Render ───────────────────────────────────────────────────────────────────
function updateView() {
function updateView(){
const idx = +document.getElementById('timeframe-slider').value;
const { unit, count } = tfConfig[idx];
const cutoff = subtract(new Date(), count, unit);
const filtered = readings.filter(r=>r.dateObj >= cutoff);
const {unit,count} = tfConfig[idx];
const cutoff = subtract(Date.now(),count,unit);
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.formattedTs);
const labels = filtered.map(r=>r.ts);
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 = '';
data.forEach(r=>{
filtered.forEach(r=>{
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${r.formattedTs}</td>
<td>${r.ts}</td>
<td>${r.temperature.toFixed(1)}</td>
<td>${r.humidity.toFixed(1)}</td>
<td>${r.heatIndex.toFixed(2)}</td>