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 | 1x 14x 14x 14x 14x 14x 2x 14x | import { useTheme } from "@mui/material/styles";
import { Box, Typography } from "@mui/material";
import ReactApexChart from "react-apexcharts";
import { bandColor, bandLabel } from "@/app/student-page/page/my-grade/gradeBands";
const GradeGaugeChart = ({ average, totalGraded, totalAssignments }) => {
const theme = useTheme();
const hasValue = typeof average === "number" && Number.isFinite(average);
const color = bandColor(theme, average);
const label = bandLabel(average);
const options = {
chart: { type: "radialBar", sparkline: { enabled: true } },
colors: [color],
plotOptions: {
radialBar: {
hollow: { size: "68%" },
track: { background: theme.palette.action.hover, strokeWidth: "100%" },
dataLabels: {
name: { show: false },
value: {
offsetY: 8,
fontSize: "30px",
fontWeight: 700,
color: theme.palette.text.primary,
formatter: () => (hasValue ? average.toFixed(2) : "—"),
},
},
},
},
stroke: { lineCap: "round" },
};
return (
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
<ReactApexChart options={options} series={[hasValue ? average : 0]} type="radialBar" height={220} />
<Box sx={{ mt: -1, textAlign: "center" }}>
{label && (
<Typography variant="body2" sx={{ fontWeight: 600, color }}>
{label}
</Typography>
)}
<Typography variant="caption" color="text.secondary">
Based on {totalGraded} of {totalAssignments} assignment{totalAssignments === 1 ? "" : "s"}
</Typography>
</Box>
</Box>
);
};
export default GradeGaugeChart;
|