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 | 1x 11x 11x 12x 8x 11x 7x 4x 10x 10x 4x | import { useTheme } from "@mui/material/styles";
import { Typography } from "@mui/material";
import ReactApexChart from "react-apexcharts";
const GradeTrendChart = ({ assignments }) => {
const theme = useTheme();
const graded = (assignments ?? [])
.filter((a) => typeof a.grade === "number" && a.date_close)
.sort((a, b) => new Date(a.date_close) - new Date(b.date_close));
if (graded.length < 2) {
return (
<Typography variant="body2" color="text.secondary">
Not enough graded assignments yet to show a trend.
</Typography>
);
}
const options = {
chart: { type: "line", toolbar: { show: false }, zoom: { enabled: false } },
colors: [theme.palette.primary.main],
stroke: { width: 3, curve: "smooth" },
markers: {
size: 5,
colors: [theme.palette.background.paper],
strokeColors: theme.palette.primary.main,
strokeWidth: 2,
},
grid: { borderColor: theme.palette.divider },
xaxis: {
categories: graded.map((a) => a.title ?? "Untitled"),
labels: {
style: { colors: theme.palette.text.secondary },
rotate: -25,
trim: true,
hideOverlappingLabels: true,
},
axisBorder: { color: theme.palette.divider },
axisTicks: { color: theme.palette.divider },
},
yaxis: {
min: 0,
max: 100,
labels: { style: { colors: theme.palette.text.secondary } },
},
tooltip: {
theme: theme.palette.mode,
y: { formatter: (val) => `${val.toFixed(2)} / 100` },
},
dataLabels: { enabled: false },
};
const series = [{ name: "Grade", data: graded.map((a) => a.grade) }];
return <ReactApexChart options={options} series={series} type="line" height={280} />;
};
export default GradeTrendChart;
|