Skip to content

Commit 62c2e8a

Browse files
SoniHarsh1SoniHarsh1
committed
fixes graphs
1 parent 98d8b72 commit 62c2e8a

13 files changed

+502
-157
lines changed

‎src/components/dashboard/chart-section.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
55
import { Button } from "@/components/ui/button"
66
import { TableIcon, BarChartIcon } from 'lucide-react'
77
import { OffersByCourse } from './charts/offers-by-course'
8-
import { OffersByWorkExperience } from './charts/offers-by-work-experience'
8+
import { OffersByDepartment } from './charts/offers-by-department'
99
import { OffersByGender } from './charts/offers-by-gender'
1010
import { OffersByAcademics } from './charts/offers-by-academics'
11-
import { OffersByCourseCategory } from './charts/offers-by-course-category'
11+
import { OffersByCategory } from './charts/offers-by-category'
1212
import { OffersByIndustryType } from './charts/offers-by-industry-type'
1313

1414
import { SeasonDataFC } from '@/helpers/analytics-dashboard/types'
1515

16-
type ChartType = 'course' | 'workExperience' | 'gender' | 'academics' | 'courseCategory' | 'industryType'
16+
type ChartType = 'course' | 'department' | 'gender' | 'academics' | 'category' | 'industryType'
1717
type ViewType = 'chart' | 'table'
1818

