${log.notes || 'N/A'}
${log.affectedAreas.length > 0 ? `
Areas: ${log.affectedAreas.join(', ')}
` : ''}
${log.photo ? `
View Photo` : ''}
|
`;
});
tableHTML += ``;
logTableContainer.innerHTML = tableHTML;
}
function renderChart() {
if (!chartCanvas) return;
const ctx = chartCanvas.getContext('2d');
const labels = symptomLogs.map(log => log.date);
const itchData = symptomLogs.map(log => log.symptoms.itch);
const rednessData = symptomLogs.map(log => log.symptoms.redness);
const scalingData = symptomLogs.map(log => log.symptoms.scaling);
const painData = symptomLogs.map(log => log.symptoms.pain);
if (symptomChart) {
symptomChart.destroy();
}
symptomChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Itch',
data: itchData,
borderColor: '#3B82F6', // blue-500
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.1,
fill: true,
},
{
label: 'Redness',
data: rednessData,
borderColor: '#EF4444', // red-500
backgroundColor: 'rgba(239, 68, 68, 0.1)',
tension: 0.1,
fill: true,
},
{
label: 'Scaling/Dryness',
data: scalingData,
borderColor: '#F97316', // orange-500
backgroundColor: 'rgba(249, 115, 22, 0.1)',
tension: 0.1,
fill: true,
},
{
label: 'Pain/Soreness',
data: painData,
borderColor: '#8B5CF6', // violet-500
backgroundColor: 'rgba(139, 92, 246, 0.1)',
tension: 0.1,
fill: true,
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
max: 10,
title: {
display: true,
text: 'Severity Level'
}
},
x: {
title: {
display: true,
text: 'Date'
}
}
},
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
}
}
}
});
}
window.deleteLogEntry = (id) => {
if (confirm('Are you sure you want to delete this entry?')) {
symptomLogs = symptomLogs.filter(log => log.id !== id);
renderLogTable();
renderChart();
}
};
async function generatePDF() {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const pdfHeader = document.querySelector('.pdf-header');
const pdfDate = document.getElementById('pdf-generation-date');
if (!pdfContent) {
console.error("PDF content area not found!");
return;
}
// Prepare for PDF generation
pdfDate.textContent = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
pdfHeader.classList.remove('hidden');
const canvas = await html2canvas(pdfContent, {
scale: 2, // Higher scale for better quality
useCORS: true,
logging: true,
onclone: (document) => {
// This is crucial for Chart.js to re-render properly in the cloned document
const chartCanvas = document.getElementById('symptom-chart');
if (chartCanvas && symptomChart) {
// Temporarily disable responsiveness for fixed size in PDF
symptomChart.options.responsive = false;
symptomChart.resize(600, 300); // Set a fixed size
}
}
});
// Re-enable responsiveness after capture
if (symptomChart) {
symptomChart.options.responsive = true;
symptomChart.resize();
}
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'pt',
format: 'a4'
});
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgWidth = canvas.width;
const imgHeight = canvas.height;
const ratio = imgWidth / imgHeight;
const finalImgWidth = pdfWidth - 40; // with some margin
const finalImgHeight = finalImgWidth / ratio;
let heightLeft = finalImgHeight;
let position = 20;
pdf.addImage(imgData, 'PNG', 20, position, finalImgWidth, finalImgHeight);
heightLeft -= (pdfHeight - 40);
while (heightLeft > 0) {
position -= (pdfHeight - 40);
pdf.addPage();
pdf.addImage(imgData, 'PNG', 20, position, finalImgWidth, finalImgHeight);
heightLeft -= (pdfHeight - 40);
}
pdf.save('Eczema_Psoriasis_Report.pdf');
// Clean up after generation
pdfHeader.classList.add('hidden');
}
// Initial render
renderLogTable();
renderChart();
});
// --- GLOBAL FUNCTIONS for inline onclick ---
function changeTab(tabName) {
const tabs = document.querySelectorAll('.tab-content');
const tabButtons = document.querySelectorAll('.tab-button');
tabs.forEach(tab => {
if (tab.id === `tab-${tabName}`) {
tab.classList.add('active');
} else {
tab.classList.remove('active');
}
});
tabButtons.forEach(button => {
if (button.id === `tab-${tabName}-btn`) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
}
