Vision: ${vendor.vision}

Ability: ${vendor.ability}

`; tooltip.style.display = 'block'; } } }); plotArea.addEventListener('mousemove', e => { if (tooltip && tooltip.style.display === 'block') { tooltip.style.left = `${e.clientX - container.getBoundingClientRect().left + 15}px`; tooltip.style.top = `${e.clientY - container.getBoundingClientRect().top + 15}px`; } }); plotArea.addEventListener('mouseout', () => { if (tooltip) tooltip.style.display = 'none'; }); const clearForm = () => { vendorForm.reset(); vendorIdInput.value = ''; formTitle.textContent = 'Add Vendor'; }; clearFormBtn.addEventListener('click', clearForm); vendorForm.addEventListener('submit', e => { e.preventDefault(); const vendorData = { id: vendorIdInput.value ? Number(vendorIdInput.value) : Date.now(), name: vendorNameInput.value, vision: parseInt(visionScoreInput.value), ability: parseInt(abilityScoreInput.value), strengths: strengthsInput.value, cautions: cautionsInput.value }; const existingIndex = state.vendors.findIndex(v => v.id === vendorData.id); if (existingIndex > -1) { state.vendors[existingIndex] = vendorData; // Update } else { state.vendors.push(vendorData); // Add } clearForm(); render(); }); window.handleEditVendor = (id) => { const vendor = state.vendors.find(v => v.id === id); if (vendor) { vendorIdInput.value = vendor.id; vendorNameInput.value = vendor.name; visionScoreInput.value = vendor.vision; abilityScoreInput.value = vendor.ability; strengthsInput.value = vendor.strengths; cautionsInput.value = vendor.cautions; formTitle.textContent = 'Edit Vendor'; } }; window.handleDeleteVendor = (id) => { if (confirm('Are you sure you want to delete this vendor?')) { state.vendors = state.vendors.filter(v => v.id !== id); render(); } }; // --- PDF Generation --- downloadPdfBtn.addEventListener('click', () => { const captureArea = document.getElementById('gmq-capture-area'); if (!captureArea || typeof html2canvas === 'undefined') { alert('Could not generate PDF. A required library is missing.'); return; } html2canvas(captureArea, { scale: 2 }).then(canvas => { const { jsPDF } = jspdf; const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); let yPos = 20; doc.setFontSize(20); doc.text(state.title, doc.internal.pageSize.getWidth() / 2, yPos, { align: 'center' }); yPos += 15; // Add chart image const imgData = canvas.toDataURL('image/png'); const imgProps = doc.getImageProperties(imgData); const pdfWidth = doc.internal.pageSize.getWidth() - 28; const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; doc.addImage(imgData, 'PNG', 14, yPos, pdfWidth, pdfHeight); yPos += pdfHeight + 15; // Add vendor details table const tableData = state.vendors.map(v => [ v.name, v.strengths, v.cautions ]); jspdf.autoTable(doc, { head: [['Vendor', 'Strengths', 'Cautions']], body: tableData, startY: yPos, theme: 'striped', headStyles: { fillColor: [0, 123, 255] } }); doc.save(`Magic-Quadrant-Report-${new Date().toISOString().slice(0,10)}.pdf`); }); }); // --- Initial Load --- loadState(); render(); });