diff --git a/src/app/globals.css b/src/app/globals.css index 6e06329..b25f7d6 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -313,3 +313,27 @@ div[class*="recharts-tooltip"] { background-color: hsl(var(--card)) !important; border-color: hsl(var(--border)) !important; } + +/* Tremor/Recharts tooltip color indicator icons — fix rendering */ +.recharts-tooltip-wrapper svg.recharts-surface { + display: inline-block !important; + overflow: visible !important; +} + +/* Tremor custom tooltip color dots */ +[class*="tremor"] [role="tooltip"] span[class*="bg-"], +[class*="tremor"] [role="tooltip"] span[style*="background"] { + border-radius: 2px !important; + min-width: 10px !important; + min-height: 10px !important; + flex-shrink: 0 !important; +} + +/* Recharts default tooltip icon fix — ensure SVG paths have correct fill */ +.recharts-default-tooltip .recharts-tooltip-item-list { + padding: 0 !important; +} + +.recharts-default-tooltip .recharts-tooltip-item svg { + border: none !important; +} diff --git a/src/components/charts/chart-theme.ts b/src/components/charts/chart-theme.ts index f114efd..119cfba 100644 --- a/src/components/charts/chart-theme.ts +++ b/src/components/charts/chart-theme.ts @@ -20,31 +20,31 @@ export const BRAND_COLORS = [ // 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_BRAND = 'blue' as const +export const TREMOR_ACCENT = 'indigo' as const export const TREMOR_CHART_COLORS = [ - 'cyan', - 'teal', 'blue', 'emerald', 'amber', 'violet', 'rose', 'indigo', - 'lime', + 'sky', 'fuchsia', + 'lime', + 'orange', ] as const // Donut / status chart colors (mapped to Tremor names) export const TREMOR_STATUS_COLORS: Record = { - SUBMITTED: 'slate', - ELIGIBLE: 'cyan', + SUBMITTED: 'sky', + ELIGIBLE: 'blue', ASSIGNED: 'violet', SEMIFINALIST: 'amber', FINALIST: 'emerald', REJECTED: 'rose', DRAFT: 'gray', - WITHDRAWN: 'neutral', + WITHDRAWN: 'slate', } // Project status colors — mapped to actual ProjectStatus enum values diff --git a/src/components/charts/criteria-scores.tsx b/src/components/charts/criteria-scores.tsx index 5d30961..eb8b4fb 100644 --- a/src/components/charts/criteria-scores.tsx +++ b/src/components/charts/criteria-scores.tsx @@ -43,7 +43,7 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) { data={chartData} index="criterion" categories={['Avg Score']} - colors={['teal']} + colors={['indigo']} maxValue={10} layout="vertical" yAxisWidth={160} diff --git a/src/components/charts/cross-round-comparison.tsx b/src/components/charts/cross-round-comparison.tsx index 391613a..b2c3c77 100644 --- a/src/components/charts/cross-round-comparison.tsx +++ b/src/components/charts/cross-round-comparison.tsx @@ -56,7 +56,7 @@ export function CrossStageComparisonChart({ data={baseData} index="name" categories={['Projects']} - colors={['cyan']} + colors={['blue']} showLegend={false} yAxisWidth={40} className="h-[200px]" @@ -75,7 +75,7 @@ export function CrossStageComparisonChart({ data={baseData} index="name" categories={['Evaluations']} - colors={['teal']} + colors={['violet']} showLegend={false} yAxisWidth={40} className="h-[200px]" diff --git a/src/components/charts/diversity-metrics.tsx b/src/components/charts/diversity-metrics.tsx index a56317b..f346211 100644 --- a/src/components/charts/diversity-metrics.tsx +++ b/src/components/charts/diversity-metrics.tsx @@ -136,7 +136,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) { data={categoryData} index="category" categories={['Count']} - colors={['cyan']} + colors={['indigo']} layout="horizontal" yAxisWidth={120} showLegend={false} @@ -160,7 +160,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) { data={oceanIssueData} index="issue" categories={['Count']} - colors={['teal']} + colors={['blue']} showLegend={false} yAxisWidth={40} className="h-[400px]" diff --git a/src/components/charts/evaluation-timeline.tsx b/src/components/charts/evaluation-timeline.tsx index 781656e..547e2fc 100644 --- a/src/components/charts/evaluation-timeline.tsx +++ b/src/components/charts/evaluation-timeline.tsx @@ -43,7 +43,7 @@ export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) { data={chartData} index="date" categories={['Cumulative', 'Daily']} - colors={['cyan', 'teal']} + colors={['indigo', 'amber']} curveType="monotone" showGradient={true} yAxisWidth={50} diff --git a/src/components/charts/juror-consistency.tsx b/src/components/charts/juror-consistency.tsx index b5fdad8..064e5f1 100644 --- a/src/components/charts/juror-consistency.tsx +++ b/src/components/charts/juror-consistency.tsx @@ -76,7 +76,7 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) { y="Std Deviation" category="category" size="size" - colors={['cyan', 'rose']} + colors={['blue', 'rose']} className="h-[400px]" />

diff --git a/src/components/charts/juror-workload.tsx b/src/components/charts/juror-workload.tsx index 98dc8ad..bae09f5 100644 --- a/src/components/charts/juror-workload.tsx +++ b/src/components/charts/juror-workload.tsx @@ -48,7 +48,7 @@ export function JurorWorkloadChart({ data }: JurorWorkloadProps) { data={chartData} index="juror" categories={['Completed', 'Remaining']} - colors={['cyan', 'gray']} + colors={['blue', 'slate']} layout="horizontal" stack={true} yAxisWidth={160} diff --git a/src/components/charts/project-rankings.tsx b/src/components/charts/project-rankings.tsx index e2f45d5..38d0f86 100644 --- a/src/components/charts/project-rankings.tsx +++ b/src/components/charts/project-rankings.tsx @@ -51,7 +51,7 @@ export function ProjectRankingsChart({ data={chartData} index="project" categories={['Score']} - colors={['teal']} + colors={['blue']} layout="horizontal" yAxisWidth={200} maxValue={10} diff --git a/src/components/charts/score-distribution.tsx b/src/components/charts/score-distribution.tsx index ed5adf2..0bed9cd 100644 --- a/src/components/charts/score-distribution.tsx +++ b/src/components/charts/score-distribution.tsx @@ -36,7 +36,7 @@ export function ScoreDistributionChart({ data={chartData} index="score" categories={['Count']} - colors={['cyan']} + colors={['blue']} yAxisWidth={40} showLegend={false} className="h-[300px]"