All files / src/app/teacher-page/page/dashboard/components AssignmentSubmissionsChart.jsx

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
 
 
 
 
 
 
43x
43x
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
 
 
 
 
 
 
 
160x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { alpha } from "@mui/material/styles";
import { Box, Card, Chip, Skeleton, Typography } from "@mui/material";
import BarChartIcon from "@mui/icons-material/BarChart";
import StackedColumnChart from "@/utils/components/charts/StackedColumnChart";
 
export default function AssignmentSubmissionsChart({ chartData, chartCategories, loading }) {
    return (
        <Card elevation={0} sx={{ border: (t) => `1px solid ${t.palette.divider}`, borderRadius: 3, overflow: "hidden" }}>
            <Box sx={{ px: 3, pt: 2.5, pb: 1, display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
                <Box>
                    <Typography variant="subtitle1" fontWeight={700} color="text.primary">
                        Assignment Submissions
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                        Assignments vs. submissions per class
                    </Typography>
                </Box>
                {!loading && chartCategories.length > 0 && (
                    <Chip
                        label={`${chartCategories.length} class${chartCategories.length !== 1 ? "es" : ""}`}
                        size="small"
                        sx={{ fontWeight: 700, bgcolor: (t) => alpha(t.palette.info.main, 0.1), color: "info.main", flexShrink: 0 }}
                    />
                )}
            </Box>
            <Box sx={{ px: 2, pb: 2 }}>
                {loading ? (
                    <Box sx={{ display: "flex", alignItems: "flex-end", gap: 1.5, height: 300, px: 2, pb: 2, pt: 2 }}>
                        {[55, 80, 40, 90, 65, 75, 50, 85].map((h, i) => (
                            <Skeleton key={i} variant="rounded" sx={{ flex: 1, height: `${h}%`, borderRadius: 1 }} />
                        ))}
                    </Box>
                ) : chartCategories.length === 0 ? (
                    <Box sx={{ height: 300, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1 }}>
                        <BarChartIcon sx={{ fontSize: 52, color: "text.disabled" }} />
                        <Typography variant="body2" color="text.secondary">
                            No assignment data available yet
                        </Typography>
                    </Box>
                ) : (
                    <StackedColumnChart title="" data={chartData} categories={chartCategories} loading={false} />
                )}
            </Box>
        </Card>
    );
}