103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import {
|
||
|
|
BarChart,
|
||
|
|
Bar,
|
||
|
|
XAxis,
|
||
|
|
YAxis,
|
||
|
|
CartesianGrid,
|
||
|
|
Tooltip,
|
||
|
|
Legend,
|
||
|
|
ResponsiveContainer,
|
||
|
|
} from 'recharts'
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
|
|
|
||
|
|
interface JurorWorkloadData {
|
||
|
|
id: string
|
||
|
|
name: string
|
||
|
|
assigned: number
|
||
|
|
completed: number
|
||
|
|
completionRate: number
|
||
|
|
}
|
||
|
|
|
||
|
|
interface JurorWorkloadProps {
|
||
|
|
data: JurorWorkloadData[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
|
||
|
|
// Truncate names for display
|
||
|
|
const formattedData = data.map((d) => ({
|
||
|
|
...d,
|
||
|
|
displayName: d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name,
|
||
|
|
}))
|
||
|
|
|
||
|
|
const totalAssigned = data.reduce((sum, d) => sum + d.assigned, 0)
|
||
|
|
const totalCompleted = data.reduce((sum, d) => sum + d.completed, 0)
|
||
|
|
const overallRate =
|
||
|
|
totalAssigned > 0 ? Math.round((totalCompleted / totalAssigned) * 100) : 0
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center justify-between">
|
||
|
|
<span>Juror Workload</span>
|
||
|
|
<span className="text-sm font-normal text-muted-foreground">
|
||
|
|
{overallRate}% overall completion
|
||
|
|
</span>
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="h-[400px]">
|
||
|
|
<ResponsiveContainer width="100%" height="100%">
|
||
|
|
<BarChart
|
||
|
|
data={formattedData}
|
||
|
|
layout="vertical"
|
||
|
|
margin={{ top: 20, right: 30, bottom: 20, left: 100 }}
|
||
|
|
>
|
||
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||
|
|
<XAxis type="number" />
|
||
|
|
<YAxis
|
||
|
|
dataKey="displayName"
|
||
|
|
type="category"
|
||
|
|
width={90}
|
||
|
|
tick={{ fontSize: 12 }}
|
||
|
|
/>
|
||
|
|
<Tooltip
|
||
|
|
contentStyle={{
|
||
|
|
backgroundColor: 'hsl(var(--card))',
|
||
|
|
border: '1px solid hsl(var(--border))',
|
||
|
|
borderRadius: '6px',
|
||
|
|
}}
|
||
|
|
formatter={(value: number | undefined, name: string | undefined) => [
|
||
|
|
value ?? 0,
|
||
|
|
(name ?? '') === 'assigned' ? 'Assigned' : 'Completed',
|
||
|
|
]}
|
||
|
|
labelFormatter={(_, payload) => {
|
||
|
|
if (payload && payload[0]) {
|
||
|
|
const item = payload[0].payload as JurorWorkloadData
|
||
|
|
return `${item.name} (${item.completionRate}% complete)`
|
||
|
|
}
|
||
|
|
return ''
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Legend />
|
||
|
|
<Bar
|
||
|
|
dataKey="assigned"
|
||
|
|
name="Assigned"
|
||
|
|
fill="#8884d8"
|
||
|
|
radius={[0, 4, 4, 0]}
|
||
|
|
/>
|
||
|
|
<Bar
|
||
|
|
dataKey="completed"
|
||
|
|
name="Completed"
|
||
|
|
fill="#82ca9d"
|
||
|
|
radius={[0, 4, 4, 0]}
|
||
|
|
/>
|
||
|
|
</BarChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|