118 lines
6.3 KiB
TypeScript
118 lines
6.3 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
|
|
interface DetectionChartProps {
|
|
potholes: number
|
|
signboards: number
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export function DetectionChart({ potholes, signboards, isLoading }: DetectionChartProps) {
|
|
const total = potholes + signboards
|
|
const potholePercent = total > 0 ? (potholes / total) * 100 : 50
|
|
const signboardPercent = total > 0 ? (signboards / total) * 100 : 50
|
|
|
|
return (
|
|
<Card className="glass-card card-glow border-0 overflow-hidden">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg font-semibold">Detection Distribution</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center h-48">
|
|
<div className="w-32 h-32 rounded-full bg-primary/10 animate-pulse" />
|
|
</div>
|
|
) : total === 0 ? (
|
|
<div className="flex items-center justify-center h-48 text-muted-foreground">
|
|
No detections yet
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-6">
|
|
{/* Donut Chart */}
|
|
<div className="relative w-36 h-36 flex-shrink-0">
|
|
<svg viewBox="0 0 100 100" className="w-full h-full transform -rotate-90">
|
|
{/* Background circle */}
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="40"
|
|
fill="none"
|
|
stroke="hsl(var(--muted))"
|
|
strokeWidth="16"
|
|
opacity="0.2"
|
|
/>
|
|
{/* Potholes arc */}
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="40"
|
|
fill="none"
|
|
stroke="url(#potholeGradient)"
|
|
strokeWidth="16"
|
|
strokeDasharray={`${potholePercent * 2.51} 251`}
|
|
strokeLinecap="round"
|
|
className="transition-all duration-700"
|
|
/>
|
|
{/* Signboards arc */}
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="40"
|
|
fill="none"
|
|
stroke="url(#signboardGradient)"
|
|
strokeWidth="16"
|
|
strokeDasharray={`${signboardPercent * 2.51} 251`}
|
|
strokeDashoffset={`-${potholePercent * 2.51}`}
|
|
strokeLinecap="round"
|
|
className="transition-all duration-700"
|
|
/>
|
|
<defs>
|
|
<linearGradient id="potholeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="#f97316" />
|
|
<stop offset="100%" stopColor="#ea580c" />
|
|
</linearGradient>
|
|
<linearGradient id="signboardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="#06b6d4" />
|
|
<stop offset="100%" stopColor="#0891b2" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-foreground">{total}</p>
|
|
<p className="text-[10px] text-muted-foreground uppercase">Total</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex flex-col gap-3 flex-1">
|
|
<div className="flex items-center justify-between p-3 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-600" />
|
|
<span className="text-sm font-medium">Potholes</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-bold text-foreground">{potholes}</p>
|
|
<p className="text-xs text-muted-foreground">{potholePercent.toFixed(0)}%</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-cyan-500 to-cyan-600" />
|
|
<span className="text-sm font-medium">Signboards</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-bold text-foreground">{signboards}</p>
|
|
<p className="text-xs text-muted-foreground">{signboardPercent.toFixed(0)}%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|