Matt
f200eda692
All checks were successful
Build and Push Docker Image / build (push) Successful in 11m15s
Chart: fixed bars not rendering by using explicit h-[160px] + min-h-0 on the bar container so percentage-based heights resolve correctly. Script: one-off backfill copies the custom "Move to the Next Stage?" boolean criterion value into binaryDecision for evaluations where it's null. Run: npx tsx scripts/backfill-binary-decision.ts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
import { trpc } from '@/lib/trpc/client'
|
|
import { cn } from '@/lib/utils'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
export type ScoreDistributionProps = {
|
|
roundId: string
|
|
}
|
|
|
|
export function ScoreDistribution({ roundId }: ScoreDistributionProps) {
|
|
const { data: dist, isLoading } = trpc.analytics.getRoundScoreDistribution.useQuery(
|
|
{ roundId },
|
|
{ refetchInterval: 15_000 },
|
|
)
|
|
|
|
const maxCount = useMemo(() =>
|
|
dist ? Math.max(...dist.globalDistribution.map((b) => b.count), 1) : 1,
|
|
[dist])
|
|
|
|
return (
|
|
<Card className="flex flex-col">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Score Distribution</CardTitle>
|
|
<CardDescription>
|
|
{dist ? `${dist.totalEvaluations} evaluations \u2014 avg ${dist.averageGlobalScore.toFixed(1)}` : 'Loading...'}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col flex-1 pb-4">
|
|
{isLoading ? (
|
|
<div className="flex items-end gap-1 flex-1 min-h-[120px]">
|
|
{Array.from({ length: 10 }).map((_, i) => <Skeleton key={i} className="flex-1 h-full" />)}
|
|
</div>
|
|
) : !dist || dist.totalEvaluations === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-6">
|
|
No evaluations submitted yet
|
|
</p>
|
|
) : (
|
|
<div className="flex gap-1 h-[160px]">
|
|
{dist.globalDistribution.map((bucket) => {
|
|
const heightPct = (bucket.count / maxCount) * 100
|
|
return (
|
|
<div key={bucket.score} className="flex-1 flex flex-col items-center gap-1">
|
|
<span className="text-[9px] text-muted-foreground">{bucket.count || ''}</span>
|
|
<div className="w-full flex-1 relative min-h-0">
|
|
<div className={cn(
|
|
'absolute inset-x-0 bottom-0 rounded-t transition-all',
|
|
bucket.score <= 3 ? 'bg-red-400' :
|
|
bucket.score <= 6 ? 'bg-amber-400' :
|
|
'bg-emerald-400',
|
|
)} style={{ height: `${Math.max(heightPct, 4)}%` }} />
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground">{bucket.score}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|