No data available for this station.

`; return; } let tableHTML = ``; ['PM25', 'PM10', 'O3', 'NO2'].forEach(p => { tableHTML += ``; }); tableHTML += `

Pollutant	Value (µg/m³)
${p}	${latestReading[p] || 'N/A'}

`; view.innerHTML = `

Details for ${station.StationName}

`; if (charts.station) charts.station.destroy(); charts.station = new Chart(document.getElementById('stationTrendChart').getContext('2d'), { type: 'line', data: { labels: allReadings.map(r => r.Timestamp.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'})), datasets: [{ label: 'AQI', data: allReadings.map(r => r.AQI), borderColor: '#3498db', tension: 0.1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); tabs.details.click(); }; const renderCustomization = () => { const editor = document.getElementById('aqi-levels-editor'); editor.innerHTML = ''; customizable.aqiLevels.forEach((level, index) => { const el = document.createElement('div'); el.style.display = 'flex'; el.style.gap = '10px'; el.style.marginBottom = '10px'; el.innerHTML = ` `; editor.appendChild(el); }); }; // --- EVENT LISTENERS --- generateBtn.addEventListener('click', buildDashboard); document.getElementById('save-aqi-levels-btn').addEventListener('click', () => { const newLevels = []; document.querySelectorAll('#aqi-levels-editor > div').forEach(div => { const inputs = div.querySelectorAll('input'); newLevels.push({ name: inputs[0].value, range: [parseInt(inputs[1].value), parseInt(inputs[2].value)], color: inputs[3].value, advice: inputs[4].value }); }); customizable.aqiLevels = newLevels; renderAll(); alert('AQI Levels Saved!'); }); window.aqiSwitchTab = (evt, tabName) => { if (evt.currentTarget.classList.contains('disabled')) return; document.querySelectorAll('#aqi-dashboard-container .aqi-tab-content').forEach(tc => tc.style.display = 'none'); document.querySelectorAll('#aqi-dashboard-container .aqi-tab-button').forEach(tl => tl.classList.remove('active')); document.getElementById(tabName).style.display = 'block'; evt.currentTarget.classList.add('active'); }; // --- INITIALIZATION --- loadSampleData(); });