Skip to content

adds saperate dynamic labels for intern and placement in analytics dashboard #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Apr 10, 2025
Merged

adds saperate dynamic labels for intern and placement in analytics dashboard #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
757db49
Harsh/analytics dashboard (#177)
SoniHarsh1 Jan 29, 2025
2844483
Merge branch 'main' into harsh/analytics-dashboard
mittal-ishaan Feb 10, 2025
497f6c7
Harsh/analytics dashboard (#177)
SoniHarsh1 Jan 29, 2025
927cfb4
Merge branch 'main' of github.com:Web-Team-IITI-Gymkhana/tpc-frontend
SoniHarsh1 Feb 17, 2025
954f17f
featch all seasons details
SoniHarsh1 Feb 18, 2025
768d5a2
Merge branch 'harsh/analytics-dashboard' of github.com:Web-Team-IITI-…
SoniHarsh1 Feb 18, 2025
f4264cd
dashboard backend connected
SoniHarsh1 Feb 20, 2025
b44c5eb
Merge branch 'main' into harsh/analytics-dashboard
SoniHarsh1 Feb 28, 2025
9664134
fixs data ribbon and charts
SoniHarsh1 Feb 28, 2025
98d8b72
Merge branch 'main' of github.com:Web-Team-IITI-Gymkhana/tpc-frontend…
SoniHarsh1 Feb 28, 2025
62c2e8a
fixes graphs
SoniHarsh1 Mar 24, 2025
8ed084d
adds the accademic-wise stats in the analytics dashboard
SoniHarsh1 Mar 24, 2025
44112b1
fixes issue with the dashboard logo with closed sidebar
SoniHarsh1 Mar 24, 2025
30fe872
adds functionalities to download button
SoniHarsh1 Apr 8, 2025
5551f4a
Merge branch 'main' of github.com:Web-Team-IITI-Gymkhana/tpc-frontend…
SoniHarsh1 Apr 8, 2025
57e5c88
fixes the double components
SoniHarsh1 Apr 8, 2025
d30de8c
adds saperate dynamic labels for intern and placement in analytics da…
SoniHarsh1 Apr 10, 2025
1b6866d
Merge branch 'main' of github.com:Web-Team-IITI-Gymkhana/tpc-frontend…
SoniHarsh1 Apr 10, 2025
86ca463
removes unnecessary print statements
SoniHarsh1 Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/dashboard/chart-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,16 @@ type ViewType = 'chart' | 'table'
interface ChartConfig {
type: ChartType
title: string
component: React.ComponentType<{ viewType: ViewType, data: any }>
component: React.ComponentType<{ viewType: ViewType, data: any, seasonType: string }>
data: any
}

export function ChartSection({ stats }: { stats: SeasonDataFC }) {
interface ChartProps {
stats: SeasonDataFC;
seasonType: string;
}

export function ChartSection({ stats, seasonType }: ChartProps) {
// Individual view state for each chart
const [viewTypes, setViewTypes] = useState<Record<ChartType, ViewType>>({
course: 'chart',
Expand Down Expand Up @@ -70,7 +75,7 @@ export function ChartSection({ stats }: { stats: SeasonDataFC }) {
</Button>
</CardHeader>
<CardContent>
<ChartComponent viewType={viewTypes[type]} data={data} />
<ChartComponent viewType={viewTypes[type]} data={data} seasonType = {seasonType}/>
</CardContent>
</Card>
))}
Expand Down
43 changes: 25 additions & 18 deletions src/components/dashboard/charts/offers-by-academics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,27 @@ interface AcademicWiseStats {
interface OffersByAcademicsProps {
viewType: 'chart' | 'table'
data: AcademicWiseStats
seasonType: string
}

const CustomTooltip = ({ active, payload, label }: any) => {
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

if (active && payload && payload.length) {
const stats = payload[0].payload.stats;
return (
<div className="bg-white p-4 rounded-lg shadow-lg border">
<h3 className="font-bold">{`CPI : ${label}`}</h3>
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
<p>Placed Students: {stats.placedStudentsCount}</p>
<p>Placement %: {stats.placementPercentage.toFixed(2)}%</p>
<p>Unplaced %: {stats.unplacedPercentage.toFixed(2)}%</p>
<p>Highest Package: ₹{stats.highestPackage.toFixed(2)}L</p>
<p>Lowest Package: ₹{stats.lowestPackage.toFixed(2)}L</p>
<p>Mean Package: ₹{stats.meanPackage.toFixed(2)}L</p>
<p>Median Package: ₹{stats.medianPackage.toFixed(2)}L</p>
<p>Mode Package: ₹{stats.modePackage.toFixed(2)}L</p>
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
<p>Total Offers: {stats.totalOffers}</p>
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
</div>
Expand All @@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
return null;
};

export function OffersByAcademics({ viewType, data = {} }: OffersByAcademicsProps) {
export function OffersByAcademics({ viewType, data = {}, seasonType }: OffersByAcademicsProps) {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

const transformedData = Object.entries(data).map(([cpi, stats]) => ({
cpi,
placementPercentage: stats.placementPercentage,
Expand All @@ -64,13 +71,13 @@ export function OffersByAcademics({ viewType, data = {} }: OffersByAcademicsProp
<TableHead>Course</TableHead>
<TableHead>Total Students</TableHead>
<TableHead>Placed Students</TableHead>
<TableHead>Placement %</TableHead>
<TableHead>Unplaced %</TableHead>
<TableHead>Highest Package (₹L)</TableHead>
<TableHead>Lowest Package (₹L)</TableHead>
<TableHead>Mean Package (₹L)</TableHead>
<TableHead>Median Package (₹L)</TableHead>
<TableHead>Mode Package (₹L)</TableHead>
<TableHead>{`${typeLabel} %`}</TableHead>
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
<TableHead>{`Highest ${packageLabel}`}</TableHead>
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
<TableHead>{`Mean ${packageLabel}`}</TableHead>
<TableHead>{`Median ${packageLabel}`}</TableHead>
<TableHead>{`Mode ${packageLabel}`}</TableHead>
<TableHead>Total Offers</TableHead>
<TableHead>Companies Offering</TableHead>
</TableRow>
Expand Down Expand Up @@ -117,13 +124,13 @@ export function OffersByAcademics({ viewType, data = {} }: OffersByAcademicsProp
/>
<YAxis
label={{
value: 'Placement %',
value: `${typeLabel} %`,
angle: -90,
position: 'insideLeft',
style: { textAnchor: 'middle' }
}}
/>
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
<Line type="monotone" dataKey="placementPercentage" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>
Expand Down
45 changes: 26 additions & 19 deletions src/components/dashboard/charts/offers-by-category.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,27 @@ interface CategoryWiseStats {
interface OffersByCategoryProps {
viewType: 'chart' | 'table'
data: CategoryWiseStats
seasonType: string
}

const CustomTooltip = ({ active, payload, label }: any) => {
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

if (active && payload && payload.length) {
const stats = payload[0].payload.stats;
return (
<div className="bg-white p-4 rounded-lg shadow-lg border">
<h3 className="font-bold">{label}</h3>
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
<p>Placed Students: {stats.placedStudentsCount}</p>
<p>Placement %: {stats.placementPercentage.toFixed(2)}%</p>
<p>Unplaced %: {stats.unplacedPercentage.toFixed(2)}%</p>
<p>Highest Package: ₹{stats.highestPackage.toFixed(2)}L</p>
<p>Lowest Package: ₹{stats.lowestPackage.toFixed(2)}L</p>
<p>Mean Package: ₹{stats.meanPackage.toFixed(2)}L</p>
<p>Median Package: ₹{stats.medianPackage.toFixed(2)}L</p>
<p>Mode Package: ₹{stats.modePackage.toFixed(2)}L</p>
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
<p>Total Offers: {stats.totalOffers}</p>
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
</div>
Expand All @@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
return null;
};

export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps) {
export function OffersByCategory({ viewType, data = {}, seasonType }: OffersByCategoryProps) {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

const transformedData = Object.entries(data).map(([category, stats]) => ({
category,
placementPercentage: stats.placementPercentage,
Expand All @@ -64,13 +71,13 @@ export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps)
<TableHead>Course</TableHead>
<TableHead>Total Students</TableHead>
<TableHead>Placed Students</TableHead>
<TableHead>Placement %</TableHead>
<TableHead>Unplaced %</TableHead>
<TableHead>Highest Package (₹L)</TableHead>
<TableHead>Lowest Package (₹L)</TableHead>
<TableHead>Mean Package (₹L)</TableHead>
<TableHead>Median Package (₹L)</TableHead>
<TableHead>Mode Package (₹L)</TableHead>
<TableHead>{`${typeLabel} %`}</TableHead>
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
<TableHead>{`Highest ${packageLabel}`}</TableHead>
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
<TableHead>{`Mean ${packageLabel}`}</TableHead>
<TableHead>{`Median ${packageLabel}`}</TableHead>
<TableHead>{`Mode ${packageLabel}`}</TableHead>
<TableHead>Total Offers</TableHead>
<TableHead>Companies Offering</TableHead>
</TableRow>
Expand Down Expand Up @@ -122,17 +129,17 @@ export function OffersByCategory({ viewType, data = {} }: OffersByCategoryProps)
/>
<YAxis
label={{
value: 'Placement %',
value: `${typeLabel} %`,
angle: -90,
position: 'insideLeft',
style: { textAnchor: 'middle' }
}}
/>
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
<Bar
dataKey="placementPercentage"
fill="#82ca9d"
name="Placement %"
name={`${typeLabel} %`}
/>
</BarChart>
</ResponsiveContainer>
Expand Down
45 changes: 26 additions & 19 deletions src/components/dashboard/charts/offers-by-course.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,27 @@ interface CourseWiseStats {
interface OffersByCourseProps {
viewType: 'chart' | 'table'
data: CourseWiseStats
seasonType: string
}

const CustomTooltip = ({ active, payload, label }: any) => {
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

if (active && payload && payload.length) {
const stats = payload[0].payload.stats;
return (
<div className="bg-white p-4 rounded-lg shadow-lg border">
<h3 className="font-bold">{label}</h3>
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
<p>Placed Students: {stats.placedStudentsCount}</p>
<p>Placement %: {stats.placementPercentage.toFixed(2)}%</p>
<p>Unplaced %: {stats.unplacedPercentage.toFixed(2)}%</p>
<p>Highest Package: ₹{stats.highestPackage.toFixed(2)}L</p>
<p>Lowest Package: ₹{stats.lowestPackage.toFixed(2)}L</p>
<p>Mean Package: ₹{stats.meanPackage.toFixed(2)}L</p>
<p>Median Package: ₹{stats.medianPackage.toFixed(2)}L</p>
<p>Mode Package: ₹{stats.modePackage.toFixed(2)}L</p>
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
<p>Total Offers: {stats.totalOffers}</p>
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
</div>
Expand All @@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
return null;
};

export function OffersByCourse({ viewType, data = {} }: OffersByCourseProps) {
export function OffersByCourse({ viewType, data = {}, seasonType }: OffersByCourseProps) {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

const transformedData = Object.entries(data).map(([course, stats]) => ({
course,
placementPercentage: stats.placementPercentage,
Expand All @@ -64,13 +71,13 @@ export function OffersByCourse({ viewType, data = {} }: OffersByCourseProps) {
<TableHead>Course</TableHead>
<TableHead>Total Students</TableHead>
<TableHead>Placed Students</TableHead>
<TableHead>Placement %</TableHead>
<TableHead>Unplaced %</TableHead>
<TableHead>Highest Package (₹L)</TableHead>
<TableHead>Lowest Package (₹L)</TableHead>
<TableHead>Mean Package (₹L)</TableHead>
<TableHead>Median Package (₹L)</TableHead>
<TableHead>Mode Package (₹L)</TableHead>
<TableHead>{`${typeLabel} %`}</TableHead>
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
<TableHead>{`Highest ${packageLabel}`}</TableHead>
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
<TableHead>{`Mean ${packageLabel}`}</TableHead>
<TableHead>{`Median ${packageLabel}`}</TableHead>
<TableHead>{`Mode ${packageLabel}`}</TableHead>
<TableHead>Total Offers</TableHead>
<TableHead>Companies Offering</TableHead>
</TableRow>
Expand Down Expand Up @@ -123,17 +130,17 @@ export function OffersByCourse({ viewType, data = {} }: OffersByCourseProps) {
/>
<YAxis
label={{
value: 'Placement %',
value: `${typeLabel} %`,
angle: -90,
position: 'insideLeft',
style: { textAnchor: 'middle' }
}}
/>
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
<Bar
dataKey="placementPercentage"
fill="#82ca9d"
name="Placement %"
name={`${typeLabel} %`}
/>
</BarChart>
</ResponsiveContainer>
Expand Down
47 changes: 27 additions & 20 deletions src/components/dashboard/charts/offers-by-department.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,27 @@ interface DepartmentWiseStats {
interface OffersByDepartmentProps {
viewType: 'chart' | 'table'
data: DepartmentWiseStats
seasonType: string
}

const CustomTooltip = ({ active, payload, label }: any) => {
const CustomTooltip = ({ active, payload, label, seasonType }: any) => {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

if (active && payload && payload.length) {
const stats = payload[0].payload.stats;
return (
<div className="bg-white p-4 rounded-lg shadow-lg border">
<h3 className="font-bold">`CPI : {label}</h3>
<h3 className="font-bold">{label}</h3>
<p>Total Registered Students: {stats.totalRegisteredStudentsCount}</p>
<p>Placed Students: {stats.placedStudentsCount}</p>
<p>Placement %: {stats.placementPercentage.toFixed(2)}%</p>
<p>Unplaced %: {stats.unplacedPercentage.toFixed(2)}%</p>
<p>Highest Package: ₹{stats.highestPackage.toFixed(2)}L</p>
<p>Lowest Package: ₹{stats.lowestPackage.toFixed(2)}L</p>
<p>Mean Package: ₹{stats.meanPackage.toFixed(2)}L</p>
<p>Median Package: ₹{stats.medianPackage.toFixed(2)}L</p>
<p>Mode Package: ₹{stats.modePackage.toFixed(2)}L</p>
<p>{`${typeLabel} %: ${stats.placementPercentage.toFixed(2)}%`}</p>
<p>{`Un${typeLabel.toLowerCase()} %: ${stats.unplacedPercentage.toFixed(2)}%`}</p>
<p>{`Highest ${packageLabel}: ₹${stats.highestPackage.toFixed(2)}`}</p>
<p>{`Lowest ${packageLabel}: ₹${stats.lowestPackage.toFixed(2)}`}</p>
<p>{`Mean ${packageLabel}: ₹${stats.meanPackage.toFixed(2)}`}</p>
<p>{`Median ${packageLabel}: ₹${stats.medianPackage.toFixed(2)}`}</p>
<p>{`Mode ${packageLabel}: ₹${stats.modePackage.toFixed(2)}`}</p>
<p>Total Offers: {stats.totalOffers}</p>
<p>Total Companies Offering: {stats.totalCompaniesOffering}</p>
</div>
Expand All @@ -49,7 +53,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
return null;
};

export function OffersByDepartment({ viewType, data = {} }: OffersByDepartmentProps) {
export function OffersByDepartment({ viewType, data = {}, seasonType }: OffersByDepartmentProps) {
const packageLabel = seasonType === "PLACEMENT" ? "Package" : "Stipend";
const typeLabel = seasonType === "PLACEMENT" ? "Placement" : "Internship";

const transformedData = Object.entries(data).map(([department, stats]) => ({
department,
placementPercentage: stats.placementPercentage,
Expand All @@ -64,13 +71,13 @@ export function OffersByDepartment({ viewType, data = {} }: OffersByDepartmentPr
<TableHead>Department</TableHead>
<TableHead>Total Students</TableHead>
<TableHead>Placed Students</TableHead>
<TableHead>Placement %</TableHead>
<TableHead>Unplaced %</TableHead>
<TableHead>Highest Package (₹L)</TableHead>
<TableHead>Lowest Package (₹L)</TableHead>
<TableHead>Mean Package (₹L)</TableHead>
<TableHead>Median Package (₹L)</TableHead>
<TableHead>Mode Package (₹L)</TableHead>
<TableHead>{`${typeLabel} %`}</TableHead>
<TableHead>{`Un${typeLabel.toLowerCase()} %`}</TableHead>
<TableHead>{`Highest ${packageLabel}`}</TableHead>
<TableHead>{`Lowest ${packageLabel}`}</TableHead>
<TableHead>{`Mean ${packageLabel}`}</TableHead>
<TableHead>{`Median ${packageLabel}`}</TableHead>
<TableHead>{`Mode ${packageLabel}`}</TableHead>
<TableHead>Total Offers</TableHead>
<TableHead>Companies Offering</TableHead>
</TableRow>
Expand Down Expand Up @@ -123,17 +130,17 @@ export function OffersByDepartment({ viewType, data = {} }: OffersByDepartmentPr
/>
<YAxis
label={{
value: 'Placement %',
value: `${typeLabel} %`,
angle: -90,
position: 'insideLeft',
style: { textAnchor: 'middle' }
}}
/>
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<CustomTooltip seasonType={seasonType} />} />
<Bar
dataKey="placementPercentage"
fill="#82ca9d"
name="Placement %"
name={`${typeLabel} %`}
/>
</BarChart>
</ResponsiveContainer>
Expand Down
Loading