Fix CRS error in spatial data script
This commit is contained in:
parent
d5a534618c
commit
37987732b6
79
src/App.jsx
79
src/App.jsx
@ -1,5 +1,5 @@
|
||||
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
|
||||
const studentImageMap = {
|
||||
@ -285,22 +285,25 @@ const studentData = [
|
||||
// Define a custom color palette for the charts for a modern look
|
||||
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 }) => {
|
||||
if (active && payload && payload.length) {
|
||||
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 (
|
||||
<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">
|
||||
<p className="font-bold text-gray-800 mb-2">{`CGPA ${data.rangeLabel}`}</p>
|
||||
<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.threshold}`}</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="text-gray-600 break-words">
|
||||
{data.students.length > 0 ? (
|
||||
data.students.map(student => student.roll).join(', ')
|
||||
<p className="font-semibold text-gray-700 mb-1">Student Rolls:</p>
|
||||
<div className="text-gray-600 break-words max-h-24 overflow-y-auto">
|
||||
{studentRolls.length > 0 ? (
|
||||
<span>{studentRolls}</span>
|
||||
) : (
|
||||
'No students in this range.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -439,8 +442,7 @@ function App() {
|
||||
</head>
|
||||
<body>
|
||||
<div class="print-page">
|
||||
<div> <!-- Content wrapper for header, details, table -->
|
||||
<div class="header-section">
|
||||
<div> <div class="header-section">
|
||||
<h1>Islamic University Bangladesh</h1>
|
||||
<p>Student Result Slip</p>
|
||||
<p>Environmental Science and Geography</p>
|
||||
@ -723,16 +725,15 @@ function App() {
|
||||
}
|
||||
}, [cgpaTrendData]);
|
||||
|
||||
// FIXED CGPA Distribution with cumulative counts
|
||||
// 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);
|
||||
const studentsAboveThreshold = studentData.filter(student => student.cgpa >= threshold);
|
||||
|
||||
return {
|
||||
range: threshold.toFixed(2),
|
||||
rangeLabel: `>${threshold.toFixed(2)}`,
|
||||
threshold: threshold,
|
||||
count: studentsAboveThreshold.length,
|
||||
students: studentsAboveThreshold.map(s => ({ name: s.name, roll: s.roll }))
|
||||
};
|
||||
@ -794,11 +795,12 @@ function App() {
|
||||
/>
|
||||
<YAxis
|
||||
domain={selectedStudentGpaDomain}
|
||||
tickFormatter={(value) => 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' }}
|
||||
tickFormatter={(value, index) => index === 0 ? '' : value.toFixed(2)}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
@ -809,15 +811,6 @@ function App() {
|
||||
}}
|
||||
cursor={{ stroke: 'rgba(0,0,0,0.1)' }}
|
||||
/>
|
||||
<Legend
|
||||
iconType="circle"
|
||||
wrapperStyle={{
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
fontSize: 12,
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="gpa"
|
||||
@ -1027,7 +1020,8 @@ function App() {
|
||||
/>
|
||||
<YAxis
|
||||
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}
|
||||
tick={{ fontSize: 12, fill: '#666' }}
|
||||
axisLine={{ stroke: '#ccc' }}
|
||||
@ -1042,15 +1036,6 @@ function App() {
|
||||
}}
|
||||
cursor={{ stroke: 'rgba(0,0,0,0.1)' }}
|
||||
/>
|
||||
<Legend
|
||||
iconType="circle"
|
||||
wrapperStyle={{
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
fontSize: 12,
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="averageGpa"
|
||||
@ -1064,21 +1049,22 @@ function App() {
|
||||
</ResponsiveContainer>
|
||||
</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">
|
||||
<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}>
|
||||
<BarChart
|
||||
data={cgpaDistributionData}
|
||||
margin={{ top: 20, right: 30, left: 40, bottom: 40 }}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 40 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
stroke="#e0e0e0"
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="range"
|
||||
dataKey="threshold"
|
||||
tickMargin={10}
|
||||
tick={{ fontSize: 12, fill: '#666' }}
|
||||
axisLine={{ stroke: '#ccc' }}
|
||||
@ -1091,22 +1077,17 @@ function App() {
|
||||
axisLine={{ stroke: '#ccc' }}
|
||||
tickLine={{ stroke: '#ccc' }}
|
||||
/>
|
||||
<Tooltip cursor={{ fill: 'rgba(0,0,0,0.05)' }} content={<CustomTooltip />} />
|
||||
<Legend
|
||||
iconType="square"
|
||||
wrapperStyle={{
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
fontSize: 12,
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}}
|
||||
<Tooltip
|
||||
content={<CustomTooltip />}
|
||||
cursor={{ fill: 'rgba(0,0,0,0.05)' }}
|
||||
position={{ x: 40, y: -20 }} // Position tooltip at top right of cursor
|
||||
/>
|
||||
<Bar
|
||||
dataKey="count"
|
||||
fill="#10B981"
|
||||
name="Students"
|
||||
radius={[10, 10, 0, 0]}
|
||||
barSize={30} // Increased bar width
|
||||
barSize={40} // Increased bar width
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user