parvej/esg-result
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CRS error in spatial data script

Browse Source
This commit is contained in:
Md. Parvej Hossain 2025-08-01 16:34:47 +06:00
parent d5a534618c
commit 37987732b6
1 changed files with 1095 additions and 1114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/App.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo, useCallback } from 'react'; import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line } from 'recharts'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
// Define image URLs for students // Define image URLs for students
const studentImageMap = { const studentImageMap = {
@ -285,22 +285,25 @@ const studentData = [
// Define a custom color palette for the charts for a modern look // Define a custom color palette for the charts for a modern look
const chartColors = ['#6366F1', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#3B82F6', '#8B5CF6']; const chartColors = ['#6366F1', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#3B82F6', '#8B5CF6'];
// Custom Tooltip for CGPA Distribution // Custom Tooltip for CGPA Distribution (Updated with a scrollable container for rolls)
const CustomTooltip = ({ active, payload, label }) => { const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) { if (active && payload && payload.length) {
const data = payload[0].payload; const data = payload[0].payload;
// Collect all student rolls into a single comma-separated string
const studentRolls = data.students.map(student => student.roll).join(', ');
return ( return (
<div className="p-4 bg-white border border-gray-300 rounded-lg shadow-xl text-sm max-w-xs max-h-[60vh] overflow-y-scroll"> <div className="p-4 bg-white border border-gray-300 rounded-lg shadow-xl text-sm max-w-xs">
<p className="font-bold text-gray-800 mb-2">{`CGPA ${data.rangeLabel}`}</p> <p className="font-bold text-gray-800 mb-2">{`CGPA ≥ ${data.threshold}`}</p>
<p className="text-gray-700 mb-2">{`Number of Students: ${data.count}`}</p> <p className="text-gray-700 mb-2">{`Number of Students: ${data.count}`}</p>
<p className="font-semibold text-gray-700">Students:</p> <p className="font-semibold text-gray-700 mb-1">Student Rolls:</p>
<p className="text-gray-600 break-words"> <div className="text-gray-600 break-words max-h-24 overflow-y-auto">
{data.students.length > 0 ? ( {studentRolls.length > 0 ? (
data.students.map(student => student.roll).join(', ') <span>{studentRolls}</span>
) : ( ) : (
'No students in this range.' 'No students in this range.'
)} )}
</p> </div>
</div> </div>
); );
} }
@ -439,8 +442,7 @@ function App() {
</head> </head>
<body> <body>
<div class="print-page"> <div class="print-page">
<div> <!-- Content wrapper for header, details, table --> <div> <div class="header-section">
<div class="header-section">
<h1>Islamic University Bangladesh</h1> <h1>Islamic University Bangladesh</h1>
<p>Student Result Slip</p> <p>Student Result Slip</p>
<p>Environmental Science and Geography</p> <p>Environmental Science and Geography</p>
@ -723,16 +725,15 @@ function App() {
} }
}, [cgpaTrendData]); }, [cgpaTrendData]);
// FIXED CGPA Distribution with cumulative counts // Cumulative CGPA Distribution
const cgpaDistributionData = useMemo(() => { const cgpaDistributionData = useMemo(() => {
const thresholds = [2.5, 3.0, 3.25, 3.5, 3.75, 3.8, 3.9]; const thresholds = [2.5, 3.0, 3.25, 3.5, 3.75, 3.8, 3.9];
return thresholds.map(threshold => { return thresholds.map(threshold => {
const studentsAboveThreshold = studentData.filter(student => student.cgpa > threshold); const studentsAboveThreshold = studentData.filter(student => student.cgpa >= threshold);
return { return {
range: threshold.toFixed(2), threshold: threshold,
rangeLabel: `>${threshold.toFixed(2)}`,
count: studentsAboveThreshold.length, count: studentsAboveThreshold.length,
students: studentsAboveThreshold.map(s => ({ name: s.name, roll: s.roll })) students: studentsAboveThreshold.map(s => ({ name: s.name, roll: s.roll }))
}; };
@ -794,11 +795,12 @@ function App() {
/> />
<YAxis <YAxis
domain={selectedStudentGpaDomain} domain={selectedStudentGpaDomain}
tickFormatter={(value) => value.toFixed(2)} tickCount={5} // Show only 5 ticks for cleaner UI
tickMargin={10} tickMargin={10}
tick={{ fontSize: 12, fill: '#666' }} tick={{ fontSize: 12, fill: '#666' }}
axisLine={{ stroke: '#ccc' }} axisLine={{ stroke: '#ccc' }}
tickLine={{ stroke: '#ccc' }} tickLine={{ stroke: '#ccc' }}
tickFormatter={(value, index) => index === 0 ? '' : value.toFixed(2)}
/> />
<Tooltip <Tooltip
contentStyle={{ contentStyle={{
@ -809,15 +811,6 @@ function App() {
}} }}
cursor={{ stroke: 'rgba(0,0,0,0.1)' }} cursor={{ stroke: 'rgba(0,0,0,0.1)' }}
/> />
<Legend
iconType="circle"
wrapperStyle={{
bottom: 20,
left: 20,
fontSize: 12,
fontFamily: 'Arial, sans-serif'
}}
/>
<Line <Line
type="monotone" type="monotone"
dataKey="gpa" dataKey="gpa"
@ -1027,7 +1020,8 @@ function App() {
/> />
<YAxis <YAxis
domain={overallGpaDomain} domain={overallGpaDomain}
tickFormatter={(value) => value.toFixed(2)} tickFormatter={(value, index) => index === 0 ? '' : value.toFixed(2)}
tickCount={5} // Show only 5 ticks for cleaner UI
tickMargin={10} tickMargin={10}
tick={{ fontSize: 12, fill: '#666' }} tick={{ fontSize: 12, fill: '#666' }}
axisLine={{ stroke: '#ccc' }} axisLine={{ stroke: '#ccc' }}
@ -1042,15 +1036,6 @@ function App() {
}} }}
cursor={{ stroke: 'rgba(0,0,0,0.1)' }} cursor={{ stroke: 'rgba(0,0,0,0.1)' }}
/> />
<Legend
iconType="circle"
wrapperStyle={{
bottom: 20,
left: 20,
fontSize: 12,
fontFamily: 'Arial, sans-serif'
}}
/>
<Line <Line
type="monotone" type="monotone"
dataKey="averageGpa" dataKey="averageGpa"
@ -1064,21 +1049,22 @@ function App() {
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
{/* CGPA Distribution (Number of Students) */} {/* Cumulative CGPA Distribution */}
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 md:col-span-1"> <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 md:col-span-1">
<h2 className="text-2xl font-bold text-gray-800 mb-4 border-b pb-2 text-center">CGPA Distribution (Number of Students)</h2> <h2 className="text-2xl font-bold text-gray-800 mb-4 border-b pb-2 text-center">Cumulative CGPA Distribution</h2>
<ResponsiveContainer width="100%" height={300}> <ResponsiveContainer width="100%" height={300}>
<BarChart <BarChart
data={cgpaDistributionData} data={cgpaDistributionData}
margin={{ top: 20, right: 30, left: 40, bottom: 40 }} margin={{ top: 20, right: 30, left: 20, bottom: 40 }}
> >
<CartesianGrid <CartesianGrid
stroke="#e0e0e0" stroke="#e0e0e0"
strokeDasharray="3 3" strokeDasharray="3 3"
vertical={false}
/> />
<XAxis <XAxis
dataKey="range" dataKey="threshold"
tickMargin={10} tickMargin={10}
tick={{ fontSize: 12, fill: '#666' }} tick={{ fontSize: 12, fill: '#666' }}
axisLine={{ stroke: '#ccc' }} axisLine={{ stroke: '#ccc' }}
@ -1091,22 +1077,17 @@ function App() {
axisLine={{ stroke: '#ccc' }} axisLine={{ stroke: '#ccc' }}
tickLine={{ stroke: '#ccc' }} tickLine={{ stroke: '#ccc' }}
/> />
<Tooltip cursor={{ fill: 'rgba(0,0,0,0.05)' }} content={<CustomTooltip />} /> <Tooltip
<Legend content={<CustomTooltip />}
iconType="square" cursor={{ fill: 'rgba(0,0,0,0.05)' }}
wrapperStyle={{ position={{ x: 40, y: -20 }} // Position tooltip at top right of cursor
bottom: 20,
left: 20,
fontSize: 12,
fontFamily: 'Arial, sans-serif'
}}
/> />
<Bar <Bar
dataKey="count" dataKey="count"
fill="#10B981" fill="#10B981"
name="Students" name="Students"
radius={[10, 10, 0, 0]} radius={[10, 10, 0, 0]}
barSize={30} // Increased bar width barSize={40} // Increased bar width
/> />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>