File size: 6,385 Bytes
b87cbc7 | 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
import { formatTime } from "@/lib/time";
import { formatLabel } from "@/lib/format";
interface SectionTimeItem {
sectionTypeName: string;
avgTimeSpentSec: number;
totalTimeSpentSec: number;
}
interface FormatTimeItem {
format: string;
avgTimeSpentSec: number;
totalTimeSpentSec: number;
}
interface TimeTrendItem {
date: string;
avgTimeSpentSec: number;
}
interface TimeAnalyticsPanelProps {
sectionTime: SectionTimeItem[] | undefined;
formatTimeData: FormatTimeItem[] | undefined;
timeTrend: TimeTrendItem[] | undefined;
}
export function TimeAnalyticsPanel({ sectionTime, formatTimeData, timeTrend }: TimeAnalyticsPanelProps) {
return (
<div className="space-y-6">
<Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
<CardHeader>
<CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
Waktu per Section
</CardTitle>
</CardHeader>
<CardContent>
{sectionTime && sectionTime.length > 0 ? (
<div className="space-y-3">
{sectionTime.map((item) => (
<div key={item.sectionTypeName} className="flex items-center gap-4">
<div className="w-28 shrink-0 text-sm font-medium text-[var(--clay-black)]">
{item.sectionTypeName}
</div>
<div className="flex-1">
<div className="w-full h-2.5 bg-[var(--oat-light)] rounded-full overflow-hidden">
<div
className="h-full rounded-full bg-[var(--slushie-600)]"
style={{
width: `${Math.min(100, (item.avgTimeSpentSec / 300) * 100)}%`,
}}
/>
</div>
</div>
<div className="w-20 shrink-0 text-right text-sm text-[var(--warm-charcoal)]">
{formatTime(item.avgTimeSpentSec)}
</div>
</div>
))}
</div>
) : (
<div className="h-20 flex items-center justify-center text-[var(--warm-charcoal)]">
Belum ada data.
</div>
)}
</CardContent>
</Card>
<Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
<CardHeader>
<CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
Waktu per Format Soal
</CardTitle>
</CardHeader>
<CardContent>
{formatTimeData && formatTimeData.length > 0 ? (
<div className="space-y-3">
{formatTimeData.map((item) => (
<div key={item.format} className="flex items-center gap-4">
<div className="w-32 shrink-0 text-sm font-medium text-[var(--clay-black)] truncate">
{formatLabel(item.format)}
</div>
<div className="flex-1">
<div className="w-full h-2.5 bg-[var(--oat-light)] rounded-full overflow-hidden">
<div
className="h-full rounded-full bg-[var(--ube-600)]"
style={{
width: `${Math.min(100, (item.avgTimeSpentSec / 120) * 100)}%`,
}}
/>
</div>
</div>
<div className="w-20 shrink-0 text-right text-sm text-[var(--warm-charcoal)]">
{formatTime(item.avgTimeSpentSec)}
</div>
</div>
))}
</div>
) : (
<div className="h-20 flex items-center justify-center text-[var(--warm-charcoal)]">
Belum ada data.
</div>
)}
</CardContent>
</Card>
<Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
<CardHeader>
<CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)]">
Tren Waktu per Hari
</CardTitle>
</CardHeader>
<CardContent>
{timeTrend && timeTrend.length > 0 ? (
<ResponsiveContainer width="100%" height={200}>
<BarChart data={timeTrend} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="var(--oat-border)" />
<XAxis
dataKey="date"
tickFormatter={(v: string) => {
const d = new Date(v);
return `${d.getDate()}/${d.getMonth() + 1}`;
}}
tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
axisLine={{ stroke: "var(--oat-border)" }}
tickLine={false}
/>
<YAxis
tick={{ fontSize: 12, fill: "var(--warm-charcoal)" }}
axisLine={false}
tickLine={false}
tickFormatter={(v: number) => `${Math.round(v / 60)}m`}
/>
<Tooltip
contentStyle={{
backgroundColor: "var(--pure-white)",
border: "2px solid var(--oat-border)",
borderRadius: "var(--radius-lg)",
fontSize: 13,
}}
formatter={(value: unknown, _name: unknown, _item: unknown, _index: unknown, _payload: unknown) => [formatTime(typeof value === "number" ? value : 0), "Rata-rata Waktu"]}
/>
<Bar dataKey="avgTimeSpentSec" fill="var(--slushie-600)" radius={[6, 6, 0, 0]} />
</BarChart>
</ResponsiveContainer>
) : (
<div className="h-48 flex items-center justify-center text-[var(--warm-charcoal)]">
Belum ada data.
</div>
)}
</CardContent>
</Card>
</div>
);
}
|