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

package/dist/components/charts/LineGraph/LineGraph.js

@@ -1,61 +1,65 @@
-import { jsxs as v, jsx as X } from "react/jsx-runtime";
-import A from "plotly.js-dist";
-import { useRef as O, 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 G } from "../../../utils/colors.js";
-const Y = 60, j = 30, K = ({
-  dataSeries: s,
-  width: b = 1e3,
-  height: _ = 600,
-  xRange: M,
-  yRange: m,
-  variant: f = "lines",
-  xTitle: x = "Columns",
-  yTitle: k = "Rows",
-  title: h,
-  xTickText: d
+import { jsxs as W, jsx as D } from "react/jsx-runtime";
+import C from "plotly.js-dist";
+import { useRef as b, useMemo as m, useEffect as R } 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 Q = 60, Z = 30, st = ({
+  dataSeries: c,
+  width: N,
+  height: L,
+  xRange: _,
+  yRange: u,
+  variant: d = "lines",
+  xTitle: E,
+  yTitle: I,
+  title: g,
+  xTickText: y
 }) => {
-  const p = O(null), r = B(), { bindTooltip: E, tooltipElement: P } = V({ xLabel: x, yLabel: k }), { yMin: I, yMax: C } = c(() => {
-    let t = Number.MAX_VALUE, o = Number.MIN_VALUE, l = Number.MAX_VALUE, e = Number.MIN_VALUE;
-    s.forEach((a) => {
-      a.x.forEach((u) => {
-        t = Math.min(t, u), o = Math.max(o, u);
-      }), a.y.forEach((u) => {
-        l = Math.min(l, u), e = Math.max(e, u);
+  const a = b(null), r = F(), { bindTooltip: A, tooltipElement: Y } = T({ xLabel: E, yLabel: I }), [j, P] = q(), l = N ?? P.width, s = L ?? P.height, X = l > 0 && s > 0, H = N === void 0, S = L === void 0, w = b({ width: l, height: s });
+  w.current = { width: l, height: s };
+  const v = b(!1), M = b({ width: 0, height: 0 }), { yMin: O, yMax: U } = m(() => {
+    let e = Number.MAX_VALUE, t = Number.MIN_VALUE, i = Number.MAX_VALUE, o = Number.MIN_VALUE;
+    c.forEach((f) => {
+      f.x.forEach((p) => {
+        e = Math.min(e, p), t = Math.max(t, p);
+      }), f.y.forEach((p) => {
+        i = Math.min(i, p), o = Math.max(o, p);
       });
     });
-    const n = (o - t) * 0.1, g = (e - l) * 0.1;
+    const n = (t - e) * 0.1, k = (o - i) * 0.1;
     return {
-      xMin: t - n,
-      xMax: o + n,
-      yMin: l - g,
-      yMax: e + g
+      xMin: e - n,
+      xMax: t + n,
+      yMin: i - k,
+      yMax: o + k
     };
-  }, [s]), i = c(
-    () => m || [I, C],
-    [m, I, C]
-  ), N = c(() => {
-    const t = i[1] - i[0];
-    let o = Math.pow(10, Math.floor(Math.log10(t)));
-    t / o > 10 && (o = o * 2), t / o < 4 && (o = o / 2);
-    const l = [];
-    let e = Math.ceil(i[0] / o) * o;
-    for (; e <= i[1]; )
-      l.push(e), e += o;
-    return l;
-  }, [i]), y = c(
-    () => [...new Set(s.flatMap((t) => t.x))].sort((t, o) => t - o),
-    [s]
-  ), L = !!d && d.length === y.length, z = c(() => {
-    switch (f) {
+  }, [c]), h = m(
+    () => u || [O, U],
+    [u, O, U]
+  ), V = m(() => {
+    const e = h[1] - h[0];
+    let t = Math.pow(10, Math.floor(Math.log10(e)));
+    e / t > 10 && (t = t * 2), e / t < 4 && (t = t / 2);
+    const i = [];
+    let o = Math.ceil(h[0] / t) * t;
+    for (; o <= h[1]; )
+      i.push(o), o += t;
+    return i;
+  }, [h]), x = m(
+    () => [...new Set(c.flatMap((e) => e.x))].sort((e, t) => e - t),
+    [c]
+  ), B = !!y && y.length === x.length, G = m(() => {
+    switch (d) {
       case "lines+markers":
       case "lines+markers+error_bars":
         return "lines+markers";
       default:
         return "lines";
     }
-  }, [f]), w = c(
+  }, [d]), z = m(
     () => ({
       tickcolor: r.tickColor,
       ticklen: 12,
@@ -74,39 +78,39 @@ const Y = 60, j = 30, K = ({
     }),
     [r]
   );
-  return U(() => {
-    if (!p.current) return;
-    const t = s.map((n, g) => {
-      const a = G(g, n.color);
+  return R(() => {
+    if (!a.current || !X) return;
+    const e = c.map((n, k) => {
+      const f = K(k, n.color);
       return {
         x: n.x,
         y: n.y,
         type: "scatter",
-        mode: z,
+        mode: G,
         name: n.name,
         hoverinfo: "none",
         line: {
-          color: a,
+          color: f,
           width: 1.5
         },
-        marker: f === "lines" ? { opacity: 0 } : {
-          color: a,
+        marker: d === "lines" ? { opacity: 0 } : {
+          color: f,
           size: 8,
           symbol: n.symbol || "triangle-up"
         },
-        error_y: f === "lines+markers+error_bars" ? n.error_y || {
+        error_y: d === "lines+markers+error_bars" ? n.error_y || {
           type: "data",
           array: n.y.map(() => 10),
           visible: !0,
-          color: a,
+          color: f,
           thickness: 1,
           width: 5
         } : void 0
       };
-    }), o = {
-      ...h ? {
+    }), t = {
+      ...g ? {
         title: {
-          text: h,
+          text: g,
           font: {
             size: 32,
             family: "Inter, sans-serif",
@@ -114,13 +118,15 @@ const Y = 60, j = 30, K = ({
           }
         }
       } : {},
-      width: b,
-      height: _,
+      width: w.current.width,
+      height: w.current.height,
       margin: {
         l: 80,
         r: 30,
-        b: 80,
-        t: h ? Y : j,
+        // Reserve room for tick labels, the x-axis title, and the
+        // container-anchored bottom legend stacked beneath them.
+        b: 96,
+        t: g ? Q : Z,
         pad: 10
       },
       paper_bgcolor: r.paperBg,
@@ -131,7 +137,7 @@ const Y = 60, j = 30, K = ({
       dragmode: !1,
       xaxis: {
         title: {
-          text: x,
+          text: E,
           font: {
             size: 16,
             color: r.textSecondary,
@@ -141,17 +147,20 @@ const Y = 60, j = 30, K = ({
           standoff: 32
         },
         gridcolor: r.gridColor,
-        range: M,
-        autorange: !M,
+        range: _,
+        autorange: !_,
         tickmode: "array",
-        tickvals: y,
-        ticktext: L ? d : y.map(String),
+        tickvals: x,
+        ticktext: B ? y : x.map(String),
         showgrid: !0,
-        ...w
+        // Reserve space for tick labels + the axis title so the bottom legend
+        // can't overlap them at small sizes (SW-2157).
+        automargin: !0,
+        ...z
       },
       yaxis: {
         title: {
-          text: k,
+          text: I,
           font: {
             size: 16,
             color: r.textSecondary,
@@ -161,18 +170,23 @@ const Y = 60, j = 30, K = ({
           standoff: 30
         },
         gridcolor: r.gridColor,
-        range: m,
-        autorange: !m,
+        range: u,
+        autorange: !u,
         tickmode: "array",
-        tickvals: N,
+        tickvals: V,
         showgrid: !0,
-        ...w
+        automargin: !0,
+        ...z
       },
       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,
@@ -182,22 +196,30 @@ const Y = 60, j = 30, K = ({
         }
       },
       showlegend: !0
-    }, l = {
-      responsive: !0,
+    }, i = {
+      // 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
     };
-    A.newPlot(p.current, t, o, l), E(p.current);
-    const e = p.current;
-    return () => {
-      e && A.purge(e);
+    C.newPlot(a.current, e, t, i), A(a.current);
+    const o = a.current;
+    return v.current = !0, M.current = { ...w.current }, () => {
+      o && (C.purge(o), v.current = !1);
     };
-  }, [s, b, _, M, m, x, k, h, z, w, y, N, L, d, i, f, r, E]), /* @__PURE__ */ v("div", { className: "relative size-full", children: [
-    /* @__PURE__ */ X("div", { ref: p, style: { width: "100%", height: "100%" } }),
-    P
+  }, [c, X, _, u, E, I, g, G, z, x, V, B, y, h, d, r, A]), R(() => {
+    const e = a.current;
+    !e || !v.current || l <= 0 || s <= 0 || M.current.width === l && M.current.height === s || (M.current = { width: l, height: s }, C.relayout(e, { width: l, height: s }).catch(
+      () => {
+      }
+    ));
+  }, [l, s]), /* @__PURE__ */ W("div", { ref: j, className: J("relative", H && "w-full", S && "h-full"), children: [
+    /* @__PURE__ */ D("div", { ref: a, style: { width: "100%", height: "100%" } }),
+    Y
   ] });
 };
 export {
-  K as LineGraph
+  st as LineGraph
 };
 //# sourceMappingURL=LineGraph.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LineGraph.js","sources":["../../../../src/components/charts/LineGraph/LineGraph.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\ntype MarkerSymbol =\n  | \"circle\"\n  | \"circle-open\"\n  | \"circle-dot\"\n  | \"circle-open-dot\"\n  | \"square\"\n  | \"square-open\"\n  | \"square-dot\"\n  | \"square-open-dot\"\n  | \"diamond\"\n  | \"diamond-open\"\n  | \"diamond-dot\"\n  | \"diamond-open-dot\"\n  | \"cross\"\n  | \"cross-open\"\n  | \"cross-dot\"\n  | \"cross-open-dot\"\n  | \"x\"\n  | \"x-open\"\n  | \"x-dot\"\n  | \"x-open-dot\"\n  | \"triangle-up\"\n  | \"triangle-up-open\"\n  | \"triangle-up-dot\"\n  | \"triangle-up-open-dot\"\n  | \"triangle-down\"\n  | \"triangle-down-open\"\n  | \"triangle-down-dot\"\n  | \"triangle-down-open-dot\"\n  | \"triangle-left\"\n  | \"triangle-left-open\"\n  | \"triangle-left-dot\"\n  | \"triangle-left-open-dot\"\n  | \"triangle-right\"\n  | \"triangle-right-open\"\n  | \"triangle-right-dot\"\n  | \"triangle-right-open-dot\"\n  | \"triangle-ne\"\n  | \"triangle-ne-open\"\n  | \"triangle-ne-dot\"\n  | \"triangle-ne-open-dot\"\n  | \"triangle-se\"\n  | \"triangle-se-open\"\n  | \"triangle-se-dot\"\n  | \"triangle-se-open-dot\"\n  | \"triangle-sw\"\n  | \"triangle-sw-open\"\n  | \"triangle-sw-dot\"\n  | \"triangle-sw-open-dot\"\n  | \"triangle-nw\"\n  | \"triangle-nw-open\"\n  | \"triangle-nw-dot\"\n  | \"triangle-nw-open-dot\"\n  | \"pentagon\"\n  | \"pentagon-open\"\n  | \"pentagon-dot\"\n  | \"pentagon-open-dot\"\n  | \"hexagon\"\n  | \"hexagon-open\"\n  | \"hexagon-dot\"\n  | \"hexagon-open-dot\"\n  | \"hexagon2\"\n  | \"hexagon2-open\"\n  | \"hexagon2-dot\"\n  | \"hexagon2-open-dot\"\n  | \"octagon\"\n  | \"octagon-open\"\n  | \"octagon-dot\"\n  | \"octagon-open-dot\"\n  | \"star\"\n  | \"star-open\"\n  | \"star-dot\"\n  | \"star-open-dot\"\n  | \"hexagram\"\n  | \"hexagram-open\"\n  | \"hexagram-dot\"\n  | \"hexagram-open-dot\"\n  | \"star-triangle-up\"\n  | \"star-triangle-up-open\"\n  | \"star-triangle-up-dot\"\n  | \"star-triangle-up-open-dot\"\n  | \"star-triangle-down\"\n  | \"star-triangle-down-open\"\n  | \"star-triangle-down-dot\"\n  | \"star-triangle-down-open-dot\"\n  | \"star-square\"\n  | \"star-square-open\"\n  | \"star-square-dot\"\n  | \"star-square-open-dot\"\n  | \"star-diamond\"\n  | \"star-diamond-open\"\n  | \"star-diamond-dot\"\n  | \"star-diamond-open-dot\"\n  | \"diamond-tall\"\n  | \"diamond-tall-open\"\n  | \"diamond-tall-dot\"\n  | \"diamond-tall-open-dot\"\n  | \"diamond-wide\"\n  | \"diamond-wide-open\"\n  | \"diamond-wide-dot\"\n  | \"diamond-wide-open-dot\"\n  | \"hourglass\"\n  | \"hourglass-open\"\n  | \"bowtie\"\n  | \"bowtie-open\"\n  | \"circle-cross\"\n  | \"circle-cross-open\"\n  | \"circle-x\"\n  | \"circle-x-open\"\n  | \"square-cross\"\n  | \"square-cross-open\"\n  | \"square-x\"\n  | \"square-x-open\"\n  | \"diamond-cross\"\n  | \"diamond-cross-open\"\n  | \"diamond-x\"\n  | \"diamond-x-open\"\n  | \"cross-thin\"\n  | \"cross-thin-open\"\n  | \"x-thin\"\n  | \"x-thin-open\"\n  | \"asterisk\"\n  | \"asterisk-open\"\n  | \"hash\"\n  | \"hash-open\"\n  | \"hash-dot\"\n  | \"hash-open-dot\"\n  | \"y-up\"\n  | \"y-up-open\"\n  | \"y-down\"\n  | \"y-down-open\"\n  | \"y-left\"\n  | \"y-left-open\"\n  | \"y-right\"\n  | \"y-right-open\"\n  | \"line-ew\"\n  | \"line-ew-open\"\n  | \"line-ns\"\n  | \"line-ns-open\"\n  | \"line-ne\"\n  | \"line-ne-open\"\n  | \"line-nw\"\n  | \"line-nw-open\"\n  | \"arrow\"\n  | \"arrow-open\"\n  | \"arrow-wide\"\n  | \"arrow-wide-open\";\n\ninterface LineDataSeries {\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  symbol?: MarkerSymbol;\n  error_y?: {\n    type: \"data\";\n    array: number[];\n    visible: boolean;\n  };\n}\n\ntype LineGraphVariant = \"lines\" | \"lines+markers\" | \"lines+markers+error_bars\";\n\n/** Top margin reserving room for the 32px title; reduced when no title is set */\nconst TITLE_MARGIN_TOP = 60;\nconst NO_TITLE_MARGIN_TOP = 30;\n\ntype LineGraphProps = {\n  dataSeries: LineDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: LineGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  /**\n   * Categorical labels for the x-axis ticks. When provided, the x data values\n   * still drive line positioning but the displayed tick labels match these\n   * strings in order (e.g. [\"Mon\", \"Tue\", …]). Should align 1:1 with the\n   * unique, ordered x values across all series.\n   */\n  xTickText?: string[];\n};\n\nconst LineGraph: React.FC<LineGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"lines\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title,\n  xTickText,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  const { 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 effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\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 xTicks = useMemo(\n    () => [...new Set(dataSeries.flatMap((s) => s.x))].sort((a, b) => a - b),\n    [dataSeries],\n  );\n\n  // Only apply categorical labels when they align 1:1 with the tick positions;\n  // a mismatch would silently mis-label ticks, so fall back to numeric ticks.\n  const useCategoricalX = !!xTickText && xTickText.length === xTicks.length;\n\n  const mode = useMemo((): \"lines\" | \"lines+markers\" => {\n    switch (variant) {\n      case \"lines+markers\":\n      case \"lines+markers+error_bars\":\n        return \"lines+markers\";\n      default:\n        return \"lines\";\n    }\n  }, [variant]);\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      const color = seriesColor(index, series.color);\n      return {\n        x: series.x,\n        y: series.y,\n        type: \"scatter\" as const,\n        mode: mode,\n        name: series.name,\n        hoverinfo: \"none\" as const,\n        line: {\n          color,\n          width: 1.5,\n        },\n        marker:\n          variant === \"lines\"\n            ? { opacity: 0 }\n            : {\n                color,\n                size: 8,\n                symbol: series.symbol || \"triangle-up\",\n              },\n        error_y:\n          variant === \"lines+markers+error_bars\"\n            ? series.error_y || {\n                type: \"data\" as const,\n                array: series.y.map(() => 10),\n                visible: true,\n                color,\n                thickness: 1,\n                width: 5,\n              }\n            : undefined,\n      };\n    });\n\n    const layout = {\n      ...(title\n        ? {\n            title: {\n              text: title,\n              font: {\n                size: 32,\n                family: \"Inter, sans-serif\",\n                color: theme.textColor,\n              },\n            },\n          }\n        : {}),\n      width,\n      height,\n      margin: {\n        l: 80,\n        r: 30,\n        b: 80,\n        t: title ? TITLE_MARGIN_TOP : NO_TITLE_MARGIN_TOP,\n        pad: 10,\n      },\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: useCategoricalX ? xTickText : 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    };\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    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, useCategoricalX, xTickText, effectiveYRange, variant, 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 { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["TITLE_MARGIN_TOP","NO_TITLE_MARGIN_TOP","LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","xTickText","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","a","b","useCategoricalX","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"LineGraph.js","sources":["../../../../src/components/charts/LineGraph/LineGraph.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\ntype MarkerSymbol =\n  | \"circle\"\n  | \"circle-open\"\n  | \"circle-dot\"\n  | \"circle-open-dot\"\n  | \"square\"\n  | \"square-open\"\n  | \"square-dot\"\n  | \"square-open-dot\"\n  | \"diamond\"\n  | \"diamond-open\"\n  | \"diamond-dot\"\n  | \"diamond-open-dot\"\n  | \"cross\"\n  | \"cross-open\"\n  | \"cross-dot\"\n  | \"cross-open-dot\"\n  | \"x\"\n  | \"x-open\"\n  | \"x-dot\"\n  | \"x-open-dot\"\n  | \"triangle-up\"\n  | \"triangle-up-open\"\n  | \"triangle-up-dot\"\n  | \"triangle-up-open-dot\"\n  | \"triangle-down\"\n  | \"triangle-down-open\"\n  | \"triangle-down-dot\"\n  | \"triangle-down-open-dot\"\n  | \"triangle-left\"\n  | \"triangle-left-open\"\n  | \"triangle-left-dot\"\n  | \"triangle-left-open-dot\"\n  | \"triangle-right\"\n  | \"triangle-right-open\"\n  | \"triangle-right-dot\"\n  | \"triangle-right-open-dot\"\n  | \"triangle-ne\"\n  | \"triangle-ne-open\"\n  | \"triangle-ne-dot\"\n  | \"triangle-ne-open-dot\"\n  | \"triangle-se\"\n  | \"triangle-se-open\"\n  | \"triangle-se-dot\"\n  | \"triangle-se-open-dot\"\n  | \"triangle-sw\"\n  | \"triangle-sw-open\"\n  | \"triangle-sw-dot\"\n  | \"triangle-sw-open-dot\"\n  | \"triangle-nw\"\n  | \"triangle-nw-open\"\n  | \"triangle-nw-dot\"\n  | \"triangle-nw-open-dot\"\n  | \"pentagon\"\n  | \"pentagon-open\"\n  | \"pentagon-dot\"\n  | \"pentagon-open-dot\"\n  | \"hexagon\"\n  | \"hexagon-open\"\n  | \"hexagon-dot\"\n  | \"hexagon-open-dot\"\n  | \"hexagon2\"\n  | \"hexagon2-open\"\n  | \"hexagon2-dot\"\n  | \"hexagon2-open-dot\"\n  | \"octagon\"\n  | \"octagon-open\"\n  | \"octagon-dot\"\n  | \"octagon-open-dot\"\n  | \"star\"\n  | \"star-open\"\n  | \"star-dot\"\n  | \"star-open-dot\"\n  | \"hexagram\"\n  | \"hexagram-open\"\n  | \"hexagram-dot\"\n  | \"hexagram-open-dot\"\n  | \"star-triangle-up\"\n  | \"star-triangle-up-open\"\n  | \"star-triangle-up-dot\"\n  | \"star-triangle-up-open-dot\"\n  | \"star-triangle-down\"\n  | \"star-triangle-down-open\"\n  | \"star-triangle-down-dot\"\n  | \"star-triangle-down-open-dot\"\n  | \"star-square\"\n  | \"star-square-open\"\n  | \"star-square-dot\"\n  | \"star-square-open-dot\"\n  | \"star-diamond\"\n  | \"star-diamond-open\"\n  | \"star-diamond-dot\"\n  | \"star-diamond-open-dot\"\n  | \"diamond-tall\"\n  | \"diamond-tall-open\"\n  | \"diamond-tall-dot\"\n  | \"diamond-tall-open-dot\"\n  | \"diamond-wide\"\n  | \"diamond-wide-open\"\n  | \"diamond-wide-dot\"\n  | \"diamond-wide-open-dot\"\n  | \"hourglass\"\n  | \"hourglass-open\"\n  | \"bowtie\"\n  | \"bowtie-open\"\n  | \"circle-cross\"\n  | \"circle-cross-open\"\n  | \"circle-x\"\n  | \"circle-x-open\"\n  | \"square-cross\"\n  | \"square-cross-open\"\n  | \"square-x\"\n  | \"square-x-open\"\n  | \"diamond-cross\"\n  | \"diamond-cross-open\"\n  | \"diamond-x\"\n  | \"diamond-x-open\"\n  | \"cross-thin\"\n  | \"cross-thin-open\"\n  | \"x-thin\"\n  | \"x-thin-open\"\n  | \"asterisk\"\n  | \"asterisk-open\"\n  | \"hash\"\n  | \"hash-open\"\n  | \"hash-dot\"\n  | \"hash-open-dot\"\n  | \"y-up\"\n  | \"y-up-open\"\n  | \"y-down\"\n  | \"y-down-open\"\n  | \"y-left\"\n  | \"y-left-open\"\n  | \"y-right\"\n  | \"y-right-open\"\n  | \"line-ew\"\n  | \"line-ew-open\"\n  | \"line-ns\"\n  | \"line-ns-open\"\n  | \"line-ne\"\n  | \"line-ne-open\"\n  | \"line-nw\"\n  | \"line-nw-open\"\n  | \"arrow\"\n  | \"arrow-open\"\n  | \"arrow-wide\"\n  | \"arrow-wide-open\";\n\ninterface LineDataSeries {\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  symbol?: MarkerSymbol;\n  error_y?: {\n    type: \"data\";\n    array: number[];\n    visible: boolean;\n  };\n}\n\ntype LineGraphVariant = \"lines\" | \"lines+markers\" | \"lines+markers+error_bars\";\n\n/** Top margin reserving room for the 32px title; reduced when no title is set */\nconst TITLE_MARGIN_TOP = 60;\nconst NO_TITLE_MARGIN_TOP = 30;\n\ntype LineGraphProps = {\n  dataSeries: LineDataSeries[];\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  variant?: LineGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  /**\n   * Categorical labels for the x-axis ticks. When provided, the x data values\n   * still drive line positioning but the displayed tick labels match these\n   * strings in order (e.g. [\"Mon\", \"Tue\", …]). Should align 1:1 with the\n   * unique, ordered x values across all series.\n   */\n  xTickText?: string[];\n};\n\nconst LineGraph: React.FC<LineGraphProps> = ({\n  dataSeries,\n  width,\n  height,\n  xRange,\n  yRange,\n  variant = \"lines\",\n  xTitle,\n  yTitle,\n  title,\n  xTickText,\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 { 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 effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\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 xTicks = useMemo(\n    () => [...new Set(dataSeries.flatMap((s) => s.x))].sort((a, b) => a - b),\n    [dataSeries],\n  );\n\n  // Only apply categorical labels when they align 1:1 with the tick positions;\n  // a mismatch would silently mis-label ticks, so fall back to numeric ticks.\n  const useCategoricalX = !!xTickText && xTickText.length === xTicks.length;\n\n  const mode = useMemo((): \"lines\" | \"lines+markers\" => {\n    switch (variant) {\n      case \"lines+markers\":\n      case \"lines+markers+error_bars\":\n        return \"lines+markers\";\n      default:\n        return \"lines\";\n    }\n  }, [variant]);\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      const color = seriesColor(index, series.color);\n      return {\n        x: series.x,\n        y: series.y,\n        type: \"scatter\" as const,\n        mode: mode,\n        name: series.name,\n        hoverinfo: \"none\" as const,\n        line: {\n          color,\n          width: 1.5,\n        },\n        marker:\n          variant === \"lines\"\n            ? { opacity: 0 }\n            : {\n                color,\n                size: 8,\n                symbol: series.symbol || \"triangle-up\",\n              },\n        error_y:\n          variant === \"lines+markers+error_bars\"\n            ? series.error_y || {\n                type: \"data\" as const,\n                array: series.y.map(() => 10),\n                visible: true,\n                color,\n                thickness: 1,\n                width: 5,\n              }\n            : undefined,\n      };\n    });\n\n    const layout = {\n      ...(title\n        ? {\n            title: {\n              text: title,\n              font: {\n                size: 32,\n                family: \"Inter, sans-serif\",\n                color: theme.textColor,\n              },\n            },\n          }\n        : {}),\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      margin: {\n        l: 80,\n        r: 30,\n        // Reserve room for tick labels, the x-axis title, and the\n        // container-anchored bottom legend stacked beneath them.\n        b: 96,\n        t: title ? TITLE_MARGIN_TOP : NO_TITLE_MARGIN_TOP,\n        pad: 10,\n      },\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: useCategoricalX ? xTickText : 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    };\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    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [dataSeries, hasSize, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, useCategoricalX, xTickText, effectiveYRange, variant, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/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 { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["TITLE_MARGIN_TOP","NO_TITLE_MARGIN_TOP","LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","xTickText","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","containerRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","a","b","useCategoricalX","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsxs","cn","jsx"],"mappings":"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"}

package/dist/components/charts/ScatterGraph/ScatterGraph.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),d=require("plotly.js-dist"),s=require("react"),q=require("../ChartTooltip/ChartTooltip.cjs"),A=require("../../../hooks/use-plotly-theme.cjs"),S=require("../../../utils/colors.cjs"),X=({dataSeries:y,width:w=1e3,height:b=600,xRange:f,yRange:u,xTitle:x="Columns",yTitle:M="Rows",title:v="Scatter Plot"})=>{const h=s.useRef(null),o=A.usePlotlyTheme(),{bindTooltip:C,tooltipElement:N}=q.useChartTooltip({xLabel:x,yLabel:M}),{xMin:E,xMax:z,yMin:I,yMax:P}=s.useMemo(()=>{let r=Number.MAX_VALUE,e=Number.MIN_VALUE,i=Number.MAX_VALUE,t=Number.MIN_VALUE;y.forEach(l=>{l.x.forEach(n=>{r=Math.min(r,n),e=Math.max(e,n)}),l.y.forEach(n=>{i=Math.min(i,n),t=Math.max(t,n)})});const m=(e-r)*.1,p=(t-i)*.1;return{xMin:r-m,xMax:e+m,yMin:i-p,yMax:t+p}},[y]),a=s.useMemo(()=>f||[E,z],[f,E,z]),c=s.useMemo(()=>u||[I,P],[u,I,P]),g=s.useMemo(()=>{const r=a[1]-a[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const i=[];let t=Math.ceil(a[0]/e)*e;for(;t<=a[1];)i.push(t),t+=e;return i},[a]),_=s.useMemo(()=>{const r=c[1]-c[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const i=[];let t=Math.ceil(c[0]/e)*e;for(;t<=c[1];)i.push(t),t+=e;return i},[c]),k=s.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:"Inter, sans-serif",weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return s.useEffect(()=>{if(!h.current)return;const r=y.map((l,n)=>({x:l.x,y:l.y,type:"scatter",mode:"markers",name:l.name,marker:{color:S.seriesColor(n,l.color),size:10,symbol:"circle"},hoverinfo:"none"})),e={title:{text:v,font:{size:32,family:"Inter, sans-serif",color:o.textColor}},width:w,height:b,margin:{l:80,r:30,b:80,t:60,pad:10},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:"Inter, sans-serif"},dragmode:!1,xaxis:{title:{text:x,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:32},gridcolor:o.gridColor,range:f,autorange:!f,tickmode:"array",tickvals:g,ticktext:g.map(String),showgrid:!0,...k},yaxis:{title:{text:M,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:30},gridcolor:o.gridColor,range:u,autorange:!u,tickmode:"array",tickvals:_,showgrid:!0,...k},legend:{x:.5,y:-.2,xanchor:"center",yanchor:"top",orientation:"h",font:{size:16,color:o.legendColor,family:"Inter, sans-serif",weight:500}},showlegend:!0,hovermode:"closest"},i={responsive:!0,displayModeBar:!1,displaylogo:!1};d.newPlot(h.current,r,e,i),C(h.current);const t=h.current,m=t,p={color:o.spikeColor,width:2};return m.on("plotly_hover",l=>{const n=l.points[0];n&&d.relayout(t,{shapes:[{type:"line",xref:"x",yref:"paper",x0:n.x,x1:n.x,y0:0,y1:1,line:p,layer:"below"},{type:"line",xref:"paper",yref:"y",x0:0,x1:1,y0:n.y,y1:n.y,line:p,layer:"below"}]})}),m.on("plotly_unhover",()=>{d.relayout(t,{shapes:[]})}),()=>{t&&d.purge(t)}},[y,w,b,f,u,x,M,v,a,c,g,_,k,o,C]),L.jsxs("div",{className:"relative size-full",children:[L.jsx("div",{ref:h,style:{width:"100%",height:"100%"}}),N]})};exports.ScatterGraph=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),g=require("plotly.js-dist"),s=require("react"),Y=require("../ChartTooltip/ChartTooltip.cjs"),G=require("../../../hooks/use-element-size.cjs"),H=require("../../../hooks/use-plotly-theme.cjs"),O=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),D=({dataSeries:x,width:C,height:I,xRange:d,yRange:m,xTitle:v,yTitle:k,title:S="Scatter Plot"})=>{const u=s.useRef(null),r=H.usePlotlyTheme(),{bindTooltip:q,tooltipElement:T}=Y.useChartTooltip({xLabel:v,yLabel:k}),[U,P]=G.useElementSize(),c=C??P.width,a=I??P.height,_=c>0&&a>0,V=C===void 0,B=I===void 0,M=s.useRef({width:c,height:a});M.current={width:c,height:a};const b=s.useRef(!1),w=s.useRef({width:0,height:0}),{xMin:L,xMax:N,yMin:A,yMax:R}=s.useMemo(()=>{let o=Number.MAX_VALUE,e=Number.MIN_VALUE,n=Number.MAX_VALUE,t=Number.MIN_VALUE;x.forEach(l=>{l.x.forEach(i=>{o=Math.min(o,i),e=Math.max(e,i)}),l.y.forEach(i=>{n=Math.min(n,i),t=Math.max(t,i)})});const p=(e-o)*.1,y=(t-n)*.1;return{xMin:o-p,xMax:e+p,yMin:n-y,yMax:t+y}},[x]),h=s.useMemo(()=>d||[L,N],[d,L,N]),f=s.useMemo(()=>m||[A,R],[m,A,R]),E=s.useMemo(()=>{const o=h[1]-h[0];let e=Math.pow(10,Math.floor(Math.log10(o)));o/e>10&&(e=e*2),o/e<4&&(e=e/2);const n=[];let t=Math.ceil(h[0]/e)*e;for(;t<=h[1];)n.push(t),t+=e;return n},[h]),X=s.useMemo(()=>{const o=f[1]-f[0];let e=Math.pow(10,Math.floor(Math.log10(o)));o/e>10&&(e=e*2),o/e<4&&(e=e/2);const n=[];let t=Math.ceil(f[0]/e)*e;for(;t<=f[1];)n.push(t),t+=e;return n},[f]),z=s.useMemo(()=>({tickcolor:r.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:r.textColor,family:"Inter, sans-serif",weight:400},linecolor:r.lineColor,linewidth:1,position:0,zeroline:!1}),[r]);return s.useEffect(()=>{if(!u.current||!_)return;const o=x.map((l,i)=>({x:l.x,y:l.y,type:"scatter",mode:"markers",name:l.name,marker:{color:W.seriesColor(i,l.color),size:10,symbol:"circle"},hoverinfo:"none"})),e={title:{text:S,font:{size:32,family:"Inter, sans-serif",color:r.textColor}},width:M.current.width,height:M.current.height,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:v,font:{size:16,color:r.textSecondary,family:"Inter, sans-serif",weight:400},standoff:32},gridcolor:r.gridColor,range:d,autorange:!d,tickmode:"array",tickvals:E,ticktext:E.map(String),showgrid:!0,automargin:!0,...z},yaxis:{title:{text:k,font:{size:16,color:r.textSecondary,family:"Inter, sans-serif",weight:400},standoff:30},gridcolor:r.gridColor,range:m,autorange:!m,tickmode:"array",tickvals:X,showgrid:!0,automargin:!0,...z},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:r.legendColor,family:"Inter, sans-serif",weight:500}},showlegend:!0,hovermode:"closest"},n={responsive:!1,displayModeBar:!1,displaylogo:!1};g.newPlot(u.current,o,e,n),q(u.current);const t=u.current;b.current=!0,w.current={...M.current};const p=t,y={color:r.spikeColor,width:2};return p.on("plotly_hover",l=>{const i=l.points[0];i&&g.relayout(t,{shapes:[{type:"line",xref:"x",yref:"paper",x0:i.x,x1:i.x,y0:0,y1:1,line:y,layer:"below"},{type:"line",xref:"paper",yref:"y",x0:0,x1:1,y0:i.y,y1:i.y,line:y,layer:"below"}]})}),p.on("plotly_unhover",()=>{g.relayout(t,{shapes:[]})}),()=>{t&&(g.purge(t),b.current=!1)}},[x,_,d,m,v,k,S,h,f,E,X,z,r,q]),s.useEffect(()=>{const o=u.current;!o||!b.current||c<=0||a<=0||w.current.width===c&&w.current.height===a||(w.current={width:c,height:a},g.relayout(o,{width:c,height:a}).catch(()=>{}))},[c,a]),j.jsxs("div",{ref:U,className:O.cn("relative",V&&"w-full",B&&"h-full"),children:[j.jsx("div",{ref:u,style:{width:"100%",height:"100%"}}),T]})};exports.ScatterGraph=D;
 //# sourceMappingURL=ScatterGraph.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScatterGraph.cjs","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.cjs","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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"}