Fix chart legend

Author: cte

apps/web-roo-code/src/app/evals/plot.tsx

@@ -1,17 +1,10 @@
 "use client"
 
 import { useMemo } from "react"
-import { ScatterChart, Scatter, XAxis, YAxis, Label, Customized, Cross } from "recharts"
+import { ScatterChart, Scatter, XAxis, YAxis, Label, Customized, Cross, LabelList } from "recharts"
 
 import { formatCurrency } from "@/lib"
-import {
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-	ChartConfig,
-	ChartLegend,
-	ChartLegendContent,
-} from "@/components/ui"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartConfig } from "@/components/ui"
 
 import type { EvalRun } from "./types"
 
@@ -20,7 +13,7 @@ type PlotProps = {
 }
 
 export const Plot = ({ tableData }: PlotProps) => {
-	const chartData = useMemo(() => tableData.filter(({ cost }) => cost < 100), [tableData])
+	const chartData = useMemo(() => tableData.filter(({ cost }) => cost < 50), [tableData])
 
 	const chartConfig = useMemo(
 		() => chartData.reduce((acc, run) => ({ ...acc, [run.label]: run }), {} as ChartConfig),
@@ -56,10 +49,15 @@ export const Plot = ({ tableData }: PlotProps) => {
 					</YAxis>
 					<ChartTooltip content={<ChartTooltipContent labelKey="label" hideIndicator />} />
 					<Customized component={renderQuadrant} />
-					{chartData.map((d, i) => (
-						<Scatter key={d.label} name={d.label} data={[d]} fill={`hsl(var(--chart-${i + 1}))`} />
+					{chartData.map((d, index) => (
+						<Scatter
+							key={d.label}
+							name={d.label}
+							data={[d]}
+							fill={generateSpectrumColor(index, chartData.length)}>
+							<LabelList dataKey="label" position="top" offset={8} content={renderCustomLabel} />
+						</Scatter>
 					))}
-					<ChartLegend content={<ChartLegendContent />} />
 				</ScatterChart>
 			</ChartContainer>
 			<div className="py-4 text-xs opacity-50">
@@ -82,3 +80,49 @@ const renderQuadrant = (props: any) => (
 		opacity={0.1}
 	/>
 )
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderCustomLabel = (props: any) => {
+	const { x, y, value } = props
+	const maxWidth = 80 // Maximum width in pixels - adjust as needed.
+
+	const truncateText = (text: string, maxChars: number = 12) => {
+		if (text.length <= maxChars) {
+			return text
+		}
+
+		return text.substring(0, maxChars - 1) + "…"
+	}
+
+	return (
+		<text
+			x={x}
+			y={y - 5}
+			fontSize="10"
+			fontWeight="500"
+			fill="currentColor"
+			opacity="0.8"
+			textAnchor="middle"
+			dominantBaseline="auto"
+			style={{
+				pointerEvents: "none",
+				maxWidth: `${maxWidth}px`,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+			}}>
+			{truncateText(value)}
+		</text>
+	)
+}
+
+const generateSpectrumColor = (index: number, total: number): string => {
+	// Distribute hues evenly across the color wheel (0-360 degrees)
+	// Start at 0 (red) and distribute evenly.
+	const hue = (index * 360) / total
+	// Use high saturation for vibrant colors.
+	const saturation = 70
+	// Use medium lightness for good visibility on both light and dark backgrounds.
+	const lightness = 50
+	return `hsl(${Math.round(hue)}, ${saturation}%, ${lightness}%)`
+}