No updates in this date range.

'; return; } data.forEach(update => { const color = update.type === 'Core' ? 'bg-red-500' : 'bg-blue-500'; const item = document.createElement('div'); item.className = `timeline-item relative border-l-4 pl-8 py-4 cursor-pointer ${update.id === selectedUpdateId ? 'active' : ''}`; item.dataset.id = update.id; item.innerHTML = `

${new Date(update.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}

${update.name}

${update.type}

`; container.appendChild(item); }); } function renderVolatilityChart(data) { const ctx = document.getElementById('volatilityChart').getContext('2d'); if(volatilityChart) volatilityChart.destroy(); const chartData = data.map(u => ({ x: u.date, y: u.volatility })).sort((a,b) => new Date(a.x) - new Date(b.x)); volatilityChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Volatility Score', data: chartData, borderColor: '#ef4444', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true, tension: 0.1 }]}, options: { responsive: true, maintainAspectRatio: false, scales: { x: { type: 'time', time: { unit: 'day' } }, y: { beginAtZero: true, max: 10 } } } }); } function renderDetails(id) { const container = document.getElementById('details-panel'); const update = updateData.find(u => u.id === id); if(!update) { container.innerHTML = `

Select an update from the timeline to see details.

`; return; } container.innerHTML = `

${update.name}

${new Date(update.date).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

Description

${update.description}

`; } async function generatePdf() { const startDate = new Date(document.getElementById('startDate').value); const endDate = new Date(document.getElementById('endDate').value); const filteredData = updateData.filter(u => new Date(u.date) >= startDate && new Date(u.date) <= endDate); document.getElementById('pdf-date-range').textContent = `${startDate.toLocaleDateString()} to ${endDate.toLocaleDateString()}`; document.getElementById('pdf-kpis').innerHTML = document.getElementById('kpi-cards').innerHTML; let detailsHtml = filteredData.map(u => ` `).join(''); document.getElementById('pdf-details-container').innerHTML = detailsHtml; const reportEl = document.getElementById('pdf-report'); reportEl.classList.remove('hidden'); const canvas = await html2canvas(reportEl, { scale: 2 }); reportEl.classList.add('hidden'); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'in', format: 'letter' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('Algorithm-Update-Report.pdf'); } function initialize() { const today = new Date('2025-09-30'); const ninetyDaysAgo = new Date(new Date().setDate(today.getDate() - 90)); document.getElementById('endDate').value = today.toISOString().split('T')[0]; document.getElementById('startDate').value = ninetyDaysAgo.toISOString().split('T')[0]; document.getElementById('startDate').addEventListener('change', updateDashboard); document.getElementById('endDate').addEventListener('change', updateDashboard); document.getElementById('timeline-container').addEventListener('click', e => { const item = e.target.closest('.timeline-item'); if(item) { selectedUpdateId = parseInt(item.dataset.id); document.querySelectorAll('.timeline-item').forEach(el => el.classList.remove('active')); item.classList.add('active'); renderDetails(selectedUpdateId); } }); document.getElementById('downloadPdfBtn').addEventListener('click', generatePdf); updateDashboard(); } initialize(); });