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

Dashboard layout overhaul + fix Tremor chart colors and tooltips
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m55s
Details

Browse Source 
- 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>
This commit is contained in:
Matt
2026-02-20 23:09:06 +01:00
parent 213efdba87
commit 9f7b76b3cb
12 changed files with 223 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/charts/chart-theme.ts
View File

@@ -18,6 +18,35 @@ export const BRAND_COLORS = [
'#a83240', // Rose
] as const
// Tremor named colors for chart components
// These are the official Tremor palette names that render correctly
export const TREMOR_BRAND = 'cyan' as const
export const TREMOR_ACCENT = 'teal' as const
export const TREMOR_CHART_COLORS = [
'cyan',
'teal',
'blue',
'emerald',
'amber',
'violet',
'rose',
'indigo',
'lime',
'fuchsia',
] as const
// Donut / status chart colors (mapped to Tremor names)
export const TREMOR_STATUS_COLORS: Record<string, string> = {
SUBMITTED: 'slate',
ELIGIBLE: 'cyan',
ASSIGNED: 'violet',
SEMIFINALIST: 'amber',
FINALIST: 'emerald',
REJECTED: 'rose',
DRAFT: 'gray',
WITHDRAWN: 'neutral',
}
// Project status colors — mapped to actual ProjectStatus enum values
export const STATUS_COLORS: Record<string, string> = {
SUBMITTED: '#557f8c', // Teal
@@ -76,7 +105,7 @@ function lerpColor(a: string, b: string, t: number): string {
* Falls back to a neutral gray
*/
export function getStatusColor(status: string): string {
return STATUS_COLORS[status] || '#9ca3af'
return TREMOR_STATUS_COLORS[status] || 'gray'
}
/**

3
src/components/charts/criteria-scores.tsx
View File

@@ -2,7 +2,6 @@
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_TEAL } from './chart-theme'
interface CriteriaScoreData {
id: string
@@ -44,7 +43,7 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
data={chartData}
index="criterion"
categories={['Avg Score']}
colors={[BRAND_TEAL] as string[]}
colors={['teal']}
maxValue={10}
layout="vertical"
yAxisWidth={160}

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

@@ -2,7 +2,6 @@
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_COLORS } from './chart-theme'
interface StageComparison {
roundId: string
@@ -32,10 +31,7 @@ export function CrossStageComparisonChart({
}
const baseData = data.map((round) => ({
name:
round.roundName.length > 20
? round.roundName.slice(0, 20) + '...'
: round.roundName,
name: round.roundName,
Projects: round.projectCount,
Evaluations: round.evaluationCount,
'Completion Rate': round.completionRate,
@@ -50,7 +46,7 @@ export function CrossStageComparisonChart({
<CardTitle>Round Metrics Comparison</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4">
<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>
@@ -60,11 +56,10 @@ export function CrossStageComparisonChart({
data={baseData}
index="name"
categories={['Projects']}
colors={[BRAND_COLORS[0]] as string[]}
colors={['cyan']}
showLegend={false}
yAxisWidth={40}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
@@ -80,11 +75,10 @@ export function CrossStageComparisonChart({
data={baseData}
index="name"
categories={['Evaluations']}
colors={[BRAND_COLORS[2]] as string[]}
colors={['teal']}
showLegend={false}
yAxisWidth={40}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
@@ -100,13 +94,12 @@ export function CrossStageComparisonChart({
data={baseData}
index="name"
categories={['Completion Rate']}
colors={[BRAND_COLORS[1]] as string[]}
colors={['emerald']}
showLegend={false}
maxValue={100}
yAxisWidth={40}
valueFormatter={(v) => `${v}%`}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>
@@ -122,12 +115,11 @@ export function CrossStageComparisonChart({
data={baseData}
index="name"
categories={['Avg Score']}
colors={[BRAND_COLORS[0]] as string[]}
colors={['amber']}
showLegend={false}
maxValue={10}
yAxisWidth={40}
className="h-[200px]"
rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
/>
</CardContent>
</Card>

8
src/components/charts/diversity-metrics.tsx
View File

@@ -3,7 +3,7 @@
import { DonutChart, BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { BRAND_COLORS } from './chart-theme'
import { TREMOR_CHART_COLORS } from './chart-theme'
interface DiversityData {
total: number
@@ -116,7 +116,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
data={donutData}
category="value"
index="name"
colors={[...BRAND_COLORS] as string[]}
colors={[...TREMOR_CHART_COLORS]}
className="h-[400px]"
/>
) : (
@@ -136,7 +136,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
data={categoryData}
index="category"
categories={['Count']}
colors={[BRAND_COLORS[0]] as string[]}
colors={['cyan']}
layout="horizontal"
yAxisWidth={120}
showLegend={false}
@@ -160,7 +160,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
data={oceanIssueData}
index="issue"
categories={['Count']}
colors={[BRAND_COLORS[2]] as string[]}
colors={['teal']}
showLegend={false}
yAxisWidth={40}
className="h-[400px]"

3
src/components/charts/evaluation-timeline.tsx
View File

@@ -2,7 +2,6 @@
import { AreaChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_DARK_BLUE, BRAND_TEAL } from './chart-theme'
interface TimelineDataPoint {
date: string
@@ -44,7 +43,7 @@ export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
data={chartData}
index="date"
categories={['Cumulative', 'Daily']}
colors={[BRAND_DARK_BLUE, BRAND_TEAL] as string[]}
colors={['cyan', 'teal']}
curveType="monotone"
showGradient={true}
yAxisWidth={50}

3
src/components/charts/juror-consistency.tsx
View File

@@ -12,7 +12,6 @@ import {
TableRow,
} from '@/components/ui/table'
import { AlertTriangle } from 'lucide-react'
import { BRAND_DARK_BLUE, BRAND_RED } from './chart-theme'
interface JurorMetric {
userId: string
@@ -77,7 +76,7 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
y="Std Deviation"
category="category"
size="size"
colors={[BRAND_DARK_BLUE, BRAND_RED] as string[]}
colors={['cyan', 'rose']}
className="h-[400px]"
/>
<p className="text-xs text-muted-foreground mt-2 text-center">

3
src/components/charts/juror-workload.tsx
View File

@@ -2,7 +2,6 @@
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_DARK_BLUE } from './chart-theme'
interface JurorWorkloadData {
id: string
@@ -49,7 +48,7 @@ export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
data={chartData}
index="juror"
categories={['Completed', 'Remaining']}
colors={[BRAND_DARK_BLUE, '#e5e7eb'] as string[]}
colors={['cyan', 'gray']}
layout="horizontal"
stack={true}
yAxisWidth={160}

3
src/components/charts/project-rankings.tsx
View File

@@ -2,7 +2,6 @@
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_TEAL } from './chart-theme'
interface ProjectRankingData {
id: string
@@ -52,7 +51,7 @@ export function ProjectRankingsChart({
data={chartData}
index="project"
categories={['Score']}
colors={[BRAND_TEAL] as string[]}
colors={['teal']}
layout="horizontal"
yAxisWidth={200}
maxValue={10}

3
src/components/charts/score-distribution.tsx
View File

@@ -2,7 +2,6 @@
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_TEAL } from './chart-theme'
interface ScoreDistributionProps {
data: { score: number; count: number }[]
@@ -37,7 +36,7 @@ export function ScoreDistributionChart({
data={chartData}
index="score"
categories={['Count']}
colors={[BRAND_TEAL] as (string)[]}
colors={['cyan']}
yAxisWidth={40}
showLegend={false}
className="h-[300px]"

4
src/components/charts/status-breakdown.tsx
View File

@@ -2,7 +2,7 @@
import { DonutChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { getStatusColor, formatStatus } from './chart-theme'
import { formatStatus, getStatusColor } from './chart-theme'
interface StatusDataPoint {
status: string
@@ -40,7 +40,7 @@ export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
data={chartData}
category="value"
index="name"
colors={colors as string[]}
colors={colors}
showLabel={true}
className="h-[300px]"
/>