[University][Graduations] add averages

services/frontend/src/pages/University/FacultyGraduationsTab/index.tsx

@@ -3,16 +3,17 @@ import Stack from '@mui/material/Stack'
 import { useState } from 'react'
 
 import { facultyToolTips } from '@/common/InfoToolTips'
-import { Toggle } from '@/components/common/toggle/Toggle'
 import { ToggleContainer } from '@/components/common/toggle/ToggleContainer'
+import { GraduationView } from '@/components/GraduationTimes'
 import { FacultyGraduations } from '@/components/GraduationTimes/FacultyGraduations'
+import { GraduationModeSelector } from '@/components/GraduationTimes/ModeSelector'
 import { Section } from '@/components/Section'
 import { useGetAllFacultiesGraduationStatsQuery } from '@/redux/facultyStats'
 
 export const FacultyGraduationsTab = () => {
   const { data, isFetching, isError } = useGetAllFacultiesGraduationStatsQuery()
 
-  const [medianMode, setMedianMode] = useState(false)
+  const [view, setView] = useState<GraduationView>('breakdown')
 
   return (
     <Stack spacing={2}>
@@ -22,17 +23,10 @@ export const FacultyGraduationsTab = () => {
         title="Average graduation times"
       >
         <ToggleContainer>
-          <Toggle
-            cypress="graduation-time-toggle"
-            disabled={isFetching || isError}
-            firstLabel="Breakdown"
-            secondLabel="Median times"
-            setValue={() => setMedianMode(!medianMode)}
-            value={medianMode}
-          />
+          <GraduationModeSelector disabled={isFetching || isError} setValue={setView} value={view} />
         </ToggleContainer>
       </Section>
-      <FacultyGraduations data={data} isError={isError} isLoading={isFetching} showMedian={medianMode} universityMode />
+      <FacultyGraduations data={data} isError={isError} isLoading={isFetching} universityMode view={view} />
     </Stack>
   )
 }