Matt
9f7b76b3cb
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m55s
- Restructure dashboard: score distribution + recently reviewed stacked in left column, full-width map at bottom, activity feed in middle row - Show all jurors in scrollable workload list (not just top 5) - Filter recently reviewed to exclude rejected/not-reviewed projects - Filter transition audit logs from activity feed - Remove completion progress bar from stat tile for equal card heights - Fix all Tremor charts: switch hex colors to named palette (cyan/teal/emerald/amber/rose) to fix black bar rendering - Fix transparent chart tooltips with global CSS overrides - Remove tilted text labels from cross-round comparison charts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { BarChart } from '@tremor/react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
interface StageComparison {
|
|
roundId: string
|
|
roundName: string
|
|
projectCount: number
|
|
evaluationCount: number
|
|
completionRate: number
|
|
averageScore: number | null
|
|
scoreDistribution: { score: number; count: number }[]
|
|
}
|
|
|
|
interface CrossStageComparisonProps {
|
|
data: StageComparison[]
|
|
}
|
|
|
|
export function CrossStageComparisonChart({
|
|
data,
|
|
}: CrossStageComparisonProps) {
|
|
if (!data?.length) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center py-12">
|
|
<p className="text-muted-foreground">No comparison data available</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
const baseData = data.map((round) => ({
|
|
name: round.roundName,
|
|
Projects: round.projectCount,
|
|
Evaluations: round.evaluationCount,
|
|
'Completion Rate': round.completionRate,
|
|
'Avg Score': round.averageScore
|
|
? parseFloat(round.averageScore.toFixed(2))
|
|
: 0,
|
|
}))
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Round Metrics Comparison</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">Projects</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<BarChart
|
|
data={baseData}
|
|
index="name"
|
|
categories={['Projects']}
|
|
colors={['cyan']}
|
|
showLegend={false}
|
|
yAxisWidth={40}
|
|
className="h-[200px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">
|
|
Evaluations
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<BarChart
|
|
data={baseData}
|
|
index="name"
|
|
categories={['Evaluations']}
|
|
colors={['teal']}
|
|
showLegend={false}
|
|
yAxisWidth={40}
|
|
className="h-[200px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">
|
|
Completion Rate
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<BarChart
|
|
data={baseData}
|
|
index="name"
|
|
categories={['Completion Rate']}
|
|
colors={['emerald']}
|
|
showLegend={false}
|
|
maxValue={100}
|
|
yAxisWidth={40}
|
|
valueFormatter={(v) => `${v}%`}
|
|
className="h-[200px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">
|
|
Average Score
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<BarChart
|
|
data={baseData}
|
|
index="name"
|
|
categories={['Avg Score']}
|
|
colors={['amber']}
|
|
showLegend={false}
|
|
maxValue={10}
|
|
yAxisWidth={40}
|
|
className="h-[200px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|