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 | 2x 4x 4x 4x 1x 3x 3x 3x 3x | import { useTheme } from "@mui/material/styles";
import { Box, Stack, Typography } from "@mui/material";
import ReactApexChart from "react-apexcharts";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CancelIcon from "@mui/icons-material/Cancel";
import { EXPORT_ONLY_TOOLBAR } from "@/utils/components/charts/chartExportToolbar";
const PassFailDonut = ({ passed, failed }) => {
const theme = useTheme();
const total = passed + failed;
if (total === 0) {
return (
<Typography variant="body2" color="text.secondary">
No graded submissions yet.
</Typography>
);
}
const passRate = Math.round((passed / total) * 100);
const colors = [theme.palette.success.main, theme.palette.error.main];
const options = {
chart: { type: "donut", toolbar: EXPORT_ONLY_TOOLBAR },
labels: ["Passed", "Failed"],
colors,
legend: { show: false },
dataLabels: { enabled: false },
stroke: { width: 2, colors: [theme.palette.background.paper] },
tooltip: {
theme: theme.palette.mode,
y: { formatter: (val) => `${val} student${val === 1 ? "" : "s"}` },
},
plotOptions: {
pie: {
donut: {
size: "72%",
labels: {
show: true,
total: {
show: true,
label: "Pass rate",
color: theme.palette.text.secondary,
formatter: () => `${passRate}%`,
},
value: { color: theme.palette.text.primary, fontWeight: 700 },
},
},
},
},
};
return (
<Stack
direction={{ xs: "column", sm: "row" }}
spacing={2}
alignItems="center"
id="assignment-summary-pass-fail-chart"
>
<Box sx={{ flexShrink: 0 }}>
<ReactApexChart options={options} series={[passed, failed]} type="donut" width={190} height={190} />
</Box>
<Stack spacing={1} sx={{ width: "100%" }}>
<Stack direction="row" alignItems="center" justifyContent="space-between" data-status="passed">
<Stack direction="row" alignItems="center" spacing={1}>
<CheckCircleIcon sx={{ fontSize: 18, color: theme.palette.success.main }} />
<Typography variant="body2">Passed</Typography>
</Stack>
<Typography variant="body2" fontWeight={700}>
{passed}
</Typography>
</Stack>
<Stack direction="row" alignItems="center" justifyContent="space-between" data-status="failed">
<Stack direction="row" alignItems="center" spacing={1}>
<CancelIcon sx={{ fontSize: 18, color: theme.palette.error.main }} />
<Typography variant="body2">Failed</Typography>
</Stack>
<Typography variant="body2" fontWeight={700}>
{failed}
</Typography>
</Stack>
</Stack>
</Stack>
);
};
export default PassFailDonut;
|