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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 1x 12x 12x 2x 50x 24x 24x 24x 10x 1x 10x 50x 50x 50x 50x 50x | import { useTheme } from "@mui/material/styles";
import { Box, Stack, Typography } from "@mui/material";
import ReactApexChart from "react-apexcharts";
import { STATUS_META, STATUS_ORDER, statusColor } from "@/app/student-page/page/my-grade/gradeStatus";
const StatusBreakdownChart = ({ statusCounts, totalAssignments }) => {
const theme = useTheme();
if (!totalAssignments) {
return (
<Typography variant="body2" color="text.secondary">
No assignments yet.
</Typography>
);
}
const nonZeroKeys = STATUS_ORDER.filter((key) => (statusCounts?.[key] ?? 0) > 0);
const series = nonZeroKeys.map((key) => statusCounts[key]);
const colors = nonZeroKeys.map((key) => statusColor(theme, STATUS_META[key].colorKey));
const labels = nonZeroKeys.map((key) => STATUS_META[key].label);
const options = {
chart: { type: "donut" },
labels,
colors,
legend: { show: false },
dataLabels: { enabled: false },
stroke: { width: 2, colors: [theme.palette.background.paper] },
tooltip: {
theme: theme.palette.mode,
y: { formatter: (val) => `${val} assignment${val === 1 ? "" : "s"}` },
},
plotOptions: {
pie: {
donut: {
size: "72%",
labels: {
show: true,
total: {
show: true,
label: "Total",
color: theme.palette.text.secondary,
formatter: () => totalAssignments,
},
value: { color: theme.palette.text.primary, fontWeight: 700 },
},
},
},
},
};
return (
<Stack
direction={{ xs: "column", sm: "row" }}
spacing={2}
alignItems="center"
id="student-my-grade-status-chart"
>
<Box sx={{ flexShrink: 0 }}>
<ReactApexChart options={options} series={series} type="donut" width={190} height={190} />
</Box>
<Stack spacing={1} sx={{ width: "100%" }}>
{STATUS_ORDER.map((key) => {
const meta = STATUS_META[key];
const count = statusCounts?.[key] ?? 0;
const color = statusColor(theme, meta.colorKey);
const Icon = meta.Icon;
return (
<Stack
key={key}
direction="row"
alignItems="center"
justifyContent="space-between"
data-status={key}
>
<Stack direction="row" alignItems="center" spacing={1}>
<Icon sx={{ fontSize: 18, color }} />
<Typography variant="body2" color={count === 0 ? "text.disabled" : "text.primary"}>
{meta.label}
</Typography>
</Stack>
<Typography
variant="body2"
fontWeight={700}
color={count === 0 ? "text.disabled" : "text.primary"}
>
{count}
</Typography>
</Stack>
);
})}
</Stack>
</Stack>
);
};
export default StatusBreakdownChart;
|