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 57 58 59 60 61 62 63 64 65 66 67 68 69 | 2x 5x 5x 4x 4x 5x 1x 4x 4x 4x 4x 4x 4x 4x | import { useTheme } from "@mui/material/styles";
import { Typography } from "@mui/material";
import ReactApexChart from "react-apexcharts";
import { scoreBandColor, toNumber } from "./scoreBands";
import { EXPORT_ONLY_TOOLBAR } from "@/utils/components/charts/chartExportToolbar";
const CategoryPerformanceChart = ({ categories }) => {
const theme = useTheme();
const rows = (categories ?? [])
.map((c) => ({ topic: c.topic, correct: toNumber(c.correct) }))
.filter((c) => c.correct !== null)
// Weakest topics first — the most actionable information at a glance.
.sort((a, b) => a.correct - b.correct);
if (rows.length === 0) {
return (
<Typography variant="body2" color="text.secondary">
No category breakdown available for this assignment.
</Typography>
);
}
const categoriesList = rows.map((r) => r.topic);
const values = rows.map((r) => r.correct);
const colors = rows.map((r) => scoreBandColor(theme, r.correct));
const options = {
chart: { type: "bar", toolbar: EXPORT_ONLY_TOOLBAR },
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 4,
borderRadiusApplication: "end",
barHeight: "55%",
},
},
colors,
legend: { show: false },
dataLabels: {
enabled: true,
formatter: (val) => `${val}%`,
style: { colors: [theme.palette.text.primary], fontSize: "12px" },
},
grid: { borderColor: theme.palette.divider },
xaxis: {
categories: categoriesList,
min: 0,
max: 100,
labels: { style: { colors: theme.palette.text.secondary } },
axisBorder: { color: theme.palette.divider },
axisTicks: { color: theme.palette.divider },
},
yaxis: { labels: { style: { colors: theme.palette.text.secondary } } },
tooltip: {
theme: theme.palette.mode,
y: { formatter: (val) => `${val}% correct` },
},
};
const series = [{ name: "Correct", data: values }];
const chartHeight = Math.max(200, rows.length * 46);
return <ReactApexChart options={options} series={series} type="bar" height={chartHeight} />;
};
export default CategoryPerformanceChart;
|