154 lines
5.0 KiB
TypeScript
154 lines
5.0 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from 'recharts'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
interface RoundComparison {
|
|
roundId: string
|
|
roundName: string
|
|
projectCount: number
|
|
evaluationCount: number
|
|
completionRate: number
|
|
averageScore: number | null
|
|
scoreDistribution: { score: number; count: number }[]
|
|
}
|
|
|
|
interface CrossRoundComparisonProps {
|
|
data: RoundComparison[]
|
|
}
|
|
|
|
const ROUND_COLORS = ['#053d57', '#de0f1e', '#557f8c', '#f38a52', '#6ad82f']
|
|
|
|
export function CrossRoundComparisonChart({ data }: CrossRoundComparisonProps) {
|
|
// Prepare comparison data
|
|
const comparisonData = data.map((round, i) => ({
|
|
name: round.roundName.length > 20 ? round.roundName.slice(0, 20) + '...' : round.roundName,
|
|
projects: round.projectCount,
|
|
evaluations: round.evaluationCount,
|
|
completionRate: round.completionRate,
|
|
avgScore: round.averageScore ? parseFloat(round.averageScore.toFixed(2)) : 0,
|
|
color: ROUND_COLORS[i % ROUND_COLORS.length],
|
|
}))
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Metrics Comparison */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Round Metrics Comparison</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[350px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={comparisonData}
|
|
margin={{ top: 20, right: 30, bottom: 60, left: 20 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="name"
|
|
angle={-25}
|
|
textAnchor="end"
|
|
height={60}
|
|
tick={{ fontSize: 12 }}
|
|
/>
|
|
<YAxis />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--card))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '6px',
|
|
}}
|
|
/>
|
|
<Legend />
|
|
<Bar dataKey="projects" name="Projects" fill="#053d57" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="evaluations" name="Evaluations" fill="#557f8c" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Completion & Score Comparison */}
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Completion Rate by Round</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[300px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={comparisonData}
|
|
margin={{ top: 20, right: 20, bottom: 60, left: 20 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="name"
|
|
angle={-25}
|
|
textAnchor="end"
|
|
height={60}
|
|
tick={{ fontSize: 12 }}
|
|
/>
|
|
<YAxis domain={[0, 100]} unit="%" />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--card))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '6px',
|
|
}}
|
|
/>
|
|
<Bar dataKey="completionRate" name="Completion %" fill="#6ad82f" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Average Score by Round</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[300px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={comparisonData}
|
|
margin={{ top: 20, right: 20, bottom: 60, left: 20 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="name"
|
|
angle={-25}
|
|
textAnchor="end"
|
|
height={60}
|
|
tick={{ fontSize: 12 }}
|
|
/>
|
|
<YAxis domain={[0, 10]} />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--card))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '6px',
|
|
}}
|
|
/>
|
|
<Bar dataKey="avgScore" name="Avg Score" fill="#de0f1e" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|