- {/* Header */}
-
-
- {/* Search Section - Made Sticky */}
- - ESG 20-21 Result Dashboard {/* Updated Dashboard Title */} -
-- Islamic University Bangladesh {/* Updated University Name */} -
-
-
+ // Convert to array of objects for recharts, maintaining order
+ return grades
+ .filter(grade => gradeCounts[grade] > 0) // Only include grades that exist in data
+ .map(grade => ({
+ grade: grade,
+ count: gradeCounts[grade] || 0
+ }));
+ }, []);
+
+ // Prepare data for CGPA Trend Line Chart (Overall Average)
+ const cgpaTrendData = useMemo(() => {
+ const semesterData = {}; // { '1-1': { totalGpa: 0, count: 0 }, ... }
+ studentData.forEach(student => {
+ // Aggregate GPA for each semester
+ ['1_1', '1_2', '2_1', '2_2'].forEach(sem => {
+ const gpaKey = `gpa_${sem}`;
+ const semesterName = sem.replace('_', '-'); // Format for display
+ if (student[gpaKey] !== undefined) {
+ if (!semesterData[semesterName]) {
+ semesterData[semesterName] = { totalGpa: 0, count: 0 };
+ }
+ semesterData[semesterName].totalGpa += student[gpaKey];
+ semesterData[semesterName].count += 1;
+ }
+ });
+ });
- {/* Dashboard Content */}
-
- setSearchTerm(e.target.value)}
- />
-
-
-
- {/* Search Results / Suggestions */}
- {searchTerm.trim() !== '' && filteredStudents.length > 0 && (
-
-
- )}
-
- {searchTerm.trim() !== '' && filteredStudents.length === 0 && (
- Matching Students:
--
- {filteredStudents.map(student => (
-
- setSelectedStudent(student)} - > - {student.name} ({student.roll}) - - ))} -
- No students found matching "${searchTerm}". Please try a different name or roll.
-
- )}
-
- {/* Conditional rendering based on selectedStudent */}
- {selectedStudent ? (
- // Layout when a student is selected (First Screenshot Design)
- <>
-
-
Selected Student Details
-
- {/* Student Image */}
- 
{
- e.target.onerror = null;
- e.target.src="https://placehold.co/96x96/aabbcc/ffffff?text=No+Image"
- }}
- />
-
-
-
- Name: {selectedStudent.name}
-Roll: {selectedStudent.roll}
-CGPA: {selectedStudent.cgpa}
- -
-
-
- {/* Print Result button moved here */}
-
+ // Calculate average GPA for each semester
+ const trend = Object.keys(semesterData).map(semester => ({
+ semester: semester,
+ averageGpa: (semesterData[semester].totalGpa / semesterData[semester].count).toFixed(2)
+ }));
+
+ // Map semester names for display
+ const semesterDisplayNames = {
+ '1-1': 'First Semester',
+ '1-2': 'Second Semester',
+ '2-1': 'Third Semester',
+ '2-2': 'Fourth Semester',
+ };
+
+ // Sort semesters for proper line chart display and apply display names
+ const semesterOrder = ['1-1', '1-2', '2-1', '2-2'];
+ return trend.sort((a, b) => semesterOrder.indexOf(a.semester) - semesterOrder.indexOf(b.semester))
+ .map(item => ({ ...item, semester: semesterDisplayNames[item.semester] || item.semester }));
+ }, []);
+
+ // Prepare data for Selected Student's GPA Trend Line Chart
+ const selectedStudentGpaTrendData = useMemo(() => {
+ if (!selectedStudent) return [];
+
+ const trend = [];
+ const semesterOrder = ['1_1', '1_2', '2_1', '2_2'];
+
+ // Process each semester in order
+ for (const sem of semesterOrder) {
+ const gpaKey = `gpa_${sem}`;
+ const semesterName = sem.replace('_', '-');
+ let gpaValue = selectedStudent[gpaKey];
+
+ // Ensure gpaValue is a valid number
+ if (typeof gpaValue === 'string') {
+ gpaValue = parseFloat(gpaValue);
+ }
+
+ // Only include valid GPA values
+ if (typeof gpaValue === 'number' && !isNaN(gpaValue) && gpaValue >= 0 && gpaValue <= 4.0) {
+ trend.push({
+ semester: semesterName,
+ gpa: gpaValue
+ });
+ }
+ }
+
+ // Map semester names for display
+ const semesterDisplayNames = {
+ '1-1': 'First Semester',
+ '1-2': 'Second Semester',
+ '2-1': 'Third Semester',
+ '2-2': 'Fourth Semester',
+ };
+
+ // Sort by semester order
+ return trend.sort((a, b) => {
+ const orderA = semesterOrder.indexOf(`gpa_${a.semester.replace('-', '_')}`);
+ const orderB = semesterOrder.indexOf(`gpa_${b.semester.replace('-', '_')}`);
+ return orderA - orderB;
+ }).map(item => ({
+ ...item,
+ semester: semesterDisplayNames[item.semester] || item.semester
+ }));
+ }, [selectedStudent]);
+
+ // Dynamic Y-axis domain for individual student GPA trend
+ const selectedStudentGpaDomain = useMemo(() => {
+ if (!selectedStudentGpaTrendData.length) return [1.0, 4.0];
+
+ try {
+ const gpas = selectedStudentGpaTrendData.map(d => d.gpa);
+ const minGpa = Math.min(...gpas);
+ const maxGpa = Math.max(...gpas);
+
+ // Ensure min and max are valid numbers
+ if (isNaN(minGpa) || isNaN(maxGpa)) {
+ return [1.0, 4.0];
+ }
+
+ // Add a small buffer to min/max for better visualization, ensuring it doesn't go below 0 or above 4.0
+ return [
+ Math.max(0, minGpa - 0.1),
+ Math.min(4.0, maxGpa + 0.1)
+ ];
+ } catch (error) {
+ console.error("Error calculating GPA domain:", error);
+ return [1.0, 4.0];
+ }
+ }, [selectedStudentGpaTrendData]);
+
+ // Dynamic Y-axis domain for overall average GPA trend
+ const overallGpaDomain = useMemo(() => {
+ if (!cgpaTrendData.length) return [1.0, 4.0];
+
+ try {
+ const gpas = cgpaTrendData.map(d => parseFloat(d.averageGpa));
+ const minGpa = Math.min(...gpas);
+ const maxGpa = Math.max(...gpas);
+
+ // Ensure min and max are valid numbers
+ if (isNaN(minGpa) || isNaN(maxGpa)) {
+ return [1.0, 4.0];
+ }
+
+ // Add a small buffer to min/max for better visualization, ensuring it doesn't go below 0 or above 4.0
+ return [
+ Math.max(0, minGpa - 0.1),
+ Math.min(4.0, maxGpa + 0.1)
+ ];
+ } catch (error) {
+ console.error("Error calculating overall GPA domain:", error);
+ return [1.0, 4.0];
+ }
+ }, [cgpaTrendData]);
+
+ // Cumulative CGPA Distribution
+ const cgpaDistributionData = useMemo(() => {
+ const thresholds = [2.5, 3.0, 3.25, 3.5, 3.75, 3.8, 3.9];
+
+ return thresholds.map(threshold => {
+ const studentsAboveThreshold = studentData.filter(student => student.cgpa >= threshold);
+
+ return {
+ threshold: threshold,
+ count: studentsAboveThreshold.length,
+ students: studentsAboveThreshold.map(s => ({ name: s.name, roll: s.roll }))
+ };
+ });
+ }, []);
+
+ // Calculate overall statistics
+ const overallStats = useMemo(() => {
+ const cgpAs = studentData.map(s => s.cgpa);
+ const maxCGPA = Math.max(...cgpAs);
+ const minCGPA = Math.min(...cgpAs);
+ const averageCGPA = (cgpAs.reduce((sum, val) => sum + val, 0) / cgpAs.length).toFixed(2);
+ return { maxCGPA, minCGPA, averageCGPA };
+ }, []);
+
+ // Error-safe chart renderer
+ const renderStudentGpaChart = useCallback(() => {
+ if (chartError) {
+ return (
+ Semester-wise Grades:
--
-
- - First Semester: - - {selectedStudent.gpa_1_1 !== undefined && selectedStudent.gpa_1_1 !== null ? - `${selectedStudent.gpa_1_1.toFixed(3)} (${selectedStudent.grade_1_1 || 'N/A'})` : - 'N/A'} - - -
- - Second Semester: - - {selectedStudent.gpa_1_2 !== undefined && selectedStudent.gpa_1_2 !== null ? - `${selectedStudent.gpa_1_2.toFixed(3)} (${selectedStudent.grade_1_2 || 'N/A'})` : - 'N/A'} - - -
- - Third Semester: - - {selectedStudent.gpa_2_1 !== undefined && selectedStudent.gpa_2_1 !== null ? - `${selectedStudent.gpa_2_1.toFixed(3)} (${selectedStudent.grade_2_1 || 'N/A'})` : - 'N/A'} - - -
- - Fourth Semester: - - {selectedStudent.gpa_2_2 !== undefined && selectedStudent.gpa_2_2 !== null ? - `${selectedStudent.gpa_2_2.toFixed(3)} (${selectedStudent.grade_2_2 || 'N/A'})` : - 'N/A'} - - -
+
- Error displaying GPA chart. Please try another student.
+
-
-
- ) : (
- // Layout when no student is selected (Overall Dashboard)
- <>
- {/* Overall Statistics (inline) */}
- - {selectedStudent.name ? `${selectedStudent.name}'s GPA Trend` : "Student's GPA Trend"} -
- - {renderStudentGpaChart()} - - {selectedStudent && ( -- Developed by MD. PARVEJ HOSSAIN -
- )} -
-
-
-
- {/* Overall Charts - Now 50/50 split */}
- Overall Statistics:
-Total Students: {studentData.length}
-Highest CGPA: {overallStats.maxCGPA}
-Lowest CGPA: {overallStats.minCGPA}
-Average CGPA: {overallStats.averageCGPA}
+ ); + } + + if (!selectedStudentGpaTrendData.length) { + return ( +
+ No GPA trend data available for this student.
-
- {/* Overall Average GPA Trend by Semester */}
-
-
+ );
+ }
+
+ try {
+ return (
+
- value.toFixed(2)}
- tickMargin={10}
- tick={{ fontSize: 12, fill: '#666' }}
- axisLine={{ stroke: '#ccc' }}
- tickLine={{ stroke: '#ccc' }}
- />
- index === 0 ? '' : value.toFixed(2)}
+ />
+
-
+
+ );
+ } catch (error) {
+ console.error("Chart rendering error:", error);
+ setChartError(true);
+ return (
+
- );
+ );
}
export default App;
\ No newline at end of file
Overall Average GPA Trend by Semester
- -
+ Error displaying GPA chart. Please try another student.
+
+ );
+ }
+ }, [selectedStudentGpaTrendData, selectedStudentGpaDomain, chartError]);
+
+ return (
+
+
-
+ {/* Header */}
+
-
+
- {/* CGPA Distribution (Number of Students) */}
- + ESG 20-21 Result Dashboard {/* Updated Dashboard Title */} +
++ Islamic University Bangladesh {/* Updated University Name */} +
-
-
-
-
+ {/* Search Section - Made Sticky */}
+
-
- )}
-
- {/* Total Students Result Table - Only show if no student selected */}
- {!selectedStudent && (
- CGPA Distribution (Number of Students)
- -
+
+
+ {/* Dashboard Content */}
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ {/* Search Results / Suggestions */}
+ {searchTerm.trim() !== '' && filteredStudents.length > 0 && (
+
+
+ )}
+
+ {searchTerm.trim() !== '' && filteredStudents.length === 0 && (
+ Matching Students:
+-
+ {filteredStudents.map(student => (
+
- setSelectedStudent(student)} + > + {student.name} ({student.roll}) + + ))} +
+ No students found matching "${searchTerm}". Please try a different name or roll.
+
+ )}
+
+ {/* Conditional rendering based on selectedStudent */}
+ {selectedStudent ? (
+ // Layout when a student is selected (First Screenshot Design)
+ <>
+
-
+
+
+ Selected Student Details
+
+ {/* Student Image */}
+ {
+ e.target.onerror = null;
+ e.target.src="https://placehold.co/96x96/aabbcc/ffffff?text=No+Image"
+ }}
+ />
+
+
+ Name: {selectedStudent.name}
+Roll: {selectedStudent.roll}
+CGPA: {selectedStudent.cgpa}
+ +
+
+
+ {/* Print Result button moved here */}
+
+ Semester-wise Grades:
+-
+
- + First Semester: + + {selectedStudent.gpa_1_1 !== undefined && selectedStudent.gpa_1_1 !== null ? + `${selectedStudent.gpa_1_1.toFixed(3)} (${selectedStudent.grade_1_1 || 'N/A'})` : + 'N/A'} + + +
- + Second Semester: + + {selectedStudent.gpa_1_2 !== undefined && selectedStudent.gpa_1_2 !== null ? + `${selectedStudent.gpa_1_2.toFixed(3)} (${selectedStudent.grade_1_2 || 'N/A'})` : + 'N/A'} + + +
- + Third Semester: + + {selectedStudent.gpa_2_1 !== undefined && selectedStudent.gpa_2_1 !== null ? + `${selectedStudent.gpa_2_1.toFixed(3)} (${selectedStudent.grade_2_1 || 'N/A'})` : + 'N/A'} + + +
- + Fourth Semester: + + {selectedStudent.gpa_2_2 !== undefined && selectedStudent.gpa_2_2 !== null ? + `${selectedStudent.gpa_2_2.toFixed(3)} (${selectedStudent.grade_2_2 || 'N/A'})` : + 'N/A'} + + +
+
+
+ ) : (
+ // Layout when no student is selected (Overall Dashboard)
+ <>
+ {/* Overall Statistics (inline) */}
+ + {selectedStudent.name ? `${selectedStudent.name}'s GPA Trend` : "Student's GPA Trend"} +
+ + {renderStudentGpaChart()} + + {selectedStudent && ( ++ Developed by MD. PARVEJ HOSSAIN +
+ )} +
+
+
+ {/* Overall Charts - Now 50/50 split */}
+
+
+ Overall Statistics:
+Total Students: {studentData.length}
+Highest CGPA: {overallStats.maxCGPA}
+Lowest CGPA: {overallStats.minCGPA}
+Average CGPA: {overallStats.averageCGPA}
+
+ {/* Overall Average GPA Trend by Semester */}
+
+
+ )}
+
+ {/* Total Students Result Table - Only show if no student selected */}
+ {!selectedStudent && (
+
+
+
+ index === 0 ? '' : value.toFixed(2)}
+ tickCount={5} // Show only 5 ticks for cleaner UI
+ tickMargin={10}
+ tick={{ fontSize: 12, fill: '#666' }}
+ axisLine={{ stroke: '#ccc' }}
+ tickLine={{ stroke: '#ccc' }}
+ />
+
+
+
+
+ {/* Cumulative CGPA Distribution */}
+ Overall Average GPA Trend by Semester
+ +
+
+
+
+
+
+ Cumulative CGPA Distribution
+ +
+
+ )}
All Student Results
+
+
+
+
+
+ | requestSort('name')} + > + Name {getSortIndicator('name')} + | +requestSort('roll')} + > + Roll {getSortIndicator('roll')} + | +requestSort('gpa_1_1')} + > + First Semester {getSortIndicator('gpa_1_1')} + | +requestSort('gpa_1_2')} + > + Second Semester {getSortIndicator('gpa_1_2')} + | +requestSort('gpa_2_1')} + > + Third Semester {getSortIndicator('gpa_2_1')} + | +requestSort('gpa_2_2')} + > + Fourth Semester {getSortIndicator('gpa_2_2')} + | +requestSort('cgpa')} + > + CGPA {getSortIndicator('cgpa')} + | +
|---|---|---|---|---|---|---|
| {student.name} | +{student.roll} | ++ {student.gpa_1_1 !== undefined ? + `${student.gpa_1_1.toFixed(3)} (${student.grade_1_1 || 'N/A'})` : + 'N/A'} + | ++ {student.gpa_1_2 !== undefined ? + `${student.gpa_1_2.toFixed(3)} (${student.grade_1_2 || 'N/A'})` : + 'N/A'} + | ++ {student.gpa_2_1 !== undefined ? + `${student.gpa_2_1.toFixed(3)} (${student.grade_2_1 || 'N/A'})` : + 'N/A'} + | ++ {student.gpa_2_2 !== undefined ? + `${student.gpa_2_2.toFixed(3)} (${student.grade_2_2 || 'N/A'})` : + 'N/A'} + | +{student.cgpa} | +
-
- )}
All Student Results
-
-
-
-
-
| requestSort('name')} - > - Name {getSortIndicator('name')} - | -requestSort('roll')} - > - Roll {getSortIndicator('roll')} - | -requestSort('gpa_1_1')} - > - First Semester {getSortIndicator('gpa_1_1')} - | -requestSort('gpa_1_2')} - > - Second Semester {getSortIndicator('gpa_1_2')} - | -requestSort('gpa_2_1')} - > - Third Semester {getSortIndicator('gpa_2_1')} - | -requestSort('gpa_2_2')} - > - Fourth Semester {getSortIndicator('gpa_2_2')} - | -requestSort('cgpa')} - > - CGPA {getSortIndicator('cgpa')} - | -
|---|---|---|---|---|---|---|
| {student.name} | -{student.roll} | -- {student.gpa_1_1 !== undefined ? - `${student.gpa_1_1.toFixed(3)} (${student.grade_1_1 || 'N/A'})` : - 'N/A'} - | -- {student.gpa_1_2 !== undefined ? - `${student.gpa_1_2.toFixed(3)} (${student.grade_1_2 || 'N/A'})` : - 'N/A'} - | -- {student.gpa_2_1 !== undefined ? - `${student.gpa_2_1.toFixed(3)} (${student.grade_2_1 || 'N/A'})` : - 'N/A'} - | -- {student.gpa_2_2 !== undefined ? - `${student.gpa_2_2.toFixed(3)} (${student.grade_2_2 || 'N/A'})` : - 'N/A'} - | -{student.cgpa} | -