`;
}).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');
});
};
});
