APM & Observability Magic Quadrant
An interactive visualization based on the 2024 Gartner report analysis.
${trend.description}
${trends}
`;
}
// --- UTILITY FUNCTIONS ---
function navigateTabs(direction) {
const newIndex = currentTabIndex + direction;
if (newIndex >= 0 && newIndex < tabs.length) showTab(newIndex);
}
function updateNavButtons() {
prevTabBtn.disabled = currentTabIndex === 0;
nextTabBtn.disabled = currentTabIndex === tabs.length - 1;
}
async function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const activeTab = tabs[currentTabIndex];
const addHeader = (title) => {
doc.setFontSize(18);
doc.text('APM & Observability Magic Quadrant Report', 40, 60);
doc.setFontSize(12);
doc.setTextColor(100);
doc.text(`Section: ${title}`, 40, 80);
doc.setLineWidth(0.5);
doc.line(40, 90, 555, 90);
};
addHeader(activeTab.name);
if (activeTab.id === 'magic-quadrant') {
const quadrantEl = document.querySelector('#magic-quadrant .relative');
try {
const canvas = await html2canvas(quadrantEl, { backgroundColor: '#ffffff', scale: 2 });
const imgData = canvas.toDataURL('image/png');
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth() - 80;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'PNG', 40, 110, pdfWidth, pdfHeight);
} catch(e) {
console.error("Error generating PDF from canvas:", e);
doc.text("Could not render quadrant image.", 40, 110);
}
} else if (activeTab.id === 'vendor-analysis') {
doc.autoTable({ html: '#vendor-analysis-table', startY: 110 });
} else if (activeTab.id === 'market-trends') {
let yPos = 110;
quadrantData.trends.forEach(trend => {
doc.setFontSize(12);
doc.setTextColor(20, 30, 40);
doc.text(trend.name, 40, yPos);
yPos += 5;
doc.setFontSize(10);
doc.setTextColor(100);
const splitText = doc.splitTextToSize(trend.description, 515); // 595 (A4 width in pt) - 40 - 40
doc.text(splitText, 40, yPos + 10);
yPos += (splitText.length * 12) + 20;
});
}
doc.save(`APM_Quadrant_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`);
}
init();
});