An SVG spot-diagram plot for optical lens design that shows ray-intercept points per field angle, colored by wavelength or field, with the Airy diffraction-limit circle and RMS/GEO spot-size readouts. Ported to React from the ELEO UI Svelte component by ELE Optics (eleoptics.com).
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>
);
}
