No data to display.
';
return;
}
// Sort data by count descending for better visualization
const sortedData = Object.entries(data).sort(([, countA], [, countB]) => countB - countA);
sortedData.forEach(([label, count]) => {
const percentage = ((count / totalCount) * 100).toFixed(1);
const barWrapper = document.createElement('div');
barWrapper.classList.add('chart-bar-wrapper');
barWrapper.innerHTML = `
${label}:
${count} (${percentage}%)
`;
targetElement.appendChild(barWrapper);
});
}
/**
* Calculates and renders all distribution charts.
*/
function renderDistributionCharts() {
const totalStudents = students.length;
// Gender Distribution
const genderCounts = students.reduce((acc, student) => {
acc[student.gender] = (acc[student.gender] || 0) + 1;
return acc;
}, {});
renderBarChart(genderDistributionChartElem, genderCounts, totalStudents);
// Grade Level Distribution
const gradeOrder = ["Kindergarten", "1st Grade", "2nd Grade", "3rd Grade", "4th Grade", "5th Grade",
"6th Grade", "7th Grade", "8th Grade", "9th Grade", "10th Grade", "11th Grade",
"12th Grade", "College"];
const gradeCounts = {};
gradeOrder.forEach(grade => gradeCounts[grade] = 0); // Initialize all grades to 0
students.forEach(student => {
if (gradeCounts.hasOwnProperty(student.grade)) {
gradeCounts[student.grade]++;
}
});
// Filter out grades with 0 count for display, but keep order
const filteredGradeCounts = Object.fromEntries(
Object.entries(gradeCounts).filter(([, count]) => count > 0)
);
renderBarChart(gradeDistributionChartElem, filteredGradeCounts, totalStudents);
// Ethnicity Distribution
const ethnicityCounts = students.reduce((acc, student) => {
acc[student.ethnicity] = (acc[student.ethnicity] || 0) + 1;
return acc;
}, {});
renderBarChart(ethnicityDistributionChartElem, ethnicityCounts, totalStudents);
}
/**
* Generates a PDF of the dashboard content.
* Excludes non-essential UI elements like buttons and input forms.
*/
function generatePdf() {
// Create a temporary div to hold only the content for PDF
const pdfContentWrapper = document.createElement('div');
pdfContentWrapper.classList.add('pdf-content-wrapper'); // Apply PDF-specific styles
// Add title
const title = document.createElement('h2');
title.textContent = 'Student Demographics Dashboard Report';
title.classList.add('text-2xl', 'font-bold', 'mb-4');
pdfContentWrapper.appendChild(title);
// Add summary cards
const summarySection = document.createElement('div');
summarySection.classList.add('grid', 'grid-cols-4', 'gap-4', 'mb-6');
summarySection.innerHTML = `
Total Students
${totalStudentsCountElem.textContent}
Average Age
${averageAgeElem.textContent}
Male Students
${maleStudentsCountElem.textContent}
Female Students
${femaleStudentsCountElem.textContent}
`;
pdfContentWrapper.appendChild(summarySection);
// Add distribution charts
const chartsSection = document.createElement('div');
chartsSection.classList.add('grid', 'grid-cols-2', 'gap-6', 'mb-6');
chartsSection.innerHTML = `
`;
pdfContentWrapper.appendChild(chartsSection);
// Populate PDF charts (re-use logic but target PDF elements)
const totalStudents = students.length;
const genderCounts = students.reduce((acc, student) => { acc[student.gender] = (acc[student.gender] || 0) + 1; return acc; }, {});
renderBarChart(chartsSection.querySelector('#pdfGenderDistributionChart'), genderCounts, totalStudents);
const gradeOrder = ["Kindergarten", "1st Grade", "2nd Grade", "3rd Grade", "4th Grade", "5th Grade",
"6th Grade", "7th Grade", "8th Grade", "9th Grade", "10th Grade", "11th Grade",
"12th Grade", "College"];
const gradeCounts = {};
gradeOrder.forEach(grade => gradeCounts[grade] = 0);
students.forEach(student => {
if (gradeCounts.hasOwnProperty(student.grade)) {
gradeCounts[student.grade]++;
}
});
const filteredGradeCounts = Object.fromEntries(
Object.entries(gradeCounts).filter(([, count]) => count > 0)
);
renderBarChart(chartsSection.querySelector('#pdfGradeDistributionChart'), filteredGradeCounts, totalStudents);
const ethnicityCounts = students.reduce((acc, student) => { acc[student.ethnicity] = (acc[student.ethnicity] || 0) + 1; return acc; }, {});
renderBarChart(chartsSection.querySelector('#pdfEthnicityDistributionChart'), ethnicityCounts, totalStudents);
// Add detailed student list table
const studentListSection = document.createElement('div');
studentListSection.innerHTML = `
Detailed Student List
| ID |
Name |
Age |
Gender |
Grade Level |
Ethnicity |
${dashboardStudentTableBody.innerHTML}
`;
pdfContentWrapper.appendChild(studentListSection);
// Options for html2pdf
const options = {
margin: 10,
filename: 'Student_Demographics_Dashboard.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};
// Generate PDF from the temporary content wrapper
html2pdf().from(pdfContentWrapper).set(options).save();
// Clean up the temporary div (optional, as it's not appended to the DOM)
pdfContentWrapper.remove();
}
/**
* Loads initial sample data for the dashboard.
* Relevant to USA context.
*/
function loadSampleData() {
students = [
{ id: 'S001', name: 'Alice Smith', age: 10, gender: 'Female', grade: '5th Grade', ethnicity: 'White' },
{ id: 'S002', name: 'Bob Johnson', age: 12, gender: 'Male', grade: '7th Grade', ethnicity: 'Black or African American' },
{ id: 'S003', name: 'Charlie Lee', age: 8, gender: 'Male', grade: '3rd Grade', ethnicity: 'Asian' },
{ id: 'S004', name: 'Diana Garcia', age: 16, gender: 'Female', grade: '11th Grade', ethnicity: 'Hispanic or Latino' },
{ id: 'S005', name: 'Ethan Brown', age: 7, gender: 'Male', grade: '2nd Grade', ethnicity: 'White' },
{ id: 'S006', name: 'Fiona Davis', age: 14, gender: 'Female', grade: '9th Grade', ethnicity: 'Two or More Races' },
{ id: 'S007', name: 'George Wilson', age: 9, gender: 'Male', grade: '4th Grade', ethnicity: 'White' },
{ id: 'S008', name: 'Hannah Miller', age: 11, gender: 'Female', grade: '6th Grade', ethnicity: 'Asian' },
{ id: 'S009', name: 'Ivan Rodriguez', age: 6, gender: 'Male', grade: '1st Grade', ethnicity: 'Hispanic or Latino' },
{ id: 'S010', name: 'Julia Clark', age: 17, gender: 'Female', grade: '12th Grade', ethnicity: 'Black or African American' }
];
}
