fix(student-dashboard): handle empty pie chart data states gracefully

This commit is contained in:
cfngc4594 2026-05-19 16:49:12 +08:00
parent 8473d6ed61
commit f0b69f5768

View File

@ -94,6 +94,12 @@ export default function StudentDashboard() {
errorPieChartData, errorPieChartData,
} = data; } = data;
const COLORS = ["#4CAF50", "#FFC107"]; const COLORS = ["#4CAF50", "#FFC107"];
const EMPTY_CHART_COLOR = "#E5E7EB";
const hasCompletionRecord = completionData.completed > 0;
const hasErrorChartData = errorPieChartData.some((item) => item.value > 0);
const normalizedErrorPieChartData = hasErrorChartData
? errorPieChartData
: [{ name: "暂无数据", value: 1 }];
return ( return (
<div className="container mx-auto p-6 space-y-6"> <div className="container mx-auto p-6 space-y-6">
@ -144,6 +150,11 @@ export default function StudentDashboard() {
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
{!hasCompletionRecord && (
<div className="text-center text-xs text-muted-foreground">
</div>
)}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -166,7 +177,7 @@ export default function StudentDashboard() {
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie <Pie
data={errorPieChartData} data={normalizedErrorPieChartData}
cx="50%" cx="50%"
cy="50%" cy="50%"
innerRadius={60} innerRadius={60}
@ -175,14 +186,18 @@ export default function StudentDashboard() {
paddingAngle={5} paddingAngle={5}
dataKey="value" dataKey="value"
> >
{errorPieChartData.map( {normalizedErrorPieChartData.map(
( (
entry: { name: string; value: number }, entry: { name: string; value: number },
index: number index: number
) => ( ) => (
<Cell <Cell
key={`cell-${index}`} key={`cell-${index}`}
fill={COLORS[index % COLORS.length]} fill={
hasErrorChartData
? COLORS[index % COLORS.length]
: EMPTY_CHART_COLOR
}
/> />
) )
)} )}
@ -190,6 +205,11 @@ export default function StudentDashboard() {
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
{!hasErrorChartData && (
<div className="text-center text-xs text-muted-foreground">
</div>
)}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>