Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1x 3x 3x 1x 2x 2x 2x 2x | import { useTheme } from "@mui/material/styles";
import { Chip, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
import { scoreBandColor, toNumber } from "./scoreBands";
const CategoryPerformanceTable = ({ categories, columnLabel }) => {
const theme = useTheme();
if (!categories || categories.length === 0) {
return (
<Typography variant="body2" color="text.secondary">
No category breakdown available for this assignment.
</Typography>
);
}
return (
<TableContainer>
<Table size="small" id="assignment-summary-category-table" aria-label="Category performance">
<TableHead>
<TableRow>
<TableCell sx={{ fontWeight: 600 }}>{columnLabel}</TableCell>
<TableCell sx={{ fontWeight: 600 }} align="right">
Questions
</TableCell>
<TableCell sx={{ fontWeight: 600 }} align="right">
Correct
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{categories.map((row) => {
const correct = toNumber(row.correct);
const color = scoreBandColor(theme, correct);
return (
<TableRow key={row.topic}>
<TableCell>{row.topic}</TableCell>
<TableCell align="right">{row.questions}</TableCell>
<TableCell align="right">
<Chip
size="small"
label={row.correct}
variant="outlined"
sx={{ color, borderColor: color, fontWeight: 700 }}
/>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
};
export default CategoryPerformanceTable;
|