${m.priorities.Critical}
Critical Issues
${m.priorities.High}
High Priority Issues
`;
}
renderCharts(m) {
return `
Compliance Status
- Pass (${m.totalPassed})
- Fail (${m.totalFailed})
Issues by Priority
${Object.keys(m.priorities).map(p => `
${p} (${m.priorities[p]})
`).join('')}
`;
}
drawCharts(m) {
// Pie Chart
const total = m.totalPassed + m.totalFailed;
const passPercent = total > 0 ? (m.totalPassed / total) * 100 : 0;
document.getElementById('statusPieChart').style.background = `conic-gradient(var(--status-pass-color) ${passPercent}%, var(--status-fail-color) ${passPercent}%)`;
// Bar Chart
const maxPriority = Math.max(...Object.values(m.priorities));
document.querySelectorAll('#priorityBarChart .bar-inner').forEach(bar => {
const val = parseInt(bar.dataset.value);
bar.style.height = maxPriority > 0 ? `${(val / maxPriority) * 100}%` : '0%';
});
}
renderFailedItemsTable(failedItems) {
if (failedItems.length === 0) {
this.dom.issuesTableBody.innerHTML = '
| No failed items found. Great job! |
';
return;
}
const priorityOrder = { Critical: 4, High: 3, Medium: 2, Low: 1 };
failedItems.sort((a,b) => priorityOrder[this.state.checklist[b.id].priority] - priorityOrder[this.state.checklist[a.id].priority]);
this.dom.issuesTableBody.innerHTML = failedItems.map(item => {
const { priority, notes } = this.state.checklist[item.id];
return `
${item.id} ${item.name}
${item.desc} |
${priority} |
${notes.replace(/\n/g, '
')} |
`;
}).join('');
}
// --- Navigation & PDF ---
navigateTabs(dir) {
const i = this.TABS_ORDER.indexOf(this.state.activeTab);
let n = i;
if (dir === 'next' && i < this.TABS_ORDER.length - 1) n++;
if (dir === 'prev' && i > 0) n--;
this.openTab(null, this.TABS_ORDER[n]);
}
openTab(event, tabName) { this.state.activeTab = tabName; this.updateUI(); }
async generatePdf() {
if (this.state.activeTab !== 'dashboard') {
this.openTab(null, 'dashboard');
await new Promise(res => setTimeout(res, 50));
}
const { jsPDF } = window.jspdf;
this.dom.downloadPdfBtn.disabled = true; this.dom.downloadPdfBtn.textContent = 'Generating...';
try {
const canvas = await html2canvas(this.dom.pdfOutput, { scale: 2, useCORS: true, backgroundColor: '#ffffff' });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const margin = 40;
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgWidth = pdfWidth - margin * 2;
const imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
let position = margin;
pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= (pdfHeight - margin * 2);
while (heightLeft > 0) {
position = -heightLeft - margin;
pdf.addPage();
pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= pdfHeight;
}
pdf.save(`${this.state.projectName}_Accessibility_Report.pdf`);
} catch (e) {
console.error(e); alert('Error generating PDF.');
} finally {
this.dom.downloadPdfBtn.disabled = false; this.dom.downloadPdfBtn.textContent = 'Download Dashboard as PDF';
}
}
}
const app = new AccessibilityDashboard();
