MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Observer platform redesign Phase 4: migrate charts to Tremor, redesign all pages
Some checks failed
Build and Push Docker Image / build (push) Failing after 23s
Details

Browse Source 
- Migrate 9 chart components from Nivo to @tremor/react (BarChart, AreaChart, DonutChart, ScatterChart)
- Remove @nivo/*, @react-spring/web dependencies (45 packages removed)
- Redesign dashboard: 6 stat tiles, competition pipeline, score distribution, juror workload, activity feed
- Add new /observer/projects page with search, filters, sorting, pagination, CSV export
- Restructure reports page from 5 tabs to 3 (Progress, Jurors, Scores & Analytics) with per-tab CSV export
- Redesign project detail: breadcrumb nav, score card header, 3-tab layout (Overview/Evaluations/Files)
- Update loading skeletons to match new layouts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-20 21:45:01 +01:00
parent 77cbc64b33
commit 8125ca6567
24 changed files with 3412 additions and 3401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/charts/cross-round-comparison.tsx
View File

@@ -1,8 +1,8 @@
'use client'
import { ResponsiveBar } from '@nivo/bar'
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { nivoTheme, BRAND_COLORS } from './chart-theme'
import { BRAND_COLORS } from './chart-theme'
interface StageComparison {
roundId: string
@@ -36,16 +36,14 @@ export function CrossStageComparisonChart({
round.roundName.length > 20
? round.roundName.slice(0, 20) + '...'
: round.roundName,
projects: round.projectCount,
evaluations: round.evaluationCount,
completionRate: round.completionRate,
avgScore: round.averageScore
Projects: round.projectCount,
Evaluations: round.evaluationCount,
'Completion Rate': round.completionRate,
'Avg Score': round.averageScore
? parseFloat(round.averageScore.toFixed(2))
: 0,
}))
const sharedMargin = { top: 10, right: 10, bottom: 40, left: 40 }
return (
<Card>
<CardHeader>
@@ -58,25 +56,16 @@ export function CrossStageComparisonChart({
<CardTitle className="text-sm font-medium">Projects</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<div style={{ height: '200px' }}>
<ResponsiveBar
data={baseData}
keys={['projects']}
indexBy="name"
theme={nivoTheme}
colors={[BRAND_COLORS[0]]}
borderRadius={4}
enableLabel={true}
labelSkipHeight={12}
labelTextColor="#ffffff"
margin={sharedMargin}
padding={0.3}
axisBottom={{
tickRotation: -25,
}}
animate={true}
/>
</div>
<BarChart
data={baseData}
index="name"
categories={['Projects']}
colors={[BRAND_COLORS[0]] as string[]}
showLegend={false}
yAxisWidth={40}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
@@ -87,25 +76,16 @@ export function CrossStageComparisonChart({
</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<div style={{ height: '200px' }}>
<ResponsiveBar
data={baseData}
keys={['evaluations']}
indexBy="name"
theme={nivoTheme}
colors={[BRAND_COLORS[2]]}
borderRadius={4}
enableLabel={true}
labelSkipHeight={12}
labelTextColor="#ffffff"
margin={sharedMargin}
padding={0.3}
axisBottom={{
tickRotation: -25,
}}
animate={true}
/>
</div>
<BarChart
data={baseData}
index="name"
categories={['Evaluations']}
colors={[BRAND_COLORS[2]] as string[]}
showLegend={false}
yAxisWidth={40}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
@@ -116,30 +96,18 @@ export function CrossStageComparisonChart({
</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<div style={{ height: '200px' }}>
<ResponsiveBar
data={baseData}
keys={['completionRate']}
indexBy="name"
theme={nivoTheme}
colors={[BRAND_COLORS[1]]}
valueScale={{ type: 'linear', max: 100 }}
borderRadius={4}
enableLabel={true}
labelSkipHeight={12}
labelTextColor="#ffffff"
valueFormat={(v) => `${v}%`}
margin={sharedMargin}
padding={0.3}
axisBottom={{
tickRotation: -25,
}}
axisLeft={{
format: (v) => `${v}%`,
}}
animate={true}
/>
</div>
<BarChart
data={baseData}
index="name"
categories={['Completion Rate']}
colors={[BRAND_COLORS[1]] as string[]}
showLegend={false}
maxValue={100}
yAxisWidth={40}
valueFormatter={(v) => `${v}%`}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
@@ -150,26 +118,17 @@ export function CrossStageComparisonChart({
</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<div style={{ height: '200px' }}>
<ResponsiveBar
data={baseData}
keys={['avgScore']}
indexBy="name"
theme={nivoTheme}
colors={[BRAND_COLORS[0]]}
valueScale={{ type: 'linear', max: 10 }}
borderRadius={4}
enableLabel={true}
labelSkipHeight={12}
labelTextColor="#ffffff"
margin={sharedMargin}
padding={0.3}
axisBottom={{
tickRotation: -25,
}}
animate={true}
/>
</div>
<BarChart
data={baseData}
index="name"
categories={['Avg Score']}
colors={[BRAND_COLORS[0]] as string[]}
showLegend={false}
maxValue={10}
yAxisWidth={40}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
</div>