Product Roadmap Visualizer
Project Roadmap
This dashboard visualizes the product roadmap based on the data entered in the Configuration tab. Use the filters to explore different views of the roadmap items. Summary statistics provide a quick overview of the plan.
Summary
Roadmap Visualization
Project Details
Roadmap Items
Add the features, epics, or initiatives for your roadmap below. Specify the target quarter/period, status, and optionally a theme for grouping.
No roadmap items generated yet. Configure data and click "Generate Roadmap".
'; } else if (roadmapGrid.childElementCount === 0) { roadmapGrid.innerHTML = 'No items match the current filters.
'; } } function updateSummary() { const total = roadmapItems.length; const planned = roadmapItems.filter(i => i.status === 'planned').length; const inProgress = roadmapItems.filter(i => i.status === 'inprogress').length; const complete = roadmapItems.filter(i => i.status === 'complete').length; summaryCardsContainer.innerHTML = `
${total}
Total Items
${planned}
Planned
${inProgress}
In Progress
${complete}
Complete
`;
}
generateBtn.addEventListener('click', generateRoadmap);
filterStatus.addEventListener('change', renderRoadmap);
filterTheme.addEventListener('change', renderRoadmap);
pdfDownloadBtn.addEventListener('click', () => {
if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') {
console.error('Roadmap Visualizer: jsPDF or html2canvas is not loaded.');
return;
}
const reportElement = document.getElementById('dashboard-pdf-content');
if (!reportElement) return;
const originalBtnText = pdfDownloadBtn.textContent;
pdfDownloadBtn.textContent = 'Generating...';
pdfDownloadBtn.disabled = true;
html2canvas(reportElement, {
scale: 1.5, // Adjust scale slightly for better fit
useCORS: true,
backgroundColor: '#ffffff'
}).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
// Determine orientation based on aspect ratio
const orientation = canvas.width > canvas.height ? 'landscape' : 'portrait';
const doc = new jsPDF({ orientation: orientation, unit: 'mm', format: 'a4' });
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = doc.internal.pageSize.getHeight();
const margin = 10;
const imgProps= doc.getImageProperties(imgData);
const imgWidth = pdfWidth - (margin * 2);
const imgHeight = (imgProps.height * imgWidth) / imgProps.width;
let heightLeft = imgHeight;
let position = margin;
doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= (pdfHeight - (margin * 2));
while (heightLeft > 0) {
position = heightLeft - imgHeight + margin; // New top margin
doc.addPage();
doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= (pdfHeight - (margin * 2));
}
doc.save('product-roadmap.pdf');
pdfDownloadBtn.textContent = originalBtnText;
pdfDownloadBtn.disabled = false;
}).catch(err => {
console.error('Roadmap Visualizer: html2canvas error:', err);
pdfDownloadBtn.textContent = originalBtnText;
pdfDownloadBtn.disabled = false;
});
});
// Add initial sample item rows
addItemRow('User Authentication', 'Implement login, registration, password reset.', 'Q1 2026', 'planned', 'Core Platform');
addItemRow('Product Catalog V1', 'Basic product listing and detail pages.', 'Q1 2026', 'planned', 'Core Platform');
addItemRow('Shopping Cart', 'Add to cart, view cart, update quantities.', 'Q2 2026', 'planned', 'Core Platform');
generateRoadmap(); // Generate initial view
showTab('page-dashboard');
updateNavButtons();
});