729 lines
23 KiB
TypeScript
729 lines
23 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import {
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "~/components/ui/chart";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
BarChart,
|
|
Bar,
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
AreaChart,
|
|
Area,
|
|
RadarChart,
|
|
PolarGrid,
|
|
PolarAngleAxis,
|
|
PolarRadiusAxis,
|
|
Radar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
Tooltip,
|
|
ReferenceLine,
|
|
} from "recharts";
|
|
import {
|
|
Maximize2,
|
|
X,
|
|
TrendingUp,
|
|
Award,
|
|
BookOpen,
|
|
Target,
|
|
} from "lucide-react";
|
|
|
|
export const gradesTrendData = {
|
|
"This Month": [
|
|
{
|
|
period: "Week 1",
|
|
math: 89,
|
|
science: 88,
|
|
english: 96,
|
|
history: 92,
|
|
average: 91.25,
|
|
},
|
|
{
|
|
period: "Week 2",
|
|
math: 91,
|
|
science: 89,
|
|
english: 97,
|
|
history: 93,
|
|
average: 92.5,
|
|
},
|
|
{
|
|
period: "Week 3",
|
|
math: 94,
|
|
science: 91,
|
|
english: 93,
|
|
history: 95,
|
|
average: 93.25,
|
|
},
|
|
{
|
|
period: "Week 4",
|
|
math: 92,
|
|
science: 90,
|
|
english: 98,
|
|
history: 94,
|
|
average: 93.5,
|
|
},
|
|
],
|
|
"3 Months": [
|
|
{
|
|
period: "Dec",
|
|
math: 89,
|
|
science: 88,
|
|
english: 96,
|
|
history: 92,
|
|
average: 91.25,
|
|
},
|
|
{
|
|
period: "Jan",
|
|
math: 94,
|
|
science: 91,
|
|
english: 93,
|
|
history: 95,
|
|
average: 93.25,
|
|
},
|
|
{
|
|
period: "Feb",
|
|
math: 91,
|
|
science: 89,
|
|
english: 97,
|
|
history: 93,
|
|
average: 92.5,
|
|
},
|
|
],
|
|
"Whole Year": [
|
|
{
|
|
period: "Sep",
|
|
math: 85,
|
|
science: 78,
|
|
english: 92,
|
|
history: 88,
|
|
average: 85.75,
|
|
},
|
|
{
|
|
period: "Oct",
|
|
math: 88,
|
|
science: 82,
|
|
english: 89,
|
|
history: 91,
|
|
average: 87.5,
|
|
},
|
|
{
|
|
period: "Nov",
|
|
math: 92,
|
|
science: 85,
|
|
english: 94,
|
|
history: 89,
|
|
average: 90,
|
|
},
|
|
{
|
|
period: "Dec",
|
|
math: 89,
|
|
science: 88,
|
|
english: 96,
|
|
history: 92,
|
|
average: 91.25,
|
|
},
|
|
{
|
|
period: "Jan",
|
|
math: 94,
|
|
science: 91,
|
|
english: 93,
|
|
history: 95,
|
|
average: 93.25,
|
|
},
|
|
{
|
|
period: "Feb",
|
|
math: 91,
|
|
science: 89,
|
|
english: 97,
|
|
history: 93,
|
|
average: 92.5,
|
|
},
|
|
],
|
|
};
|
|
|
|
const subjectPerformanceData = {
|
|
"This Month": [
|
|
{ subject: "Mathematics", grade: 94, target: 90, credits: 4 },
|
|
{ subject: "Science", grade: 91, target: 85, credits: 4 },
|
|
{ subject: "English", grade: 98, target: 92, credits: 3 },
|
|
{ subject: "History", grade: 95, target: 88, credits: 3 },
|
|
{ subject: "Art", grade: 96, target: 90, credits: 2 },
|
|
{ subject: "PE", grade: 90, target: 85, credits: 1 },
|
|
],
|
|
"3 Months": [
|
|
{ subject: "Mathematics", grade: 92, target: 90, credits: 4 },
|
|
{ subject: "Science", grade: 90, target: 85, credits: 4 },
|
|
{ subject: "English", grade: 96, target: 92, credits: 3 },
|
|
{ subject: "History", grade: 93, target: 88, credits: 3 },
|
|
{ subject: "Art", grade: 95, target: 90, credits: 2 },
|
|
{ subject: "PE", grade: 89, target: 85, credits: 1 },
|
|
],
|
|
"Whole Year": [
|
|
{ subject: "Mathematics", grade: 91, target: 90, credits: 4 },
|
|
{ subject: "Science", grade: 89, target: 85, credits: 4 },
|
|
{ subject: "English", grade: 97, target: 92, credits: 3 },
|
|
{ subject: "History", grade: 93, target: 88, credits: 3 },
|
|
{ subject: "Art", grade: 95, target: 90, credits: 2 },
|
|
{ subject: "PE", grade: 88, target: 85, credits: 1 },
|
|
],
|
|
};
|
|
|
|
const gradeDistributionData = {
|
|
"This Month": [
|
|
{ grade: "A+", count: 12, percentage: 35 },
|
|
{ grade: "A", count: 15, percentage: 44 },
|
|
{ grade: "A-", count: 5, percentage: 15 },
|
|
{ grade: "B+", count: 2, percentage: 6 },
|
|
{ grade: "B", count: 0, percentage: 0 },
|
|
],
|
|
"3 Months": [
|
|
{ grade: "A+", count: 10, percentage: 30 },
|
|
{ grade: "A", count: 14, percentage: 42 },
|
|
{ grade: "A-", count: 6, percentage: 18 },
|
|
{ grade: "B+", count: 3, percentage: 9 },
|
|
{ grade: "B", count: 1, percentage: 3 },
|
|
],
|
|
"Whole Year": [
|
|
{ grade: "A+", count: 8, percentage: 25 },
|
|
{ grade: "A", count: 12, percentage: 37.5 },
|
|
{ grade: "A-", count: 6, percentage: 18.75 },
|
|
{ grade: "B+", count: 4, percentage: 12.5 },
|
|
{ grade: "B", count: 2, percentage: 6.25 },
|
|
],
|
|
};
|
|
|
|
const skillsRadar = [
|
|
{ skill: "Problem Solving", score: 92 },
|
|
{ skill: "Critical Thinking", score: 88 },
|
|
{ skill: "Communication", score: 95 },
|
|
{ skill: "Creativity", score: 87 },
|
|
{ skill: "Collaboration", score: 91 },
|
|
{ skill: "Leadership", score: 85 },
|
|
];
|
|
|
|
const COLORS = [
|
|
"#8884d8",
|
|
"#82ca9d",
|
|
"#ffc658",
|
|
"#ff7300",
|
|
"#00ff00",
|
|
"#ff00ff",
|
|
];
|
|
export const chartConfig = {
|
|
math: { label: "Mathematics", color: "hsl(var(--chart-1))" },
|
|
science: { label: "Science", color: "hsl(var(--chart-2))" },
|
|
english: { label: "English", color: "hsl(var(--chart-3))" },
|
|
history: { label: "History", color: "hsl(var(--chart-4))" },
|
|
average: { label: "Average", color: "hsl(var(--chart-5))" },
|
|
};
|
|
export default function SchoolStatsPage() {
|
|
const [fullscreenChart, setFullscreenChart] = useState<string | null>(null);
|
|
const [selectedPeriod, setSelectedPeriod] = useState<
|
|
"This Month" | "3 Months" | "Whole Year"
|
|
>("3 Months");
|
|
|
|
const gradesTrend = gradesTrendData[selectedPeriod];
|
|
const subjectPerformance = subjectPerformanceData[selectedPeriod];
|
|
const gradeDistribution = gradeDistributionData[selectedPeriod];
|
|
|
|
|
|
|
|
const FullscreenModal = ({
|
|
chartId,
|
|
title,
|
|
children,
|
|
}: {
|
|
chartId: string;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}) => {
|
|
if (fullscreenChart !== chartId) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-2">
|
|
<div
|
|
className="bg-background rounded-lg w-full h-full flex flex-col
|
|
w-[100vh] h-[100vw] rotate-90 origin-center"
|
|
>
|
|
<div className="flex items-center justify-between p-3 border-b shrink-0">
|
|
<h2 className="text-lg md:text-xl lg:text-2xl font-bold rotate-0">
|
|
{title}
|
|
</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setFullscreenChart(null)}
|
|
className="rotate-0"
|
|
>
|
|
<X className="h-5 w-5 md:h-6 md:w-6" />
|
|
</Button>
|
|
</div>
|
|
<div className="p-3 md:p-4">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const currentGPA = 3.7;
|
|
const totalCredits = 17;
|
|
const completedAssignments = 156;
|
|
const upcomingTests = 3;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<div className="w-full max-w-7xl mx-auto px-4 py-6 space-y-8">
|
|
{/* Header */}
|
|
<div className="text-center space-y-3">
|
|
<h1 className="text-2xl md:text-4xl font-bold">Academic Dashboard</h1>
|
|
<p className="text-sm md:text-base text-muted-foreground">
|
|
Track your grades and progress
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
<div className="bg-muted/50 rounded-lg p-1 flex gap-1">
|
|
{(["This Month", "3 Months", "Whole Year"] as const).map(
|
|
(period) => (
|
|
<Button
|
|
key={period}
|
|
variant={selectedPeriod === period ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => setSelectedPeriod(period)}
|
|
className="text-xs md:text-sm"
|
|
>
|
|
{period}
|
|
</Button>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Stats - Mobile First Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="bg-muted/50 rounded-lg p-4 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Current GPA
|
|
</span>
|
|
<Award className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold">{currentGPA}</div>
|
|
</div>
|
|
|
|
<div className="bg-muted/50 rounded-lg p-4 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Credits
|
|
</span>
|
|
<BookOpen className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold">{totalCredits}</div>
|
|
<p className="text-xs text-muted-foreground">This semester</p>
|
|
</div>
|
|
|
|
<div className="bg-muted/50 rounded-lg p-4 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Assignments
|
|
</span>
|
|
<Target className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold">
|
|
{completedAssignments}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">Completed</p>
|
|
</div>
|
|
|
|
<div className="bg-muted/50 rounded-lg p-4 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Tests
|
|
</span>
|
|
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold">{upcomingTests}</div>
|
|
<p className="text-xs text-muted-foreground">Upcoming</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Charts - Mobile First Layout */}
|
|
<div className="space-y-8">
|
|
{/* Grade Trends */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg md:text-xl font-semibold">
|
|
Grade Trends
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
{selectedPeriod === "This Month"
|
|
? "Weekly"
|
|
: selectedPeriod === "3 Months"
|
|
? "Monthly"
|
|
: "Monthly"}{" "}
|
|
performance across subjects
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setFullscreenChart("trends")}
|
|
>
|
|
<Maximize2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="bg-muted/30 rounded-lg">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="h-full w-full -ml-6"
|
|
>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={gradesTrend}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="period" />
|
|
<YAxis domain={[70, 100]} />
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Legend />
|
|
<Line type="monotone" dataKey="math" stroke="blue" />
|
|
<Area
|
|
type="monotone"
|
|
dataKey="science"
|
|
stackId="2"
|
|
stroke="var(--color-science)"
|
|
fill="var(--color-science)"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="english"
|
|
stackId="3"
|
|
stroke="var(--color-english)"
|
|
fill="var(--color-english)"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="history"
|
|
stackId="4"
|
|
stroke="var(--color-history)"
|
|
fill="var(--color-history)"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="average"
|
|
stroke="var(--color-average)"
|
|
strokeWidth={4}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subject Performance */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg md:text-xl font-semibold">
|
|
Subject Performance
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Current grades vs targets
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setFullscreenChart("performance")}
|
|
>
|
|
<Maximize2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="bg-muted/30 rounded-lg p-4">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="h-[250px] md:h-[300px] w-full"
|
|
>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={subjectPerformance}
|
|
layout="horizontal"
|
|
margin={{ top: 5, right: 10, left: 60, bottom: 5 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis type="number" domain={[0, 100]} />
|
|
<YAxis dataKey="subject" type="category" width={50} />
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Legend />
|
|
<Bar
|
|
dataKey="grade"
|
|
fill="hsl(var(--chart-1))"
|
|
name="Current"
|
|
/>
|
|
<Bar
|
|
dataKey="target"
|
|
fill="hsl(var(--chart-2))"
|
|
name="Target"
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grade Distribution & Skills - Side by Side on Desktop */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{/* Grade Distribution */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg md:text-xl font-semibold">
|
|
Grade Distribution
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Breakdown of all grades
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setFullscreenChart("distribution")}
|
|
>
|
|
<Maximize2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="bg-muted/30 rounded-lg p-4">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="h-[250px] md:h-[300px] w-full"
|
|
>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
|
|
<Pie
|
|
data={gradeDistribution}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ grade, percentage }) =>
|
|
`${grade} (${percentage}%)`
|
|
}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="count"
|
|
>
|
|
{gradeDistribution.map((entry, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={COLORS[index % COLORS.length]}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Skills Assessment */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg md:text-xl font-semibold">
|
|
Skills Assessment
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Competency across key areas
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setFullscreenChart("skills")}
|
|
>
|
|
<Maximize2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="bg-muted/30 rounded-lg p-4">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="h-[250px] md:h-[300px] w-full"
|
|
>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RadarChart
|
|
data={skillsRadar}
|
|
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
|
|
>
|
|
<PolarGrid />
|
|
<PolarAngleAxis dataKey="skill" />
|
|
<PolarRadiusAxis angle={90} domain={[0, 100]} />
|
|
<Radar
|
|
name="Skills"
|
|
dataKey="score"
|
|
stroke="hsl(var(--chart-1))"
|
|
fill="hsl(var(--chart-1))"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Fullscreen Modals */}
|
|
<FullscreenModal
|
|
chartId="trends"
|
|
title={`Grade Trends - ${selectedPeriod}`}
|
|
>
|
|
<ChartContainer config={chartConfig} className="h-full w-full z-100 ">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={gradesTrend}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="period" />
|
|
<YAxis domain={[70, 100]} />
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Legend />
|
|
<Area
|
|
type="monotone"
|
|
dataKey="math"
|
|
stackId="1"
|
|
stroke="blue"
|
|
fill="blue"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="science"
|
|
stackId="2"
|
|
stroke="var(--color-science)"
|
|
fill="var(--color-science)"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="english"
|
|
stackId="3"
|
|
stroke="var(--color-english)"
|
|
fill="var(--color-english)"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="history"
|
|
stackId="4"
|
|
stroke="var(--color-history)"
|
|
fill="var(--color-history)"
|
|
fillOpacity={0.3}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="average"
|
|
stroke="var(--color-average)"
|
|
strokeWidth={4}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</FullscreenModal>
|
|
|
|
<FullscreenModal
|
|
chartId="performance"
|
|
title={`Subject Performance - ${selectedPeriod}`}
|
|
>
|
|
<ChartContainer config={chartConfig} className="h-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={subjectPerformance}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="subject" />
|
|
<YAxis domain={[0, 100]} />
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Legend />
|
|
<Bar
|
|
dataKey="grade"
|
|
fill="hsl(var(--chart-1))"
|
|
name="Current Grade"
|
|
/>
|
|
<Bar
|
|
dataKey="target"
|
|
fill="hsl(var(--chart-2))"
|
|
name="Target Grade"
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</FullscreenModal>
|
|
|
|
<FullscreenModal
|
|
chartId="distribution"
|
|
title={`Grade Distribution - ${selectedPeriod}`}
|
|
>
|
|
<ChartContainer config={chartConfig} className="h-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={gradeDistribution}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ grade, percentage }) => `${grade} (${percentage}%)`}
|
|
outerRadius={200}
|
|
fill="#8884d8"
|
|
dataKey="count"
|
|
>
|
|
{gradeDistribution.map((entry, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={COLORS[index % COLORS.length]}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</FullscreenModal>
|
|
|
|
<FullscreenModal
|
|
chartId="skills"
|
|
title="Skills Assessment - Fullscreen"
|
|
>
|
|
<ChartContainer config={chartConfig} className="h-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RadarChart data={skillsRadar}>
|
|
<PolarGrid />
|
|
<PolarAngleAxis dataKey="skill" />
|
|
<PolarRadiusAxis angle={90} domain={[0, 100]} />
|
|
<Radar
|
|
name="Skills"
|
|
dataKey="score"
|
|
stroke="hsl(var(--chart-1))"
|
|
fill="hsl(var(--chart-1))"
|
|
fillOpacity={0.3}
|
|
strokeWidth={3}
|
|
/>
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</FullscreenModal>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|