Not enough data for comparison in the selected date range. Please ensure both 'AMP' and 'Standard' page types exist.

`; elements.placeholder.style.display = 'block'; elements.dashboardContent.style.display = 'none'; elements.pdfBtn.style.display = 'none'; return; } elements.placeholder.style.display = 'none'; elements.dashboardContent.style.display = 'block'; elements.pdfBtn.style.display = 'block'; renderKPIs(); renderAllCharts(); } function calculateAverages(dataArray) { if (dataArray.length === 0) return {}; const sum = (key) => dataArray.reduce((acc, row) => acc + (row[key] || 0), 0); const count = dataArray.length; return { load_time: sum('load_time_ms') / count, lcp: sum('lcp_ms') / count, cls: sum('cls') / count, bounce: sum('bounce_rate_percent') / count, conversion: sum('conversion_rate_percent') / count, }; } function renderKPIs() { const ampAvgs = calculateAverages(ampData); const stdAvgs = calculateAverages(standardData); const kpiConfigs = [ { title: 'Avg. Page Load Time', key: 'load_time', unit: 'ms', smallerIsBetter: true }, { title: 'Avg. LCP', key: 'lcp', unit: 'ms', smallerIsBetter: true }, { title: 'Avg. Bounce Rate', key: 'bounce', unit: '%', smallerIsBetter: true }, { title: 'Avg. Conversion Rate', key: 'conversion', unit: '%', smallerIsBetter: false } ]; elements.kpiContainer.innerHTML = kpiConfigs.map(k => { const ampVal = ampAvgs[k.key]; const stdVal = stdAvgs[k.key]; const improvement = 100 * ((stdVal - ampVal) / stdVal); const displayImprovement = k.smallerIsBetter ? improvement : -improvement; return ` `; }).join(''); } function renderAllCharts() { const render = (id, type, data, options) => { if(charts[id]) charts[id].destroy(); charts[id] = new Chart(document.getElementById(id), { type, data, options }); }; // Time Series Chart render('amp-timeseries-chart', 'line', { datasets: [ { label: 'AMP Load Time (ms)', data: ampData.map(r => ({x: r.date, y: r.load_time_ms})), borderColor: '#005af0', tension: 0.1 }, { label: 'Standard Load Time (ms)', data: standardData.map(r => ({x: r.date, y: r.load_time_ms})), borderColor: '#495057', tension: 0.1 } ]}, { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Load Time Over Time' } }, scales: { x: { type: 'time', time: { unit: 'day' } } } } ); // Vitals Chart const ampAvgs = calculateAverages(ampData); const stdAvgs = calculateAverages(standardData); render('amp-vitals-chart', 'bar', { labels: ['LCP (ms)', 'CLS'], datasets: [ { label: 'AMP', data: [ampAvgs.lcp, ampAvgs.cls * 1000], backgroundColor: '#005af0' }, // Multiply CLS to make it visible { label: 'Standard', data: [stdAvgs.lcp, stdAvgs.cls * 1000], backgroundColor: '#adb5bd' } ]}, { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Core Web Vitals (CLS x1000)' } } } ); // Correlation Chart render('amp-correlation-chart', 'scatter', { datasets: [ { label: 'AMP', data: ampData.map(r => ({x: r.load_time_ms, y: r.conversion_rate_percent})), backgroundColor: 'rgba(0, 90, 240, 0.7)'}, { label: 'Standard', data: standardData.map(r => ({x: r.load_time_ms, y: r.conversion_rate_percent})), backgroundColor: 'rgba(73, 80, 87, 0.7)'} ]}, { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Conversion Rate vs. Load Time' } }, scales: { x: { title: {display: true, text: 'Load Time (ms)'} }, y: { title: {display: true, text: 'Conversion Rate (%)'} } } } ); } window.ampDownloadPDF = () => { html2canvas(document.getElementById('amp-dashboard-output'), { scale: 2 }).then(canvas => { const pdf = new jspdf.jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' }); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 40, 40, pdf.internal.pageSize.getWidth() - 80, 0); pdf.save('AMP_Performance_Dashboard.pdf'); }); }; });