1919
interface ChartConfig {
@@ -27,20 +27,20 @@ export function ChartSection({ stats }: { stats: SeasonDataFC }) {
2727
// Individual view state for each chart
2828
const [viewTypes, setViewTypes] = useState<Record<ChartType, ViewType>>({
2929
course: 'chart',
30-
workExperience: 'chart',
30+
department: 'chart',
3131
gender: 'chart',
3232
academics: 'chart',
33-
courseCategory: 'chart',
33+
category: 'chart',
3434
industryType: 'chart'
3535
})
3636

3737
const charts: ChartConfig[] = [
38-
{ type: 'course', title: 'Offers by Course', component: OffersByCourse, data: stats.courseWiseStats },
39-
{ type: 'workExperience', title: 'Offers by Work Experience', component: OffersByWorkExperience, data: stats.departmentWiseStats },
38+
{ type: 'course', title: 'Offers by Courses', component: OffersByCourse, data: stats.courseWiseStats },
39+
{ type: 'department', title: 'Offers by Departments', component: OffersByDepartment, data: stats.departmentWiseStats },
4040
{ type: 'gender', title: 'Offers by Gender', component: OffersByGender, data: stats.genderWiseStats },
4141
{ type: 'academics', title: 'Offers by Academics', component: OffersByAcademics, data: stats.overallStats },
42-
{ type: 'courseCategory', title: 'Offers by Course Category', component: OffersByCourseCategory, data: stats.categoryWiseStats },
43-
{ type: 'industryType', title: 'Offers by Industry Type', component: OffersByIndustryType, data: stats.overallStats }
42+
{ type: 'category', title: 'Offers by Category', component: OffersByCategory, data: stats.categoryWiseStats },
43+
// { type: 'industryType', title: 'Offers by Industry Type', component: OffersByIndustryType, data: stats.overallStats }
4444
]
4545

4646
// Toggle view for a specific chart

‎src/components/dashboard/charts/offers-by-academics.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ interface OffersByAcademicsProps {
88
data: { cgpa: string, offers: number }[]
99
}
1010

11-
export function OffersByAcademics({ viewType, data }: OffersByAcademicsProps) {
11+
export function OffersByAcademics({ viewType, data = [] }: OffersByAcademicsProps) {
12+
// Ensure data is an array
13+
const safeData = Array.isArray(data) ? data : []
14+
1215
if (viewType === 'table') {
1316
return (
1417
<Table>
@@ -19,7 +22,7 @@ export function OffersByAcademics({ viewType, data }: OffersByAcademicsProps) {
1922
</TableRow>
2023
</TableHeader>
2124
<TableBody>
22-
{data.map((item) => (
25+
{safeData.map((item) => (
2326
<TableRow key={item.cgpa}>
2427
<TableCell>{item.cgpa}</TableCell>
2528
<TableCell>{item.offers}</TableCell>
@@ -32,7 +35,7 @@ export function OffersByAcademics({ viewType, data }: OffersByAcademicsProps) {
3235

3336
return (
3437
<ResponsiveContainer width="100%" height={300}>
35-
<LineChart data={data}>
38+
<LineChart data={safeData}>
3639
<CartesianGrid strokeDasharray="3 3" />
3740
<XAxis dataKey="cgpa" />
3841
<YAxis />

‎src/components/dashboard/charts/offers-by-category.tsx

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
'use client'
2+
3+
import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
4+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
5+
6+
interface CategoryStats {
7+
totalRegisteredStudentsCount: number
8+
placedStudentsCount: number
9+
placementPercentage: number
10+
unplacedPercentage: number
11+
highestPackage: number
12+
lowestPackage: number
13+
meanPackage: number
14+
medianPackage: number
15+
modePackage: number
16+
totalOffers: number
17+
totalCompaniesOffering: number
18+
}
19+
20+
interface CategoryWiseStats {
21+
[key: string]: CategoryStats
22+
}
23+
24+
interface OffersByCategoryProps {
25+
viewType: 'chart' | 'table'
26+
data: CategoryWiseStats
27+
}
28+
29+
const CustomTooltip = ({ active, payload, label }: any) => {
30+
if (active && payload && payload.length) {
31+
const stats = payload[0].payload.stats;
32+
return (
33+
<div className="bg-white p-4 rounded-lg shadow-lg border">
34+
<h3 className="font-bold">{label}</h3>
35+
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
36+
<p>Placed Students: {stats.placedStudentsCount}</p>
37+
<p>Placement %: {stats.placementPercentage.toFixed(2)}%</p>
38+
<p>Unplaced %: {stats.unplacedPercentage.toFixed(2)}%</p>
39+
<p>Highest Package: ₹{stats.highestPackage.toFixed(2)}L</p>
40+
<p>Lowest Package: ₹{stats.lowestPackage.toFixed(2)}L</p>
41+
<p>Mean Package: ₹{stats.meanPackage.toFixed(2)}L</p>
42+
<p>Median Package: ₹{stats.medianPackage.toFixed(2)}L</p>
43+
<p>Mode Package: ₹{stats.modePackage.toFixed(2)}L</p>
44+
<p>Total Offers: {stats.totalOffers}</p>
45+
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
46+
</div>
47+
);
48+
}
49+
return null;
50+
};
51+
52+
export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps) {
53+
const transformedData = Object.entries(data).map(([course, stats]) => ({
54+
course,
55+
placementPercentage: stats.placementPercentage,
56+
stats
57+
}));
58+
59+
if (viewType === 'table') {
60+
return (
61+
<Table>
62+
<TableHeader>
63+
<TableRow>
64+
<TableHead>Course</TableHead>
65+
<TableHead>Total Students</TableHead>
66+
<TableHead>Placed Students</TableHead>
67+
<TableHead>Placement %</TableHead>
68+
<TableHead>Unplaced %</TableHead>
69+
<TableHead>Highest Package (₹L)</TableHead>
70+
<TableHead>Lowest Package (₹L)</TableHead>
71+
<TableHead>Mean Package (₹L)</TableHead>
72+
<TableHead>Median Package (₹L)</TableHead>
73+
<TableHead>Mode Package (₹L)</TableHead>
74+
<TableHead>Total Offers</TableHead>
75+
<TableHead>Companies Offering</TableHead>
76+
</TableRow>
77+
</TableHeader>
78+
<TableBody>
79+
{Object.entries(data).map(([course, stats]) => (
80+
<TableRow key={course}>
81+
<TableCell>{course}</TableCell>
82+
<TableCell>{stats.totalRegisteredStudentsCount}</TableCell>
83+
<TableCell>{stats.placedStudentsCount}</TableCell>
84+
<TableCell>{stats.placementPercentage.toFixed(2)}%</TableCell>
85+
<TableCell>{stats.unplacedPercentage.toFixed(2)}%</TableCell>
86+
<TableCell>{stats.highestPackage.toFixed(2)}</TableCell>
87+
<TableCell>{stats.lowestPackage.toFixed(2)}</TableCell>
88+
<TableCell>{stats.meanPackage.toFixed(2)}</TableCell>
89+
<TableCell>{stats.medianPackage.toFixed(2)}</TableCell>
90+
<TableCell>{stats.modePackage.toFixed(2)}</TableCell>
91+
<TableCell>{stats.totalOffers}</TableCell>
92+
<TableCell>{stats.totalCompaniesOffering}</TableCell>
93+
</TableRow>
94+
))}
95+
</TableBody>
96+
</Table>
97+
)
98+
}
99+
100+
return (
101+
<ResponsiveContainer width="100%" height={400}>
102+
<BarChart
103+
data={transformedData}
104+
margin={{
105+
top: 20,
106+
right: 30,
107+
left: 20,
108+
bottom: 100
109+
}}
110+
>
111+
<CartesianGrid strokeDasharray="3 3" />
112+
<XAxis
113+
dataKey="course"
114+
interval={0}
115+
angle={-45}
116+
textAnchor="end"
117+
height={100}
118+
tick={{
119+
dx: -8,
120+
dy: 10,
121+
fontSize: 12
122+
}}
123+
/>
124+
<YAxis
125+
label={{
126+
value: 'Placement %',
127+
angle: -90,
128+
position: 'insideLeft',
129+
style: { textAnchor: 'middle' }
130+
}}
131+
/>
132+
<Tooltip content={<CustomTooltip />} />
133+
<Bar
134+
dataKey="placementPercentage"
135+
fill="#82ca9d"
136+
name="Placement %"
137+
/>
138+
</BarChart>
139+
</ResponsiveContainer>
140+
)
141+
}
142+

‎src/components/dashboard/charts/offers-by-course-category.tsx

-57
This file was deleted.

0 commit comments

Comments
 (0)