11export default function CompanyStatistics ( {
22 workModels,
3- reviews,
43 payStats,
54 payRange,
5+ jobTypes,
66} : {
77 workModels : { name : string ; percentage : number ; count : number } [ ] ;
88 payStats : { pay : string ; percentage : number ; count : number } [ ] ;
9- reviews : number ;
109 payRange : { label ?: string ; min : number ; max : number } [ ] ;
10+ jobTypes : { name : string ; percentage : number ; count : number } [ ] ;
1111} ) {
1212 const payRangeColors = [
1313 "cooper-yellow-200" ,
1414 "cooper-blue-400" ,
1515 "cooper-red-400" ,
1616 ] ;
1717
18+ const payOrder : Record < string , number > = {
19+ Low : 0 ,
20+ Pay : 0 ,
21+ Mid : 1 ,
22+ High : 2 ,
23+ } ;
24+ const jobTypeOrder : Record < string , number > = {
25+ "Co-op" : 0 ,
26+ Internship : 1 ,
27+ } ;
28+ const workModelOrder : Record < string , number > = {
29+ "In-person" : 0 ,
30+ Hybrid : 1 ,
31+ Remote : 2 ,
32+ } ;
33+
1834 const payRangesWithData = payRange
1935 . map ( ( range , rangeIndex ) => {
2036 const statsInRange = payStats . filter ( ( stat ) => {
@@ -36,24 +52,63 @@ export default function CompanyStatistics({
3652 color : payRangeColors [ rangeIndex ] ,
3753 } ;
3854 } )
39- . filter ( ( item ) => item . count > 0 ) ;
55+ . filter ( ( item ) => item . count > 0 )
56+ . sort (
57+ ( a , b ) =>
58+ ( payOrder [ a . range . label ?? 3 ] ?? 3 ) -
59+ ( payOrder [ b . range . label ?? 3 ] ?? 3 ) ,
60+ ) ;
61+
62+ const sortedJobTypes = [ ...jobTypes ] . sort (
63+ ( a , b ) => ( jobTypeOrder [ a . name ] ?? 2 ) - ( jobTypeOrder [ b . name ] ?? 2 ) ,
64+ ) ;
65+ const sortedWorkModels = [ ...workModels ] . sort (
66+ ( a , b ) => ( workModelOrder [ a . name ] ?? 3 ) - ( workModelOrder [ b . name ] ?? 3 ) ,
67+ ) ;
4068 return (
4169 < div className = "flex flex-col md:flex-row justify-between w-full pt-4 text-cooper-gray-400 gap-4 md:gap-0" >
4270 < div className = "md:w-[30%]" >
4371 < p className = "pb-2" > Job type</ p >
44- < div className = "h-7 flex-1 rounded-lg bg-cooper-yellow-200" />
45- < div className = "flex flex-row items-center pt-2 justify-between" >
46- < div className = "flex flex-row items-center" >
47- < div className = "w-3.5 h-3.5 rounded-full bg-cooper-yellow-200" />
48- < div className = "pl-2" > Co-op</ div >
49- </ div >
50- < div className = "pl-2" > { reviews } </ div >
72+ < div className = "h-7 flex-1 rounded-lg flex overflow-hidden gap-0.5" >
73+ { sortedJobTypes . map ( ( job ) => (
74+ < div
75+ key = { job . name }
76+ className = { `h-full rounded-lg ${
77+ job . name === "Co-op"
78+ ? "bg-cooper-yellow-200"
79+ : job . name === "Internship"
80+ ? "bg-cooper-blue-400"
81+ : "bg-cooper-red-400"
82+ } `}
83+ style = { { width : `${ job . percentage } %` } }
84+ />
85+ ) ) }
5186 </ div >
87+ { sortedJobTypes . map ( ( job ) => (
88+ < div
89+ key = { job . name }
90+ className = "flex flex-row items-center pt-2 justify-between"
91+ >
92+ < div className = "flex flex-row items-center" >
93+ < div
94+ className = { `w-3.5 h-3.5 rounded-full ${
95+ job . name === "Co-op"
96+ ? "bg-cooper-yellow-200"
97+ : job . name === "Internship"
98+ ? "bg-cooper-blue-400"
99+ : "bg-cooper-red-400"
100+ } `}
101+ />
102+ < div className = "pl-2" > { job . name } </ div >
103+ </ div >
104+ < div className = "pl-2" > { job . count } </ div >
105+ </ div >
106+ ) ) }
52107 </ div >
53108 < div className = "md:w-[30%]" >
54109 < p className = "pb-2" > Work model</ p >
55110 < div className = "h-7 flex-1 rounded-lg flex overflow-hidden gap-0.5" >
56- { workModels . map ( ( model ) => (
111+ { sortedWorkModels . map ( ( model ) => (
57112 < div
58113 key = { model . name }
59114 className = { `h-full rounded-lg ${
@@ -68,7 +123,7 @@ export default function CompanyStatistics({
68123 ) ) }
69124 </ div >
70125
71- { workModels . map ( ( workModel ) => (
126+ { sortedWorkModels . map ( ( workModel ) => (
72127 < div
73128 key = { workModel . name }
74129 className = "flex flex-row items-center pt-2 justify-between"
0 commit comments