Spot Diagram

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

/* Same synthetic trace shape as the default demo, shown with colorBy="field" instead of the default "wavelength". */
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;
      pts.push([Math.cos(a) * r + wShift, Math.sin(a) * r * 0.85]);
    }
    perWl.push(pts);
  }
  return perWl;
}

function makeSampleData(): SpotDiagramData {
  const fields = [0, 5, 10, 14];
  const spreads = [4, 10, 18, 28];
  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.4, spots, spotStats };
}

const sampleData = makeSampleData();

export default function SpotDiagramFieldColorDemo() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SpotDiagram
        data={sampleData}
        colorBy="field"
        scale="auto"
        label="Spot diagram, four fields, colored by field"
      />
    </div>
  );
}