@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.97.1 → 0.6.0-beta.99.1

package/dist/components/charts/ScatterGraph/ScatterGraph.js

@@ -1,158 +1,172 @@
-import { jsxs as A, jsx as P } from "react/jsx-runtime";
-import x from "plotly.js-dist";
-import { useRef as X, useMemo as c, useEffect as U } from "react";
-import { useChartTooltip as V } from "../ChartTooltip/ChartTooltip.js";
-import { usePlotlyTheme as B } from "../../../hooks/use-plotly-theme.js";
-import { seriesColor as Y } from "../../../utils/colors.js";
-const q = ({
-  dataSeries: u,
-  width: w = 1e3,
-  height: v = 600,
-  xRange: f,
-  yRange: m,
-  xTitle: d = "Columns",
-  yTitle: g = "Rows",
-  title: b = "Scatter Plot"
+import { jsxs as G, jsx as O } from "react/jsx-runtime";
+import g from "plotly.js-dist";
+import { useRef as k, useMemo as m, useEffect as Y } from "react";
+import { useChartTooltip as T } from "../ChartTooltip/ChartTooltip.js";
+import { useElementSize as q } from "../../../hooks/use-element-size.js";
+import { usePlotlyTheme as F } from "../../../hooks/use-plotly-theme.js";
+import { cn as J } from "../../../lib/utils.js";
+import { seriesColor as K } from "../../../utils/colors.js";
+const it = ({
+  dataSeries: x,
+  width: I,
+  height: _,
+  xRange: u,
+  yRange: p,
+  xTitle: v,
+  yTitle: b,
+  title: L = "Scatter Plot"
 }) => {
-  const p = X(null), e = B(), { bindTooltip: C, tooltipElement: N } = V({ xLabel: d, yLabel: g }), { xMin: E, xMax: z, yMin: I, yMax: _ } = c(() => {
-    let r = Number.MAX_VALUE, t = Number.MIN_VALUE, n = Number.MAX_VALUE, o = Number.MIN_VALUE;
-    u.forEach((l) => {
+  const a = k(null), r = F(), { bindTooltip: N, tooltipElement: j } = T({ xLabel: v, yLabel: b }), [H, A] = q(), s = I ?? A.width, c = _ ?? A.height, P = s > 0 && c > 0, W = I === void 0, D = _ === void 0, w = k({ width: s, height: c });
+  w.current = { width: s, height: c };
+  const E = k(!1), M = k({ width: 0, height: 0 }), { xMin: S, xMax: X, yMin: U, yMax: V } = m(() => {
+    let o = Number.MAX_VALUE, t = Number.MIN_VALUE, n = Number.MAX_VALUE, e = Number.MIN_VALUE;
+    x.forEach((l) => {
       l.x.forEach((i) => {
-        r = Math.min(r, i), t = Math.max(t, i);
+        o = Math.min(o, i), t = Math.max(t, i);
       }), l.y.forEach((i) => {
-        n = Math.min(n, i), o = Math.max(o, i);
+        n = Math.min(n, i), e = Math.max(e, i);
       });
     });
-    const h = (t - r) * 0.1, y = (o - n) * 0.1;
+    const d = (t - o) * 0.1, y = (e - n) * 0.1;
     return {
-      xMin: r - h,
-      xMax: t + h,
+      xMin: o - d,
+      xMax: t + d,
       yMin: n - y,
-      yMax: o + y
+      yMax: e + y
     };
-  }, [u]), s = c(
-    () => f || [E, z],
-    [f, E, z]
-  ), a = c(
-    () => m || [I, _],
-    [m, I, _]
-  ), M = c(() => {
-    const r = s[1] - s[0];
-    let t = Math.pow(10, Math.floor(Math.log10(r)));
-    r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
+  }, [x]), h = m(
+    () => u || [S, X],
+    [u, S, X]
+  ), f = m(
+    () => p || [U, V],
+    [p, U, V]
+  ), z = m(() => {
+    const o = h[1] - h[0];
+    let t = Math.pow(10, Math.floor(Math.log10(o)));
+    o / t > 10 && (t = t * 2), o / t < 4 && (t = t / 2);
     const n = [];
-    let o = Math.ceil(s[0] / t) * t;
-    for (; o <= s[1]; )
-      n.push(o), o += t;
+    let e = Math.ceil(h[0] / t) * t;
+    for (; e <= h[1]; )
+      n.push(e), e += t;
     return n;
-  }, [s]), L = c(() => {
-    const r = a[1] - a[0];
-    let t = Math.pow(10, Math.floor(Math.log10(r)));
-    r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
+  }, [h]), B = m(() => {
+    const o = f[1] - f[0];
+    let t = Math.pow(10, Math.floor(Math.log10(o)));
+    o / t > 10 && (t = t * 2), o / t < 4 && (t = t / 2);
     const n = [];
-    let o = Math.ceil(a[0] / t) * t;
-    for (; o <= a[1]; )
-      n.push(o), o += t;
+    let e = Math.ceil(f[0] / t) * t;
+    for (; e <= f[1]; )
+      n.push(e), e += t;
     return n;
-  }, [a]), k = c(
+  }, [f]), C = m(
     () => ({
-      tickcolor: e.tickColor,
+      tickcolor: r.tickColor,
       ticklen: 12,
       tickwidth: 1,
       ticks: "outside",
       tickfont: {
         size: 16,
-        color: e.textColor,
+        color: r.textColor,
         family: "Inter, sans-serif",
         weight: 400
       },
-      linecolor: e.lineColor,
+      linecolor: r.lineColor,
       linewidth: 1,
       position: 0,
       zeroline: !1
     }),
-    [e]
+    [r]
   );
-  return U(() => {
-    if (!p.current) return;
-    const r = u.map((l, i) => ({
+  return Y(() => {
+    if (!a.current || !P) return;
+    const o = x.map((l, i) => ({
       x: l.x,
       y: l.y,
       type: "scatter",
       mode: "markers",
       name: l.name,
       marker: {
-        color: Y(i, l.color),
+        color: K(i, l.color),
         size: 10,
         symbol: "circle"
       },
       hoverinfo: "none"
     })), t = {
       title: {
-        text: b,
+        text: L,
         font: {
           size: 32,
           family: "Inter, sans-serif",
-          color: e.textColor
+          color: r.textColor
         }
       },
-      width: w,
-      height: v,
-      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },
-      paper_bgcolor: e.paperBg,
-      plot_bgcolor: e.plotBg,
+      width: w.current.width,
+      height: w.current.height,
+      // Bottom margin reserves room for tick labels, the x-axis title, and the
+      // container-anchored bottom legend stacked beneath them.
+      margin: { l: 80, r: 30, b: 96, t: 60, pad: 10 },
+      paper_bgcolor: r.paperBg,
+      plot_bgcolor: r.plotBg,
       font: {
         family: "Inter, sans-serif"
       },
       dragmode: !1,
       xaxis: {
         title: {
-          text: d,
+          text: v,
           font: {
             size: 16,
-            color: e.textSecondary,
+            color: r.textSecondary,
             family: "Inter, sans-serif",
             weight: 400
           },
           standoff: 32
         },
-        gridcolor: e.gridColor,
-        range: f,
-        autorange: !f,
+        gridcolor: r.gridColor,
+        range: u,
+        autorange: !u,
         tickmode: "array",
-        tickvals: M,
-        ticktext: M.map(String),
+        tickvals: z,
+        ticktext: z.map(String),
         showgrid: !0,
-        ...k
+        // Reserve space for tick labels + the axis title so the bottom legend
+        // can't overlap them at small sizes (SW-2157).
+        automargin: !0,
+        ...C
       },
       yaxis: {
         title: {
-          text: g,
+          text: b,
           font: {
             size: 16,
-            color: e.textSecondary,
+            color: r.textSecondary,
             family: "Inter, sans-serif",
             weight: 400
           },
           standoff: 30
         },
-        gridcolor: e.gridColor,
-        range: m,
-        autorange: !m,
+        gridcolor: r.gridColor,
+        range: p,
+        autorange: !p,
         tickmode: "array",
-        tickvals: L,
+        tickvals: B,
         showgrid: !0,
-        ...k
+        automargin: !0,
+        ...C
       },
       legend: {
+        // Anchor to the bottom of the container (not the plot area) so the
+        // legend always clears the x-axis tick labels + title — a paper-relative
+        // fractional offset collapses into the ticks at small heights (SW-2157).
         x: 0.5,
-        y: -0.2,
+        y: 0,
         xanchor: "center",
-        yanchor: "top",
+        yanchor: "bottom",
+        yref: "container",
         orientation: "h",
         font: {
           size: 16,
-          color: e.legendColor,
+          color: r.legendColor,
           family: "Inter, sans-serif",
           weight: 500
         }
@@ -160,15 +174,19 @@ const q = ({
       showlegend: !0,
       hovermode: "closest"
     }, n = {
-      responsive: !0,
+      // Sizing is driven from the measured container; disable Plotly's own
+      // window-resize responsiveness (it can't see container resizes).
+      responsive: !1,
       displayModeBar: !1,
       displaylogo: !1
     };
-    x.newPlot(p.current, r, t, n), C(p.current);
-    const o = p.current, h = o, y = { color: e.spikeColor, width: 2 };
-    return h.on("plotly_hover", (l) => {
+    g.newPlot(a.current, o, t, n), N(a.current);
+    const e = a.current;
+    E.current = !0, M.current = { ...w.current };
+    const d = e, y = { color: r.spikeColor, width: 2 };
+    return d.on("plotly_hover", (l) => {
       const i = l.points[0];
-      i && x.relayout(o, {
+      i && g.relayout(e, {
         shapes: [
           {
             type: "line",
@@ -194,17 +212,23 @@ const q = ({
           }
         ]
       });
-    }), h.on("plotly_unhover", () => {
-      x.relayout(o, { shapes: [] });
+    }), d.on("plotly_unhover", () => {
+      g.relayout(e, { shapes: [] });
     }), () => {
-      o && x.purge(o);
+      e && (g.purge(e), E.current = !1);
     };
-  }, [u, w, v, f, m, d, g, b, s, a, M, L, k, e, C]), /* @__PURE__ */ A("div", { className: "relative size-full", children: [
-    /* @__PURE__ */ P("div", { ref: p, style: { width: "100%", height: "100%" } }),
-    N
+  }, [x, P, u, p, v, b, L, h, f, z, B, C, r, N]), Y(() => {
+    const o = a.current;
+    !o || !E.current || s <= 0 || c <= 0 || M.current.width === s && M.current.height === c || (M.current = { width: s, height: c }, g.relayout(o, { width: s, height: c }).catch(
+      () => {
+      }
+    ));
+  }, [s, c]), /* @__PURE__ */ G("div", { ref: H, className: J("relative", W && "w-full", D && "h-full"), children: [
+    /* @__PURE__ */ O("div", { ref: a, style: { width: "100%", height: "100%" } }),
+    j
   ] });
 };
 export {
-  q as ScatterGraph
+  it as ScatterGraph
 };
 //# sourceMappingURL=ScatterGraph.js.map

package/dist/components/charts/ScatterGraph/ScatterGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterGraph.js","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { seriesColor } from \"@/utils/colors\";\n\ninterface ScatterDataPoint {\n  x: number;\n  y: number;\n  additionalInfo?: Record<string, string | number>;\n}\n\ninterface ScatterDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  /** Optional color override (auto-assigned from CHART_COLORS if not provided) */\n  color?: string;\n}\n\ninterface ScatterGraphProps {\n  dataSeries: ScatterDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Scatter Plot\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  const { xMin, xMax, yMin, yMax } = useMemo(() => {\n    let minX = Number.MAX_VALUE;\n    let maxX = Number.MIN_VALUE;\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: seriesColor(index, series.color),\n        size: 10,\n        symbol: \"circle\" as const,\n      },\n      hoverinfo: \"none\" as const,\n    }));\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: \"Inter, sans-serif\",\n          color: theme.textColor,\n        },\n      },\n      width,\n      height,\n      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        ...tickOptions,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n        },\n      },\n      showlegend: true,\n      hovermode: \"closest\" as const,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Crosshair guide lines through the hovered point. Drawn as layout shapes\n    // with `layer: \"below\"` so they sit behind the markers — native Plotly\n    // spikelines always render on top and can't be moved behind.\n    const emitter = plotElement as unknown as Plotly.PlotlyHTMLElement;\n    const crosshairLine = { color: theme.spikeColor, width: 2 };\n    emitter.on(\"plotly_hover\", (eventData) => {\n      const point = eventData.points[0];\n      if (!point) return;\n      void Plotly.relayout(plotElement, {\n        shapes: [\n          {\n            type: \"line\",\n            xref: \"x\",\n            yref: \"paper\",\n            x0: point.x,\n            x1: point.x,\n            y0: 0,\n            y1: 1,\n            line: crosshairLine,\n            layer: \"below\",\n          },\n          {\n            type: \"line\",\n            xref: \"paper\",\n            yref: \"y\",\n            x0: 0,\n            x1: 1,\n            y0: point.y,\n            y1: point.y,\n            line: crosshairLine,\n            layer: \"below\",\n          },\n        ],\n      });\n    });\n    emitter.on(\"plotly_unhover\", () => {\n      void Plotly.relayout(plotElement, { shapes: [] });\n    });\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, theme, bindTooltip]);\n\n  return (\n    <div className=\"relative size-full\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","useEffect","plotData","index","seriesColor","layout","config","Plotly","plotElement","emitter","crosshairLine","eventData","point","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"ScatterGraph.js","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { seriesColor } from \"@/utils/colors\";\n\ninterface ScatterDataPoint {\n  x: number;\n  y: number;\n  additionalInfo?: Record<string, string | number>;\n}\n\ninterface ScatterDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  /** Optional color override (auto-assigned from CHART_COLORS if not provided) */\n  color?: string;\n}\n\ninterface ScatterGraphProps {\n  dataSeries: ScatterDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n  dataSeries,\n  width,\n  height,\n  xRange,\n  yRange,\n  xTitle,\n  yTitle,\n  title = \"Scatter Plot\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. See AreaGraph for the reference pattern.\n  const [containerRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n\n  const { xMin, xMax, yMin, yMax } = useMemo(() => {\n    let minX = Number.MAX_VALUE;\n    let maxX = Number.MIN_VALUE;\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const plotData = dataSeries.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: seriesColor(index, series.color),\n        size: 10,\n        symbol: \"circle\" as const,\n      },\n      hoverinfo: \"none\" as const,\n    }));\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: \"Inter, sans-serif\",\n          color: theme.textColor,\n        },\n      },\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      // Bottom margin reserves room for tick labels, the x-axis title, and the\n      // container-anchored bottom legend stacked beneath them.\n      margin: { l: 80, r: 30, b: 96, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        // Reserve space for tick labels + the axis title so the bottom legend\n        // can't overlap them at small sizes (SW-2157).\n        automargin: true,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        automargin: true,\n        ...tickOptions,\n      },\n      legend: {\n        // Anchor to the bottom of the container (not the plot area) so the\n        // legend always clears the x-axis tick labels + title — a paper-relative\n        // fractional offset collapses into the ticks at small heights (SW-2157).\n        x: 0.5,\n        y: 0,\n        xanchor: \"center\" as const,\n        yanchor: \"bottom\" as const,\n        yref: \"container\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n        },\n      },\n      showlegend: true,\n      hovermode: \"closest\" as const,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n    plotInitedRef.current = true;\n    appliedSizeRef.current = { ...sizeRef.current };\n\n    // Crosshair guide lines through the hovered point. Drawn as layout shapes\n    // with `layer: \"below\"` so they sit behind the markers — native Plotly\n    // spikelines always render on top and can't be moved behind.\n    const emitter = plotElement as unknown as Plotly.PlotlyHTMLElement;\n    const crosshairLine = { color: theme.spikeColor, width: 2 };\n    emitter.on(\"plotly_hover\", (eventData) => {\n      const point = eventData.points[0];\n      if (!point) return;\n      void Plotly.relayout(plotElement, {\n        shapes: [\n          {\n            type: \"line\",\n            xref: \"x\",\n            yref: \"paper\",\n            x0: point.x,\n            x1: point.x,\n            y0: 0,\n            y1: 1,\n            line: crosshairLine,\n            layer: \"below\",\n          },\n          {\n            type: \"line\",\n            xref: \"paper\",\n            yref: \"y\",\n            x0: 0,\n            x1: 1,\n            y0: point.y,\n            y1: point.y,\n            line: crosshairLine,\n            layer: \"below\",\n          },\n        ],\n      });\n    });\n    emitter.on(\"plotly_unhover\", () => {\n      void Plotly.relayout(plotElement, { shapes: [] });\n    });\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [dataSeries, hasSize, xRange, yRange, xTitle, yTitle, title, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves the hover/crosshair event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    void Plotly.relayout(plotElement, { width: resolvedWidth, height: resolvedHeight }).catch(\n      () => {},\n    );\n  }, [resolvedWidth, resolvedHeight]);\n\n  return (\n    <div ref={containerRef} className={cn(\"relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}>\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","containerRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","useEffect","plotData","index","seriesColor","layout","config","Plotly","plotElement","emitter","crosshairLine","eventData","point","jsxs","cn","jsx"],"mappings":"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"}

package/dist/hooks/use-element-size.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function f(){const r=n.useRef(null),[u,h]=n.useState({width:0,height:0});return n.useEffect(()=>{const s=r.current;if(!s||typeof ResizeObserver>"u")return;const i=new ResizeObserver(d=>{const e=d[0];if(!e)return;const o=Math.round(e.contentRect.width),c=Math.round(e.contentRect.height);h(t=>t.width===o&&t.height===c?t:{width:o,height:c})});return i.observe(s),()=>i.disconnect()},[]),[r,u]}exports.useElementSize=f;
+//# sourceMappingURL=use-element-size.cjs.map

package/dist/hooks/use-element-size.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-size.cjs","sources":["../../src/hooks/use-element-size.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/** Element dimensions in CSS pixels, rounded to whole numbers. */\nexport interface ElementSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Observe an element's content-box size with a `ResizeObserver` and return the\n * latest rounded `{ width, height }`.\n *\n * Attach the returned `ref` to the element whose size should drive layout\n * (e.g. the flex/grid cell a chart needs to fill). The size is `{ 0, 0 }` until\n * the first measurement, and stays `{ 0, 0 }` in environments without a\n * `ResizeObserver` (e.g. SSR), so callers should treat a zero dimension as\n * \"not yet measured\" and skip work that needs real pixels.\n *\n * @example\n * ```tsx\n * const [containerRef, { width, height }] = useElementSize<HTMLDivElement>();\n * return <div ref={containerRef} className=\"size-full\">…</div>;\n * ```\n */\nexport function useElementSize<T extends HTMLElement = HTMLDivElement>(): [\n  React.RefObject<T | null>,\n  ElementSize,\n] {\n  const ref = useRef<T>(null);\n  const [size, setSize] = useState<ElementSize>({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element || typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n      const width = Math.round(entry.contentRect.width);\n      const height = Math.round(entry.contentRect.height);\n      // Bail on identical measurements so consumers driving Plotly layout off\n      // this size don't trigger a redundant relayout (and a feedback loop).\n      setSize((prev) =>\n        prev.width === width && prev.height === height ? prev : { width, height },\n      );\n    });\n\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return [ref, size];\n}\n"],"names":["useElementSize","ref","useRef","size","setSize","useState","useEffect","element","observer","entries","entry","width","height","prev"],"mappings":"yGAwBO,SAASA,GAGd,CACA,MAAMC,EAAMC,EAAAA,OAAU,IAAI,EACpB,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAsB,CAAE,MAAO,EAAG,OAAQ,EAAG,EAErEC,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAUN,EAAI,QACpB,GAAI,CAACM,GAAW,OAAO,eAAmB,IAAa,OAEvD,MAAMC,EAAW,IAAI,eAAgBC,GAAY,CAC/C,MAAMC,EAAQD,EAAQ,CAAC,EACvB,GAAI,CAACC,EAAO,OACZ,MAAMC,EAAQ,KAAK,MAAMD,EAAM,YAAY,KAAK,EAC1CE,EAAS,KAAK,MAAMF,EAAM,YAAY,MAAM,EAGlDN,EAASS,GACPA,EAAK,QAAUF,GAASE,EAAK,SAAWD,EAASC,EAAO,CAAE,MAAAF,EAAO,OAAAC,CAAA,CAAO,CAE5E,CAAC,EAED,OAAAJ,EAAS,QAAQD,CAAO,EACjB,IAAMC,EAAS,WAAA,CACxB,EAAG,CAAA,CAAE,EAEE,CAACP,EAAKE,CAAI,CACnB"}

package/dist/hooks/use-element-size.js

@@ -0,0 +1,21 @@
+import { useRef as f, useState as d, useEffect as w } from "react";
+function R() {
+  const n = f(null), [c, h] = d({ width: 0, height: 0 });
+  return w(() => {
+    const r = n.current;
+    if (!r || typeof ResizeObserver > "u") return;
+    const s = new ResizeObserver((u) => {
+      const e = u[0];
+      if (!e) return;
+      const i = Math.round(e.contentRect.width), o = Math.round(e.contentRect.height);
+      h(
+        (t) => t.width === i && t.height === o ? t : { width: i, height: o }
+      );
+    });
+    return s.observe(r), () => s.disconnect();
+  }, []), [n, c];
+}
+export {
+  R as useElementSize
+};
+//# sourceMappingURL=use-element-size.js.map

package/dist/hooks/use-element-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-size.js","sources":["../../src/hooks/use-element-size.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/** Element dimensions in CSS pixels, rounded to whole numbers. */\nexport interface ElementSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Observe an element's content-box size with a `ResizeObserver` and return the\n * latest rounded `{ width, height }`.\n *\n * Attach the returned `ref` to the element whose size should drive layout\n * (e.g. the flex/grid cell a chart needs to fill). The size is `{ 0, 0 }` until\n * the first measurement, and stays `{ 0, 0 }` in environments without a\n * `ResizeObserver` (e.g. SSR), so callers should treat a zero dimension as\n * \"not yet measured\" and skip work that needs real pixels.\n *\n * @example\n * ```tsx\n * const [containerRef, { width, height }] = useElementSize<HTMLDivElement>();\n * return <div ref={containerRef} className=\"size-full\">…</div>;\n * ```\n */\nexport function useElementSize<T extends HTMLElement = HTMLDivElement>(): [\n  React.RefObject<T | null>,\n  ElementSize,\n] {\n  const ref = useRef<T>(null);\n  const [size, setSize] = useState<ElementSize>({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element || typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n      const width = Math.round(entry.contentRect.width);\n      const height = Math.round(entry.contentRect.height);\n      // Bail on identical measurements so consumers driving Plotly layout off\n      // this size don't trigger a redundant relayout (and a feedback loop).\n      setSize((prev) =>\n        prev.width === width && prev.height === height ? prev : { width, height },\n      );\n    });\n\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return [ref, size];\n}\n"],"names":["useElementSize","ref","useRef","size","setSize","useState","useEffect","element","observer","entries","entry","width","height","prev"],"mappings":";AAwBO,SAASA,IAGd;AACA,QAAMC,IAAMC,EAAU,IAAI,GACpB,CAACC,GAAMC,CAAO,IAAIC,EAAsB,EAAE,OAAO,GAAG,QAAQ,GAAG;AAErE,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAUN,EAAI;AACpB,QAAI,CAACM,KAAW,OAAO,iBAAmB,IAAa;AAEvD,UAAMC,IAAW,IAAI,eAAe,CAACC,MAAY;AAC/C,YAAMC,IAAQD,EAAQ,CAAC;AACvB,UAAI,CAACC,EAAO;AACZ,YAAMC,IAAQ,KAAK,MAAMD,EAAM,YAAY,KAAK,GAC1CE,IAAS,KAAK,MAAMF,EAAM,YAAY,MAAM;AAGlD,MAAAN;AAAA,QAAQ,CAACS,MACPA,EAAK,UAAUF,KAASE,EAAK,WAAWD,IAASC,IAAO,EAAE,OAAAF,GAAO,QAAAC,EAAA;AAAA,MAAO;AAAA,IAE5E,CAAC;AAED,WAAAJ,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EACxB,GAAG,CAAA,CAAE,GAEE,CAACP,GAAKE,CAAI;AACnB;"}