Skip to content

Commit a09e323

Browse files
SoniHarsh1mittal-ishaan
SoniHarsh1
and
mittal-ishaan
authored
adds saperate dynamic labels for intern and placement in analytics dashboard (#202)
Co-authored-by: Ishaan Mittal <ishaanmittal123@gmail.com>
1 parent d7ecb90 commit a09e323

9 files changed

+205
-126
lines changed

Diff for: ‎src/components/dashboard/chart-section.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,16 @@ type ViewType = 'chart' | 'table'
1919
interface ChartConfig {
2020
type: ChartType
2121
title: string
22-
component: React.ComponentType<{ viewType: ViewType, data: any }>
22+
component: React.ComponentType<{ viewType: ViewType, data: any, seasonType: string }>
2323
data: any
2424
}
2525

26-
export function ChartSection({ stats }: { stats: SeasonDataFC }) {
26+
interface ChartProps {
27+
stats: SeasonDataFC;
28+
seasonType: string;
29+
}
30+
31+
export function ChartSection({ stats, seasonType }: ChartProps) {
2732
// Individual view state for each chart
2833
const [viewTypes, setViewTypes] = useState<Record<ChartType, ViewType>>({
2934
course: 'chart',
@@ -70,7 +75,7 @@ export function ChartSection({ stats }: { stats: SeasonDataFC }) {
7075
</Button>
7176
</CardHeader>
7277
<CardContent>
73-
<ChartComponent viewType={viewTypes[type]} data={data} />
78+
<ChartComponent viewType={viewTypes[type]} data={data} seasonType = {seasonType}/>
7479
</CardContent>
7580
</Card>
7681
))}

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

+25-18
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,27 @@ interface AcademicWiseStats {
2424
interface OffersByAcademicsProps {
2525
viewType: 'chart' | 'table'
2626
data: AcademicWiseStats
27+
seasonType: string
2728
}
2829

29-
const CustomTooltip = ({ active, payload, label }: any) => {
30+
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
31+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
32+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
33+
3034
if (active && payload && payload.length) {
3135
const stats = payload[0].payload.stats;
3236
return (
3337
<div className="bg-white p-4 rounded-lg shadow-lg border">
3438
<h3 className="font-bold">{`CPI : ${label}`}</h3>
3539
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
3640
<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>
41+
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
42+
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
43+
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
44+
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
45+
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
46+
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
47+
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
4448
<p>Total Offers: {stats.totalOffers}</p>
4549
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
4650
</div>
@@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
4953
return null;
5054
};
5155

52-
export function OffersByAcademics({ viewType, data = {} }: OffersByAcademicsProps) {
56+
export function OffersByAcademics({ viewType, data = {}, seasonType }: OffersByAcademicsProps) {
57+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
58+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
59+
5360
const transformedData = Object.entries(data).map(([cpi, stats]) => ({
5461
cpi,
5562
placementPercentage: stats.placementPercentage,
@@ -64,13 +71,13 @@ export function OffersByAcademics({ viewType, data = {} }: OffersByAcademicsProp
6471
<TableHead>Course</TableHead>
6572
<TableHead>Total Students</TableHead>
6673
<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>{`${typeLabel} %`}</TableHead>
75+
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
76+
<TableHead>{`Highest ${packageLabel}`}</TableHead>
77+
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
78+
<TableHead>{`Mean ${packageLabel}`}</TableHead>
79+
<TableHead>{`Median ${packageLabel}`}</TableHead>
80+
<TableHead>{`Mode ${packageLabel}`}</TableHead>
7481
<TableHead>Total Offers</TableHead>
7582
<TableHead>Companies Offering</TableHead>
7683
</TableRow>
@@ -117,13 +124,13 @@ export function OffersByAcademics({ viewType, data = {} }: OffersByAcademicsProp
117124
/>
118125
<YAxis
119126
label={{
120-
value: 'Placement %',
127+
value: `${typeLabel} %`,
121128
angle: -90,
122129
position: 'insideLeft',
123130
style: { textAnchor: 'middle' }
124131
}}
125132
/>
126-
<Tooltip content={<CustomTooltip />} />
133+
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
127134
<Line type="monotone" dataKey="placementPercentage" stroke="#8884d8" />
128135
</LineChart>
129136
</ResponsiveContainer>

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

+26-19
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,27 @@ interface CategoryWiseStats {
2424
interface OffersByCategoryProps {
2525
viewType: 'chart' | 'table'
2626
data: CategoryWiseStats
27+
seasonType: string
2728
}
2829

29-
const CustomTooltip = ({ active, payload, label }: any) => {
30+
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
31+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
32+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
33+
3034
if (active && payload && payload.length) {
3135
const stats = payload[0].payload.stats;
3236
return (
3337
<div className="bg-white p-4 rounded-lg shadow-lg border">
3438
<h3 className="font-bold">{label}</h3>
3539
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
3640
<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>
41+
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
42+
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
43+
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
44+
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
45+
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
46+
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
47+
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
4448
<p>Total Offers: {stats.totalOffers}</p>
4549
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
4650
</div>
@@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
4953
return null;
5054
};
5155

52-
export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps) {
56+
export function OffersByCategory({ viewType, data = {}, seasonType }: OffersByCategoryProps) {
57+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
58+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
59+
5360
const transformedData = Object.entries(data).map(([category, stats]) => ({
5461
category,
5562
placementPercentage: stats.placementPercentage,
@@ -64,13 +71,13 @@ export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps)
6471
<TableHead>Course</TableHead>
6572
<TableHead>Total Students</TableHead>
6673
<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>{`${typeLabel} %`}</TableHead>
75+
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
76+
<TableHead>{`Highest ${packageLabel}`}</TableHead>
77+
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
78+
<TableHead>{`Mean ${packageLabel}`}</TableHead>
79+
<TableHead>{`Median ${packageLabel}`}</TableHead>
80+
<TableHead>{`Mode ${packageLabel}`}</TableHead>
7481
<TableHead>Total Offers</TableHead>
7582
<TableHead>Companies Offering</TableHead>
7683
</TableRow>
@@ -122,17 +129,17 @@ export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps)
122129
/>
123130
<YAxis
124131
label={{
125-
value: 'Placement %',
132+
value: `${typeLabel} %`,
126133
angle: -90,
127134
position: 'insideLeft',
128135
style: { textAnchor: 'middle' }
129136
}}
130137
/>
131-
<Tooltip content={<CustomTooltip />} />
138+
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
132139
<Bar
133140
dataKey="placementPercentage"
134141
fill="#82ca9d"
135-
name="Placement %"
142+
name={`${typeLabel} %`}
136143
/>
137144
</BarChart>
138145
</ResponsiveContainer>

Diff for: ‎src/components/dashboard/charts/offers-by-course.tsx

+26-19
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,27 @@ interface CourseWiseStats {
2424
interface OffersByCourseProps {
2525
viewType: 'chart' | 'table'
2626
data: CourseWiseStats
27+
seasonType: string
2728
}
2829

29-
const CustomTooltip = ({ active, payload, label }: any) => {
30+
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
31+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
32+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
33+
3034
if (active && payload && payload.length) {
3135
const stats = payload[0].payload.stats;
3236
return (
3337
<div className="bg-white p-4 rounded-lg shadow-lg border">
3438
<h3 className="font-bold">{label}</h3>
3539
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
3640
<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>
41+
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
42+
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
43+
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
44+
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
45+
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
46+
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
47+
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
4448
<p>Total Offers: {stats.totalOffers}</p>
4549
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
4650
</div>
@@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
4953
return null;
5054
};
5155

52-
export function OffersByCourse({ viewType, data = {} }: OffersByCourseProps) {
56+
export function OffersByCourse({ viewType, data = {}, seasonType }: OffersByCourseProps) {
57+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
58+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
59+
5360
const transformedData = Object.entries(data).map(([course, stats]) => ({
5461
course,
5562
placementPercentage: stats.placementPercentage,
@@ -64,13 +71,13 @@ export function OffersByCourse({ viewType, data = {} }: OffersByCourseProps) {
6471
<TableHead>Course</TableHead>
6572
<TableHead>Total Students</TableHead>
6673
<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>{`${typeLabel} %`}</TableHead>
75+
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
76+
<TableHead>{`Highest ${packageLabel}`}</TableHead>
77+
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
78+
<TableHead>{`Mean ${packageLabel}`}</TableHead>
79+
<TableHead>{`Median ${packageLabel}`}</TableHead>
80+
<TableHead>{`Mode ${packageLabel}`}</TableHead>
7481
<TableHead>Total Offers</TableHead>
7582
<TableHead>Companies Offering</TableHead>
7683
</TableRow>
@@ -123,17 +130,17 @@ export function OffersByCourse({ viewType, data = {} }: OffersByCourseProps) {
123130
/>
124131
<YAxis
125132
label={{
126-
value: 'Placement %',
133+
value: `${typeLabel} %`,
127134
angle: -90,
128135
position: 'insideLeft',
129136
style: { textAnchor: 'middle' }
130137
}}
131138
/>
132-
<Tooltip content={<CustomTooltip />} />
139+
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
133140
<Bar
134141
dataKey="placementPercentage"
135142
fill="#82ca9d"
136-
name="Placement %"
143+
name={`${typeLabel} %`}
137144
/>
138145
</BarChart>
139146
</ResponsiveContainer>

Diff for: ‎src/components/dashboard/charts/offers-by-department.tsx

+27-20
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,27 @@ interface DepartmentWiseStats {
2424
interface OffersByDepartmentProps {
2525
viewType: 'chart' | 'table'
2626
data: DepartmentWiseStats
27+
seasonType: string
2728
}
2829

29-
const CustomTooltip = ({ active, payload, label }: any) => {
30+
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
31+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
32+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
33+
3034
if (active && payload && payload.length) {
3135
const stats = payload[0].payload.stats;
3236
return (
3337
<div className="bg-white p-4 rounded-lg shadow-lg border">
34-
<h3 className="font-bold">`CPI : {label}</h3>
38+
<h3 className="font-bold">{label}</h3>
3539
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
3640
<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>
41+
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
42+
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
43+
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
44+
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
45+
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
46+
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
47+
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
4448
<p>Total Offers: {stats.totalOffers}</p>
4549
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
4650
</div>
@@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
4953
return null;
5054
};
5155

52-
export function OffersByDepartment({ viewType, data = {} }: OffersByDepartmentProps) {
56+
export function OffersByDepartment({ viewType, data = {}, seasonType }: OffersByDepartmentProps) {
57+
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
58+
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";
59+
5360
const transformedData = Object.entries(data).map(([department, stats]) => ({
5461
department,
5562
placementPercentage: stats.placementPercentage,
@@ -64,13 +71,13 @@ export function OffersByDepartment({ viewType, data = {} }: OffersByDepartmentPr
6471
<TableHead>Department</TableHead>
6572
<TableHead>Total Students</TableHead>
6673
<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>{`${typeLabel} %`}</TableHead>
75+
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
76+
<TableHead>{`Highest ${packageLabel}`}</TableHead>
77+
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
78+
<TableHead>{`Mean ${packageLabel}`}</TableHead>
79+
<TableHead>{`Median ${packageLabel}`}</TableHead>
80+
<TableHead>{`Mode ${packageLabel}`}</TableHead>
7481
<TableHead>Total Offers</TableHead>
7582
<TableHead>Companies Offering</TableHead>
7683
</TableRow>
@@ -123,17 +130,17 @@ export function OffersByDepartment({ viewType, data = {} }: OffersByDepartmentPr
123130
/>
124131
<YAxis
125132
label={{
126-
value: 'Placement %',
133+
value: `${typeLabel} %`,
127134
angle: -90,
128135
position: 'insideLeft',
129136
style: { textAnchor: 'middle' }
130137
}}
131138
/>
132-
<Tooltip content={<CustomTooltip />} />
139+
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
133140
<Bar
134141
dataKey="placementPercentage"
135142
fill="#82ca9d"
136-
name="Placement %"
143+
name={`${typeLabel} %`}
137144
/>
138145
</BarChart>
139146
</ResponsiveContainer>

0 commit comments

Comments
 (0)