Select a station from the "City Overview" map to see detailed trends.

`; }; const renderOverview = () => { const fieldMap = document.getElementById('field-map'); fieldMap.innerHTML = ''; let aqiSum = 0, stationCount = 0; sourceData.stations.forEach(station => { const latestReading = sourceData.readings .filter(r => r.StationID === station.StationID) .sort((a, b) => b.Timestamp - a.Timestamp)[0]; if (latestReading) { aqiSum += latestReading.AQI; stationCount++; const aqiInfo = getAqiInfo(latestReading.AQI); const dot = document.createElement('div'); dot.className = 'station-dot'; dot.style.left = `${station.Lon}%`; dot.style.top = `${station.Lat}%`; dot.style.backgroundColor = aqiInfo.color; dot.textContent = latestReading.AQI; dot.onclick = () => showStationDetails(station.StationID); dot.innerHTML += `${station.StationName}`; fieldMap.appendChild(dot); } }); const cityAvgAqi = stationCount > 0 ? Math.round(aqiSum / stationCount) : 0; const cityAqiInfo = getAqiInfo(cityAvgAqi); document.getElementById('city-avg-aqi').textContent = cityAvgAqi; document.getElementById('city-aqi-level').textContent = cityAqiInfo.name; document.getElementById('city-aqi-card').style.backgroundColor = cityAqiInfo.color; document.getElementById('health-advisory-text').textContent = cityAqiInfo.advice; }; const showStationDetails = (stationId) => { const station = sourceData.stations.find(s => s.StationID === stationId); const allReadings = sourceData.readings.filter(r => r.StationID === stationId).sort((a,b)=> a.Timestamp - b.Timestamp); const latestReading = allReadings[allReadings.length - 1]; const view = document.getElementById('station-detail-view'); if (!station || !latestReading) { view.innerHTML = `

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(); });