60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import {
|
|
CartesianGrid,
|
|
Legend,
|
|
Line,
|
|
LineChart,
|
|
ResponsiveContainer,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import { useGrades, type User } from "~/lib/api";
|
|
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../ui/chart";
|
|
import { chartConfig, gradesTrendData } from "./inde";
|
|
|
|
export default function GradesPage({ user }: { user: User }) {
|
|
// TODO: Error handling, loading state
|
|
const { grades, subjects, isLoading, isError } = useGrades("YEAR")
|
|
|
|
return (
|
|
<div>
|
|
{/* Tabs */}
|
|
|
|
{/* 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">
|
|
performance across subjects
|
|
</p>
|
|
</div>
|
|
</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={grades}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="period" />
|
|
{/* TODO: Custom domain */}
|
|
<YAxis domain={[0, 20]} />
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Legend />
|
|
{subjects.map((subject, index) => (
|
|
<Line
|
|
key={index}
|
|
type="monotone"
|
|
dataKey={subject}
|
|
name={subject}
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|