spb/ai-atlas

1'use client';2import dynamic from 'next/dynamic';3import { InteractiveLineChart, type Point, type ScatterPoint } from '@/components/charts';45// d3's log scale yields last-digit float differences between Node and Chromium (cx=400.02442488279183 vs …917), which React6// reports as a hydration mismatch — so the scatter is rendered on the client only, with a fixed-height placeholder.7const ScatterChart = dynamic(() => import('@/components/charts/scatter-chart').then((m) => m.ScatterChart), { ssr: false, loading: () => <div className="animate-pulse bg-surface-2/60" style={{ height: 420 }} aria-hidden /> });8import { fmtScoreUnit, xFormatter } from '@/components/models/shared';910/*11  Client wrappers for the benchmark pages: server components cannot pass formatter functions across the boundary, so these take12  a `unit` / axis key and build the formatters on the client.13*/1415export function FrontierLineChart({ points, unit, label, height = 220 }: { points: { x: string; y: number }[]; unit: string | null; label: string; height?: number }) {16  const pts: Point[] = points.map((p) => ({ x: new Date(p.x), y: p.y }));17  return <InteractiveLineChart series={[{ name: 'Best score', color: 'var(--type-benchmark)', points: pts }]} height={height} step showDots yFormat={(v) => fmtScoreUnit(v, unit)} yLabel={label} />;18}192021export function ParetoChart({ points, xKey, unit, log, xLabel, yLabel, frontier, highlight, height = 420 }: { points: ScatterPoint[]; xKey: string; unit: string | null; log: boolean; xLabel: string; yLabel: string; frontier: { x: number; y: number }[]; highlight: string[]; height?: number }) {22  return <ScatterChart points={points} xScale={log && points.every((p) => p.x > 0) ? 'log' : 'linear'} yScale="linear" xLabel={xLabel} yLabel={yLabel} xFormat={xFormatter(xKey)} yFormat={(v) => fmtScoreUnit(v, unit)} frontier={frontier} highlight={highlight} height={height} labelTop={8} color="var(--type-model)" />;23}24