Spot Diagram

import SpotDiagram, {
  type SpotDiagramData,
} from "@/components/ui/spot-diagram";

/* Synthetic ray-intercept data for a small 3-field, 3-wavelength trace, shaped like
   eleoptics.com's real trace output (fields, spots[field][wavelength][point]=[x,y] in \u00b5m, spotStats, airy). */
function makeFieldSpots(spreadUm: number): number[][][] {
  const wavelengths = 3;
  const perWl: number[][][] = [];
  for (let wi = 0; wi < wavelengths; wi++) {
    const pts: number[][] = [];
    const n = 60;
    const wShift = (wi - 1) * spreadUm * 0.18;
    for (let i = 0; i < n; i++) {
      const t = i / n;
      const r = Math.sqrt(t) * spreadUm;
      const a = i * 2.399963; // golden angle, deterministic even spiral spread
      pts.push([Math.cos(a) * r + wShift, Math.sin(a) * r * 0.85]);
    }
    perWl.push(pts);
  }
  return perWl;
}

function makeSampleData(): SpotDiagramData {
  const fields = [0, 7, 10];
  const spreads = [3, 12, 22];
  const spots = spreads.map((spread) => makeFieldSpots(spread));
  const spotStats = spots.map((perWl) => {
    const all = perWl.flat();
    const cx = all.reduce((s, p) => s + p[0], 0) / all.length;
    const cy = all.reduce((s, p) => s + p[1], 0) / all.length;
    const d2 = all.map((p) => (p[0] - cx) ** 2 + (p[1] - cy) ** 2);
    const rms = Math.sqrt(d2.reduce((s, v) => s + v, 0) / d2.length);
    const geo = Math.sqrt(Math.max(...d2));
    return { rms, geo };
  });
  return { fields, airy: 2.9, spots, spotStats };
}

const sampleData = makeSampleData();

export default function SpotDiagramDemo() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SpotDiagram
        data={sampleData}
        label="Spot diagram, three fields, colored by wavelength"
      />
    </div>
  );
}