Avg. Depth
${avgDepth.toFixed(1)}
Deep Pages (>3)
${deepPages}
`;
// Main Table
const dashboardTableBody = document.getElementById('dashboard-table-body');
dashboardTableBody.innerHTML = pages.map(page => {
let health, healthClass;
if (page.depth <= 2) { health = 'Good'; healthClass = 'bg-green-100 text-green-800'; }
else if (page.depth <= 3) { health = 'Okay'; healthClass = 'bg-yellow-100 text-yellow-800'; }
else { health = 'Deep'; healthClass = 'bg-red-100 text-red-800'; }
return `
| ${page.url} |
${page.depth} |
${health} |
`;
}).join('');
// Charts
const depthCounts = pages.reduce((acc, page) => {
acc[page.depth] = (acc[page.depth] || 0) + 1;
return acc;
}, {});
const depthLabels = Object.keys(depthCounts).sort((a,b) => a-b);
const depthData = depthLabels.map(label => depthCounts[label]);
if (depthDistributionChart) depthDistributionChart.destroy();
depthDistributionChart = new Chart(document.getElementById('depth-distribution-chart').getContext('2d'), {
type: 'bar',
data: { labels: depthLabels.map(l => `Depth ${l}`), datasets: [{ label: '# of Pages', data: depthData, backgroundColor: '#60a5fa' }] },
options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});
const shallowCount = pages.filter(p => p.depth <= 3).length;
if (healthChart) healthChart.destroy();
healthChart = new Chart(document.getElementById('health-chart').getContext('2d'), {
type: 'pie',
data: { labels: ['Shallow (≤3 clicks)', 'Deep (>3 clicks)'], datasets: [{ data: [shallowCount, deepPages], backgroundColor: ['#34d399', '#f87171'] }] },
options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
};
// --- EVENT HANDLERS ---
const handleAddPage = () => {
const urlInput = document.getElementById('new-url-input');
const depthInput = document.getElementById('new-depth-input');
const url = urlInput.value.trim();
const depth = parseInt(depthInput.value);
if (url && !isNaN(depth)) {
const newId = pages.length > 0 ? Math.max(...pages.map(p => p.id)) + 1 : 1;
pages.push({ id: newId, url, depth });
renderConfigTable();
urlInput.value = '';
depthInput.value = '';
} else {
alert('Please enter a valid URL and crawl depth.');
}
};
const handleDeletePage = (e) => {
const btn = e.target.closest('.delete-btn');
if (btn) {
const id = parseInt(btn.closest('tr').dataset.id);
pages = pages.filter(p => p.id !== id);
renderConfigTable();
}
};
const generatePDF = () => {
const pdfContent = document.getElementById('pdf-content');
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22).setFont('helvetica', 'bold').text('Crawl Depth Analysis Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('crawl-depth-report.pdf');
});
};
// --- ATTACH LISTENERS ---
document.getElementById('prev-btn').addEventListener('click', () => showTab('dashboard'));
document.getElementById('next-btn').addEventListener('click', () => showTab('config'));
tabButtons.dashboard.addEventListener('click', () => showTab('dashboard'));
tabButtons.config.addEventListener('click', () => showTab('config'));
document.getElementById('add-page-btn').addEventListener('click', handleAddPage);
document.getElementById('config-table-body').addEventListener('click', handleDeletePage);
document.getElementById('download-pdf-btn').addEventListener('click', generatePDF);
// --- INITIAL SETUP ---
showTab('dashboard');
});
