106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import { Button } from '../Button'
|
|
|
|
interface DataQualityPanelProps {
|
|
completenessRate: number
|
|
completeCount: number
|
|
incompleteCount: number
|
|
pendingCount: number
|
|
isLoading?: boolean
|
|
onViewIncomplete?: () => void
|
|
}
|
|
|
|
export const DataQualityPanel: React.FC<DataQualityPanelProps> = ({
|
|
completenessRate,
|
|
completeCount,
|
|
incompleteCount,
|
|
pendingCount,
|
|
isLoading = false,
|
|
onViewIncomplete,
|
|
}) => {
|
|
const radius = 54
|
|
const circumference = 2 * Math.PI * radius
|
|
const strokeDashoffset = circumference - (completenessRate / 100) * circumference
|
|
|
|
return (
|
|
<div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
|
|
<h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
|
|
Data Quality
|
|
</h2>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative">
|
|
<svg width="120" height="120" className="transform -rotate-90">
|
|
<circle
|
|
cx="60"
|
|
cy="60"
|
|
r={radius}
|
|
stroke="#E5E7EB"
|
|
strokeWidth="12"
|
|
fill="none"
|
|
/>
|
|
<circle
|
|
cx="60"
|
|
cy="60"
|
|
r={radius}
|
|
stroke="#22C55E"
|
|
strokeWidth="12"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={isLoading ? circumference : strokeDashoffset}
|
|
className="transition-all duration-500"
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-3xl font-bold text-warm-text-primary">
|
|
{isLoading ? '...' : `${Math.round(completenessRate)}%`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<p className="text-sm text-warm-text-secondary mb-4">
|
|
Annotation Complete
|
|
</p>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 bg-green-500 rounded-full" />
|
|
Complete
|
|
</span>
|
|
<span className="font-medium">{isLoading ? '...' : completeCount}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 bg-orange-500 rounded-full" />
|
|
Incomplete
|
|
</span>
|
|
<span className="font-medium">{isLoading ? '...' : incompleteCount}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full" />
|
|
Pending
|
|
</span>
|
|
<span className="font-medium">{isLoading ? '...' : pendingCount}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{onViewIncomplete && incompleteCount > 0 && (
|
|
<div className="mt-4 pt-4 border-t border-warm-border">
|
|
<button
|
|
onClick={onViewIncomplete}
|
|
className="text-sm text-blue-600 hover:text-blue-800 font-medium"
|
|
>
|
|
View Incomplete Docs
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|