1
1
import { useState } from 'react'
2
- import { Box , Paper , Typography , TableBody , TableCell , TableHead , TableRow , Table , Button } from '@mui/material'
2
+ import { Box , Paper , Typography , TableBody , TableCell , TableHead , TableRow , Table , Button , Tooltip as MUITooltip } from '@mui/material'
3
3
import { useTranslation } from 'react-i18next'
4
4
import { BarChart , Bar , YAxis , Tooltip , ResponsiveContainer } from 'recharts'
5
5
6
6
import useCurrentUser from '../../../hooks/useCurrentUser'
7
7
import useCourse , { useCourseEnrolments , useCourseStatistics } from '../../../hooks/useCourse'
8
8
import MaxTokenUsageStudents from './MaxTokenUsageStudents'
9
+ import { HelpOutline } from '@mui/icons-material'
9
10
10
11
const Stats = ( { courseId } : { courseId : string } ) => {
11
12
const { t } = useTranslation ( )
@@ -47,11 +48,11 @@ const Stats = ({ courseId }: { courseId: string }) => {
47
48
</ Typography >
48
49
49
50
< Typography sx = { { my : 1 } } >
50
- { t ( 'course:averageTokenUsage' ) } { Math . round ( average ) ?? t ( 'course:noData' ) }
51
+ { t ( 'course:averageTokenUsage' ) } : < strong > { Math . round ( average ) ?? t ( 'course:noData' ) } </ strong >
51
52
</ Typography >
52
53
53
54
< Typography >
54
- { t ( 'course:usagePercentage' ) } { usagePercentage ? `${ Math . round ( usagePercentage * 100 * 10 ) / 10 } %` : t ( 'course:noData' ) }
55
+ { t ( 'course:usagePercentage' ) } : < strong > { usagePercentage ? `${ Math . round ( usagePercentage * 100 * 10 ) / 10 } %` : t ( 'course:noData' ) } </ strong >
55
56
</ Typography >
56
57
57
58
{ usages && usages . length > 3 && usagePercentage > 0.2 && (
@@ -102,8 +103,38 @@ const Stats = ({ courseId }: { courseId: string }) => {
102
103
< TableCell >
103
104
< strong > { t ( 'admin:firstNames' ) } </ strong >
104
105
</ TableCell >
105
- < TableCell >
106
- < strong > { t ( 'admin:usage' ) } </ strong >
106
+ < TableCell align = 'right' >
107
+ < Box sx = { { display : 'flex' , gap : 1 , alignItems : 'center' , justifyContent : 'flex-end' } } >
108
+ < strong > { t ( 'admin:usage' ) } </ strong >
109
+ < MUITooltip
110
+ arrow
111
+ placement = "top"
112
+ title = {
113
+ < Typography variant = "body2" sx = { { p : 1 } } >
114
+ { t ( 'course:usageToolTip' ) }
115
+ </ Typography >
116
+ }
117
+ >
118
+ < HelpOutline fontSize = "small" sx = { { color : 'inherit' , opacity : 0.7 } } />
119
+ </ MUITooltip >
120
+ </ Box >
121
+ </ TableCell >
122
+
123
+ < TableCell align = 'right' >
124
+ < Box sx = { { display : 'flex' , gap : 1 , alignItems : 'center' , justifyContent : 'flex-end' } } >
125
+ < strong > { t ( 'admin:totalUsage' ) } </ strong >
126
+ < MUITooltip
127
+ arrow
128
+ placement = "top"
129
+ title = {
130
+ < Typography variant = "body2" sx = { { p : 1 } } >
131
+ { t ( 'course:totalUsageToolTip' ) }
132
+ </ Typography >
133
+ }
134
+ >
135
+ < HelpOutline fontSize = "small" sx = { { color : 'inherit' , opacity : 0.7 } } />
136
+ </ MUITooltip >
137
+ </ Box >
107
138
</ TableCell >
108
139
</ TableRow >
109
140
</ TableHead >
@@ -113,7 +144,8 @@ const Stats = ({ courseId }: { courseId: string }) => {
113
144
< TableCell > { enrolled . student_number } </ TableCell >
114
145
< TableCell > { enrolled . last_name } </ TableCell >
115
146
< TableCell > { enrolled . first_names } </ TableCell >
116
- < TableCell > { usageByUser [ enrolled . id ] ? usageByUser [ enrolled . id ] . usageCount : 0 } </ TableCell >
147
+ < TableCell align = 'right' > { usageByUser [ enrolled . id ] ? usageByUser [ enrolled . id ] . usageCount : 0 } </ TableCell >
148
+ < TableCell align = 'right' > { usageByUser [ enrolled . id ] ? usageByUser [ enrolled . id ] . totalUsageCount : 0 } </ TableCell >
117
149
</ TableRow >
118
150
) ) }
119
151
</ TableBody >
0 commit comments