Fix observer reports: charts, filtering, project preview, dashboard stats
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m32s
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m32s
- Rewrite diversity metrics: horizontal bar charts for ocean issues and geographic distribution (replaces unreadable vertical/donut charts) - Rewrite juror score heatmap: expandable table with score distribution - Rewrite juror consistency: horizontal bar visual with juror names - Merge filtering tabs into single screening view with per-project AI reasoning and expandable rows - Add project preview dialog for juror performance table - Fix status breakdown for evaluation rounds (Fully/Partially/Not Reviewed) - Show active round name instead of count on observer dashboard - Move Global tab to last position, default to first round-specific tab - Add 4-card stats layout for evaluation with reviews/project ratio - Fix oceanIssue field (singular) and remove non-existent aiSummary Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
'use client'
|
||||
|
||||
import { DonutChart, BarChart } from '@tremor/react'
|
||||
import { BarChart } from '@tremor/react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { TREMOR_CHART_COLORS } from './chart-theme'
|
||||
|
||||
interface DiversityData {
|
||||
total: number
|
||||
@@ -48,76 +47,69 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
|
||||
)
|
||||
}
|
||||
|
||||
// Top countries for donut chart (max 10, others grouped)
|
||||
const topCountries = (data.byCountry || []).slice(0, 10)
|
||||
const otherCountries = (data.byCountry || []).slice(10)
|
||||
const countryData = otherCountries.length > 0
|
||||
? [...topCountries, {
|
||||
country: 'Others',
|
||||
count: otherCountries.reduce((sum, c) => sum + c.count, 0),
|
||||
percentage: otherCountries.reduce((sum, c) => sum + c.percentage, 0),
|
||||
}]
|
||||
: topCountries
|
||||
|
||||
const donutData = countryData.map((c) => ({
|
||||
name: getCountryName(c.country),
|
||||
value: c.count,
|
||||
// Top countries — horizontal bar chart for readability
|
||||
const countryBarData = (data.byCountry || []).slice(0, 15).map((c) => ({
|
||||
country: getCountryName(c.country),
|
||||
Projects: c.count,
|
||||
}))
|
||||
|
||||
const categoryData = (data.byCategory || []).slice(0, 10).map((c) => ({
|
||||
category: formatLabel(c.category),
|
||||
Count: c.count,
|
||||
Projects: c.count,
|
||||
}))
|
||||
|
||||
const oceanIssueData = (data.byOceanIssue || []).slice(0, 15).map((o) => ({
|
||||
issue: formatLabel(o.issue),
|
||||
Count: o.count,
|
||||
Projects: o.count,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Summary */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Summary stats row */}
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{data.total}</div>
|
||||
<p className="text-sm text-muted-foreground">Total Projects</p>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-2xl font-bold tabular-nums">{data.total}</p>
|
||||
<p className="text-xs text-muted-foreground">Total Projects</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{(data.byCountry || []).length}</div>
|
||||
<p className="text-sm text-muted-foreground">Countries Represented</p>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-2xl font-bold tabular-nums">{(data.byCountry || []).length}</p>
|
||||
<p className="text-xs text-muted-foreground">Countries</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{(data.byCategory || []).length}</div>
|
||||
<p className="text-sm text-muted-foreground">Categories</p>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-2xl font-bold tabular-nums">{(data.byCategory || []).length}</p>
|
||||
<p className="text-xs text-muted-foreground">Categories</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{(data.byTag || []).length}</div>
|
||||
<p className="text-sm text-muted-foreground">Unique Tags</p>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-2xl font-bold tabular-nums">{(data.byOceanIssue || []).length}</p>
|
||||
<p className="text-xs text-muted-foreground">Ocean Issues</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Country Distribution */}
|
||||
{/* Country Distribution — horizontal bars */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Geographic Distribution</CardTitle>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Geographic Distribution</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{donutData.length > 0 ? (
|
||||
<DonutChart
|
||||
data={donutData}
|
||||
category="value"
|
||||
index="name"
|
||||
colors={[...TREMOR_CHART_COLORS]}
|
||||
className="h-[400px]"
|
||||
{countryBarData.length > 0 ? (
|
||||
<BarChart
|
||||
data={countryBarData}
|
||||
index="country"
|
||||
categories={['Projects']}
|
||||
colors={['cyan']}
|
||||
showLegend={false}
|
||||
layout="horizontal"
|
||||
yAxisWidth={120}
|
||||
className="h-[360px]"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-muted-foreground text-center py-8">No geographic data</p>
|
||||
@@ -125,23 +117,47 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Category Distribution */}
|
||||
{/* Competition Categories — horizontal bars */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Competition Categories</CardTitle>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Competition Categories</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{categoryData.length > 0 ? (
|
||||
<BarChart
|
||||
data={categoryData}
|
||||
index="category"
|
||||
categories={['Count']}
|
||||
colors={['indigo']}
|
||||
layout="horizontal"
|
||||
yAxisWidth={120}
|
||||
showLegend={false}
|
||||
className="h-[400px]"
|
||||
/>
|
||||
categoryData.length <= 4 ? (
|
||||
/* Clean stacked bars for few categories */
|
||||
<div className="space-y-4 pt-2">
|
||||
{categoryData.map((c) => {
|
||||
const maxCount = Math.max(...categoryData.map((d) => d.Projects))
|
||||
const pct = maxCount > 0 ? (c.Projects / maxCount) * 100 : 0
|
||||
return (
|
||||
<div key={c.category} className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium">{c.category}</span>
|
||||
<span className="tabular-nums text-muted-foreground">{c.Projects}</span>
|
||||
</div>
|
||||
<div className="h-3 w-full rounded-full bg-muted overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-[#053d57] transition-all duration-500"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<BarChart
|
||||
data={categoryData}
|
||||
index="category"
|
||||
categories={['Projects']}
|
||||
colors={['indigo']}
|
||||
layout="horizontal"
|
||||
yAxisWidth={140}
|
||||
showLegend={false}
|
||||
className="h-[280px]"
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<p className="text-muted-foreground text-center py-8">No category data</p>
|
||||
)}
|
||||
@@ -149,45 +165,43 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Ocean Issues */}
|
||||
{/* Ocean Issues — horizontal bars for readability */}
|
||||
{oceanIssueData.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ocean Issues Addressed</CardTitle>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Ocean Issues Addressed</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={oceanIssueData}
|
||||
index="issue"
|
||||
categories={['Count']}
|
||||
categories={['Projects']}
|
||||
colors={['blue']}
|
||||
showLegend={false}
|
||||
yAxisWidth={40}
|
||||
layout="horizontal"
|
||||
yAxisWidth={200}
|
||||
className="h-[400px]"
|
||||
rotateLabelX={{ angle: -35, xAxisHeight: 80 }}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Tags Cloud */}
|
||||
{/* Tags — clean pill cloud */}
|
||||
{(data.byTag || []).length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Project Tags</CardTitle>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Project Tags</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(data.byTag || []).slice(0, 30).map((tag) => (
|
||||
<Badge
|
||||
key={tag.tag}
|
||||
variant="secondary"
|
||||
className="text-sm"
|
||||
style={{
|
||||
fontSize: `${Math.max(0.75, Math.min(1.4, 0.75 + tag.percentage / 20))}rem`,
|
||||
}}
|
||||
variant="outline"
|
||||
className="px-3 py-1 text-sm font-normal"
|
||||
>
|
||||
{tag.tag} ({tag.count})
|
||||
{tag.tag}
|
||||
<span className="ml-1.5 text-muted-foreground tabular-nums">({tag.count})</span>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user