@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.108.1 → 0.7.0-beta.129.1

package/dist/components/charts/LinePlot/LinePlot.js

@@ -0,0 +1,224 @@
+import { jsxs as S, jsx as W } from "react/jsx-runtime";
+import { useRef as b, useMemo as m, useEffect as B } from "react";
+import { useChartTooltip as D } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as q, getLoadedPlotly as H } from "../plotly-loader.js";
+import { useElementSize as J } from "../../../hooks/use-element-size.js";
+import { usePlotlyTheme as K, CHART_FONT_FAMILY as d } from "../../../hooks/use-plotly-theme.js";
+import { cn as Q } from "../../../lib/utils.js";
+import { seriesColor as Z } from "../../../utils/colors.js";
+const $ = 60, tt = 30, at = ({
+  dataSeries: h,
+  width: N,
+  height: A,
+  xRange: E,
+  yRange: g,
+  variant: p = "lines",
+  xTitle: v,
+  yTitle: z,
+  title: y,
+  xTickText: w
+}) => {
+  const a = b(null), o = K(), { bindTooltip: P, tooltipElement: T } = D({ xLabel: v, yLabel: z }), [j, I] = J(), c = N ?? I.width, s = A ?? I.height, O = c > 0 && s > 0, F = N === void 0, G = A === void 0, M = b({ width: c, height: s });
+  M.current = { width: c, height: s };
+  const C = b(!1), x = b({ width: 0, height: 0 }), { yMin: X, yMax: R } = m(() => {
+    let e = Number.MAX_VALUE, t = Number.MIN_VALUE, i = Number.MAX_VALUE, n = Number.MIN_VALUE;
+    h.forEach((_) => {
+      _.x.forEach((l) => {
+        e = Math.min(e, l), t = Math.max(t, l);
+      }), _.y.forEach((l) => {
+        i = Math.min(i, l), n = Math.max(n, l);
+      });
+    });
+    const u = (t - e) * 0.1, r = (n - i) * 0.1;
+    return {
+      xMin: e - u,
+      xMax: t + u,
+      yMin: i - r,
+      yMax: n + r
+    };
+  }, [h]), f = m(
+    () => g || [X, R],
+    [g, X, R]
+  ), U = m(() => {
+    const e = f[1] - f[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 n = Math.ceil(f[0] / t) * t;
+    for (; n <= f[1]; )
+      i.push(n), n += t;
+    return i;
+  }, [f]), k = m(
+    () => [...new Set(h.flatMap((e) => e.x))].sort((e, t) => e - t),
+    [h]
+  ), V = !!w && w.length === k.length, Y = m(() => {
+    switch (p) {
+      case "lines+markers":
+      case "lines+markers+error_bars":
+        return "lines+markers";
+      default:
+        return "lines";
+    }
+  }, [p]), L = m(
+    () => ({
+      tickcolor: o.tickColor,
+      ticklen: 12,
+      tickwidth: 1,
+      ticks: "outside",
+      tickfont: {
+        size: 16,
+        color: o.textColor,
+        family: d,
+        weight: 400
+      },
+      linecolor: o.lineColor,
+      linewidth: 1,
+      position: 0,
+      zeroline: !1
+    }),
+    [o]
+  );
+  return B(() => {
+    if (!a.current || !O) return;
+    const e = h.map((r, _) => {
+      const l = Z(_, r.color);
+      return {
+        x: r.x,
+        y: r.y,
+        type: "scatter",
+        mode: Y,
+        name: r.name,
+        hoverinfo: "none",
+        line: {
+          color: l,
+          width: 1.5
+        },
+        marker: p === "lines" ? { opacity: 0 } : {
+          color: l,
+          size: 8,
+          symbol: r.symbol || "triangle-up"
+        },
+        error_y: p === "lines+markers+error_bars" ? r.error_y || {
+          type: "data",
+          array: r.y.map(() => 10),
+          visible: !0,
+          color: l,
+          thickness: 1,
+          width: 5
+        } : void 0
+      };
+    }), t = {
+      ...y ? {
+        title: {
+          text: y,
+          font: {
+            size: 32,
+            family: d,
+            color: o.textColor
+          }
+        }
+      } : {},
+      width: M.current.width,
+      height: M.current.height,
+      margin: {
+        l: 80,
+        r: 30,
+        // Reserve room for tick labels, the x-axis title, and the
+        // container-anchored bottom legend stacked beneath them.
+        b: 96,
+        t: y ? $ : tt,
+        pad: 10
+      },
+      paper_bgcolor: o.paperBg,
+      plot_bgcolor: o.plotBg,
+      font: {
+        family: d
+      },
+      dragmode: !1,
+      xaxis: {
+        title: {
+          text: v,
+          font: {
+            size: 16,
+            color: o.textSecondary,
+            family: d,
+            weight: 400
+          },
+          standoff: 32
+        },
+        gridcolor: o.gridColor,
+        range: E,
+        autorange: !E,
+        tickmode: "array",
+        tickvals: k,
+        ticktext: V ? w : k.map(String),
+        showgrid: !0,
+        // Reserve space for tick labels + the axis title so the bottom legend
+        // can't overlap them at small sizes (SW-2157).
+        automargin: !0,
+        ...L
+      },
+      yaxis: {
+        title: {
+          text: z,
+          font: {
+            size: 16,
+            color: o.textSecondary,
+            family: d,
+            weight: 400
+          },
+          standoff: 30
+        },
+        gridcolor: o.gridColor,
+        range: g,
+        autorange: !g,
+        tickmode: "array",
+        tickvals: U,
+        showgrid: !0,
+        automargin: !0,
+        ...L
+      },
+      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,
+        xanchor: "center",
+        yanchor: "bottom",
+        yref: "container",
+        orientation: "h",
+        font: {
+          size: 16,
+          color: o.legendColor,
+          family: d,
+          weight: 500
+        }
+      },
+      showlegend: !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
+    };
+    let n = !1, u = null;
+    return q().then((r) => {
+      n || !a.current || (r.newPlot(a.current, e, t, i), P(a.current), u = a.current, C.current = !0, x.current = { ...M.current });
+    }), () => {
+      n = !0, u && (H().purge(u), C.current = !1);
+    };
+  }, [h, O, E, g, v, z, y, Y, L, k, U, V, w, f, p, o, P]), B(() => {
+    const e = a.current;
+    !e || !C.current || c <= 0 || s <= 0 || x.current.width === c && x.current.height === s || (x.current = { width: c, height: s }, H().relayout(e, { width: c, height: s }).catch(() => {
+    }));
+  }, [c, s]), /* @__PURE__ */ S("div", { ref: j, className: Q("relative", F && "w-full", G && "h-full"), children: [
+    /* @__PURE__ */ W("div", { ref: a, style: { width: "100%", height: "100%" } }),
+    T
+  ] });
+};
+export {
+  at as LinePlot
+};
+//# sourceMappingURL=LinePlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinePlot.js","sources":["../../../../src/components/charts/LinePlot/LinePlot.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, 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 LinePlotVariant = \"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 LinePlotProps = {\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?: LinePlotVariant;\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 LinePlot: React.FC<LinePlotProps> = ({\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 AreaPlot 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: CHART_FONT_FAMILY,\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: CHART_FONT_FAMILY,\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: CHART_FONT_FAMILY,\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\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: CHART_FONT_FAMILY,\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: CHART_FONT_FAMILY,\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 is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().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    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\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 { LinePlot };\nexport type { LineDataSeries, LinePlotVariant, LinePlotProps, MarkerSymbol };\n"],"names":["TITLE_MARGIN_TOP","NO_TITLE_MARGIN_TOP","LinePlot","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","CHART_FONT_FAMILY","useEffect","plotData","index","color","seriesColor","layout","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsxs","cn","jsx"],"mappings":";;;;;;;;AA+KA,MAAMA,IAAmB,IACnBC,KAAsB,IA6BtBC,KAAoC,CAAC;AAAA,EACzC,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAUC,EAAuB,IAAI,GACrCC,IAAQC,EAAA,GACR,EAAE,aAAAC,GAAa,gBAAAC,EAAA,IAAmBC,EAAgB,EAAE,QAAQV,GAAQ,QAAQC,GAAQ,GAIpF,CAACU,GAAcC,CAAQ,IAAIC,EAAA,GAC3BC,IAAgBnB,KAASiB,EAAS,OAClCG,IAAiBnB,KAAUgB,EAAS,QACpCI,IAAUF,IAAgB,KAAKC,IAAiB,GAGhDE,IAAYtB,MAAU,QACtBuB,IAAatB,MAAW,QACxBuB,IAAUd,EAAO,EAAE,OAAOS,GAAe,QAAQC,GAAgB;AACvE,EAAAI,EAAQ,UAAU,EAAE,OAAOL,GAAe,QAAQC,EAAA;AAClD,QAAMK,IAAgBf,EAAO,EAAK,GAG5BgB,IAAiBhB,EAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,GAE/C,EAAE,MAAAiB,GAAM,MAAAC,EAAA,IAASC,EAAQ,MAAM;AACnC,QAAIC,IAAO,OAAO,WACdC,IAAO,OAAO,WACdC,IAAO,OAAO,WACdC,IAAO,OAAO;AAElB,IAAAlC,EAAW,QAAQ,CAACmC,MAAW;AAC7B,MAAAA,EAAO,EAAE,QAAQ,CAACC,MAAM;AACtB,QAAAL,IAAO,KAAK,IAAIA,GAAMK,CAAC,GACvBJ,IAAO,KAAK,IAAIA,GAAMI,CAAC;AAAA,MACzB,CAAC,GACDD,EAAO,EAAE,QAAQ,CAACE,MAAM;AACtB,QAAAJ,IAAO,KAAK,IAAIA,GAAMI,CAAC,GACvBH,IAAO,KAAK,IAAIA,GAAMG,CAAC;AAAA,MACzB,CAAC;AAAA,IACH,CAAC;AAED,UAAMC,KAAYN,IAAOD,KAAQ,KAC3BQ,KAAYL,IAAOD,KAAQ;AAEjC,WAAO;AAAA,MACL,MAAMF,IAAOO;AAAA,MACb,MAAMN,IAAOM;AAAA,MACb,MAAML,IAAOM;AAAA,MACb,MAAML,IAAOK;AAAA,IAAA;AAAA,EAEjB,GAAG,CAACvC,CAAU,CAAC,GAETwC,IAAkBV;AAAA,IACtB,MAAM1B,KAAU,CAACwB,GAAMC,CAAI;AAAA,IAC3B,CAACzB,GAAQwB,GAAMC,CAAI;AAAA,EAAA,GAGfY,IAASX,EAAQ,MAAM;AAC3B,UAAMY,IAAQF,EAAgB,CAAC,IAAIA,EAAgB,CAAC;AACpD,QAAIG,IAAO,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,MAAMD,CAAK,CAAC,CAAC;AAErD,IAAIA,IAAQC,IAAO,OAAIA,IAAOA,IAAO,IACjCD,IAAQC,IAAO,MAAGA,IAAOA,IAAO;AAEpC,UAAMC,IAAQ,CAAA;AACd,QAAIC,IAAU,KAAK,KAAKL,EAAgB,CAAC,IAAIG,CAAI,IAAIA;AACrD,WAAOE,KAAWL,EAAgB,CAAC;AACjC,MAAAI,EAAM,KAAKC,CAAO,GAClBA,KAAWF;AAEb,WAAOC;AAAA,EACT,GAAG,CAACJ,CAAe,CAAC,GAEdM,IAAShB;AAAA,IACb,MAAM,CAAC,GAAG,IAAI,IAAI9B,EAAW,QAAQ,CAAC+C,MAAMA,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAACC,GAAGC,MAAMD,IAAIC,CAAC;AAAA,IACvE,CAACjD,CAAU;AAAA,EAAA,GAKPkD,IAAkB,CAAC,CAACzC,KAAaA,EAAU,WAAWqC,EAAO,QAE7DK,IAAOrB,EAAQ,MAAiC;AACpD,YAAQzB,GAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb,GAAG,CAACA,CAAO,CAAC,GAEN+C,IAActB;AAAA,IAClB,OAAO;AAAA,MACL,WAAWlB,EAAM;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAOA,EAAM;AAAA,QACb,QAAQyC;AAAA,QACR,QAAQ;AAAA,MAAA;AAAA,MAEV,WAAWzC,EAAM;AAAA,MACjB,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAK;AAAA,EAAA;AAGR,SAAA0C,EAAU,MAAM;AACd,QAAI,CAAC5C,EAAQ,WAAW,CAACY,EAAS;AAElC,UAAMiC,IAAWvD,EAAW,IAAI,CAACmC,GAAQqB,MAAU;AACjD,YAAMC,IAAQC,EAAYF,GAAOrB,EAAO,KAAK;AAC7C,aAAO;AAAA,QACL,GAAGA,EAAO;AAAA,QACV,GAAGA,EAAO;AAAA,QACV,MAAM;AAAA,QACN,MAAAgB;AAAA,QACA,MAAMhB,EAAO;AAAA,QACb,WAAW;AAAA,QACX,MAAM;AAAA,UACJ,OAAAsB;AAAA,UACA,OAAO;AAAA,QAAA;AAAA,QAET,QACEpD,MAAY,UACR,EAAE,SAAS,MACX;AAAA,UACE,OAAAoD;AAAA,UACA,MAAM;AAAA,UACN,QAAQtB,EAAO,UAAU;AAAA,QAAA;AAAA,QAEjC,SACE9B,MAAY,6BACR8B,EAAO,WAAW;AAAA,UAChB,MAAM;AAAA,UACN,OAAOA,EAAO,EAAE,IAAI,MAAM,EAAE;AAAA,UAC5B,SAAS;AAAA,UACT,OAAAsB;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,QAAA,IAET;AAAA,MAAA;AAAA,IAEV,CAAC,GAEKE,IAAS;AAAA,MACb,GAAInD,IACA;AAAA,QACE,OAAO;AAAA,UACL,MAAMA;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,QAAQ6C;AAAA,YACR,OAAOzC,EAAM;AAAA,UAAA;AAAA,QACf;AAAA,MACF,IAEF,CAAA;AAAA,MACJ,OAAOa,EAAQ,QAAQ;AAAA,MACvB,QAAQA,EAAQ,QAAQ;AAAA,MACxB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA;AAAA;AAAA,QAGH,GAAG;AAAA,QACH,GAAGjB,IAAQX,IAAmBC;AAAA,QAC9B,KAAK;AAAA,MAAA;AAAA,MAEP,eAAec,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,MAAM;AAAA,QACJ,QAAQyC;AAAA,MAAA;AAAA,MAEV,UAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAM/C;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOM,EAAM;AAAA,YACb,QAAQyC;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,WAAWzC,EAAM;AAAA,QACjB,OAAOT;AAAA,QACP,WAAW,CAACA;AAAA,QACZ,UAAU;AAAA,QACV,UAAU2C;AAAA,QACV,UAAUI,IAAkBzC,IAAYqC,EAAO,IAAI,MAAM;AAAA,QACzD,UAAU;AAAA;AAAA;AAAA,QAGV,YAAY;AAAA,QACZ,GAAGM;AAAA,MAAA;AAAA,MAEL,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAM7C;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOK,EAAM;AAAA,YACb,QAAQyC;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,WAAWzC,EAAM;AAAA,QACjB,OAAOR;AAAA,QACP,WAAW,CAACA;AAAA,QACZ,UAAU;AAAA,QACV,UAAUqC;AAAA,QACV,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,GAAGW;AAAA,MAAA;AAAA,MAEL,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA,QACN,aAAa;AAAA,QACb,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,OAAOxC,EAAM;AAAA,UACb,QAAQyC;AAAA,UACR,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAEF,YAAY;AAAA,IAAA,GAGRO,IAAS;AAAA;AAAA;AAAA,MAGb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAKf,QAAIC,IAAY,IACZC,IAAqC;AACzC,WAAKC,EAAA,EAAa,KAAK,CAACC,MAAW;AACjC,MAAIH,KAAa,CAACnD,EAAQ,YAC1BsD,EAAO,QAAQtD,EAAQ,SAAS6C,GAAUI,GAAQC,CAAM,GACxD9C,EAAYJ,EAAQ,OAAO,GAG3BoD,IAAcpD,EAAQ,SACtBgB,EAAc,UAAU,IACxBC,EAAe,UAAU,EAAE,GAAGF,EAAQ,QAAA;AAAA,IACxC,CAAC,GAEM,MAAM;AACX,MAAAoC,IAAY,IACRC,MACFG,EAAA,EAAkB,MAAMH,CAAW,GACnCpC,EAAc,UAAU;AAAA,IAE5B;AAAA,EACF,GAAG,CAAC1B,GAAYsB,GAASnB,GAAQC,GAAQE,GAAQC,GAAQC,GAAO2C,GAAMC,GAAaN,GAAQL,GAAQS,GAAiBzC,GAAW+B,GAAiBnC,GAASO,GAAOE,CAAW,CAAC,GAI5KwC,EAAU,MAAM;AACd,UAAMQ,IAAcpD,EAAQ;AAC5B,IAAI,CAACoD,KAAe,CAACpC,EAAc,WAAWN,KAAiB,KAAKC,KAAkB,KAMpFM,EAAe,QAAQ,UAAUP,KACjCO,EAAe,QAAQ,WAAWN,MAIpCM,EAAe,UAAU,EAAE,OAAOP,GAAe,QAAQC,EAAA,GAGpD4C,EAAA,EACF,SAASH,GAAa,EAAE,OAAO1C,GAAe,QAAQC,GAAgB,EACtE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EACnB,GAAG,CAACD,GAAeC,CAAc,CAAC,GAGhC,gBAAA6C,EAAC,OAAA,EAAI,KAAKjD,GAAc,WAAWkD,EAAG,YAAY5C,KAAa,UAAUC,KAAc,QAAQ,GAC7F,UAAA;AAAA,IAAA,gBAAA4C,EAAC,OAAA,EAAI,KAAK1D,GAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,EAAO,CAAG;AAAA,IAC5DK;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/charts/PieChart/PieChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),j=require("plotly.js-dist"),u=require("react"),N=require("../ChartTooltip/ChartTooltip.cjs"),P=require("../../../hooks/use-plotly-theme.cjs"),T=require("../../../utils/colors.cjs"),v=T.CHART_COLORS,R=({dataSeries:e,width:a=400,height:f=400,title:g,textInfo:x="percent",hole:h=0,rotation:d=0})=>{const r=u.useRef(null),i=P.usePlotlyTheme(),{bindTooltip:b,tooltipElement:w}=N.useChartTooltip({followCursor:!0}),m=u.useMemo(()=>{if(e.colors&&e.colors.length>=e.labels.length)return e.colors;const s=[...e.colors||[]],n=e.labels.length-s.length;if(n<=0)return s;for(let t=0;t<n;t++)s.push(v[t%v.length]);return s},[e.colors,e.labels.length]);u.useEffect(()=>{if(!r.current)return;const s=[{type:"pie",labels:e.labels,values:e.values,name:e.name,marker:{colors:m},textinfo:x,hoverinfo:"none",insidetextfont:{size:0,family:"Inter, sans-serif",color:"transparent"},hole:h,rotation:d}],n={width:a,height:f,font:{family:"Inter, sans-serif",color:i.textColor},showlegend:!1,margin:{l:40,r:40,b:40,t:40},paper_bgcolor:i.paperBg,plot_bgcolor:i.plotBg},t={responsive:!0,displayModeBar:!1,displaylogo:!1};j.newPlot(r.current,s,n,t),b(r.current);const c=r.current;return()=>{c&&j.purge(c)}},[m,e.labels,e.name,e.values,a,f,x,h,d,i,b]);const C=({labels:s,colors:n})=>{const t=s.map((o,p)=>l.jsx(u.Fragment,{children:l.jsxs("div",{className:"flex items-center text-[13px] leading-[18px] font-medium",children:[l.jsx("span",{"data-slot":"pie-legend-swatch",className:"mr-1.5 inline-block size-3 rounded-[4px]",style:{background:n[p]}}),o,p<s.length-1&&l.jsx("span",{className:"mx-3 inline-block h-6 w-0.5 bg-border"})]})},`${o}-${p}`)),c=6,y=[];for(let o=0;o<t.length;o+=c)y.push(l.jsx("div",{className:"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10",children:t.slice(o,o+c)},o));return l.jsx("div",{"data-slot":"pie-legend",className:"flex w-full flex-wrap text-foreground",children:y})};return l.jsxs("div",{className:"relative",style:{width:a},children:[l.jsxs("div",{className:"size-full",children:[g&&l.jsx("div",{className:"px-10 text-center",children:l.jsx("h2",{className:"m-0 text-[32px] leading-tight font-semibold",children:g})}),l.jsx("div",{ref:r,style:{width:"100%",height:"100%",margin:"0"}}),l.jsx(C,{labels:e.labels,colors:m})]}),w]})};exports.PieChart=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),a=require("react"),N=require("../ChartTooltip/ChartTooltip.cjs"),v=require("../plotly-loader.cjs"),g=require("../../../hooks/use-plotly-theme.cjs"),P=require("../../../utils/colors.cjs"),C=P.CHART_COLORS,R=({dataSeries:e,width:m=400,height:x=400,title:h,textInfo:d="percent",hole:b=0,rotation:y=0})=>{const n=a.useRef(null),u=g.usePlotlyTheme(),{bindTooltip:j,tooltipElement:w}=N.useChartTooltip({followCursor:!0}),p=a.useMemo(()=>{if(e.colors&&e.colors.length>=e.labels.length)return e.colors;const o=[...e.colors||[]],r=e.labels.length-o.length;if(r<=0)return o;for(let s=0;s<r;s++)o.push(C[s%C.length]);return o},[e.colors,e.labels.length]);a.useEffect(()=>{if(!n.current)return;const o=[{type:"pie",labels:e.labels,values:e.values,name:e.name,marker:{colors:p},textinfo:d,hoverinfo:"none",insidetextfont:{size:0,family:g.CHART_FONT_FAMILY,color:"transparent"},hole:b,rotation:y}],r={width:m,height:x,font:{family:g.CHART_FONT_FAMILY,color:u.textColor},showlegend:!1,margin:{l:40,r:40,b:40,t:40},paper_bgcolor:u.paperBg,plot_bgcolor:u.plotBg},s={responsive:!0,displayModeBar:!1,displaylogo:!1};let i=!1,c=null;return v.loadPlotly().then(t=>{i||!n.current||(t.newPlot(n.current,o,r,s),j(n.current),c=n.current)}),()=>{i=!0,c&&v.getLoadedPlotly().purge(c)}},[p,e.labels,e.name,e.values,m,x,d,b,y,u,j]);const T=({labels:o,colors:r})=>{const s=o.map((t,f)=>l.jsx(a.Fragment,{children:l.jsxs("div",{className:"flex items-center text-[13px] leading-[18px] font-medium",children:[l.jsx("span",{"data-slot":"pie-legend-swatch",className:"mr-1.5 inline-block size-3 rounded-[4px]",style:{background:r[f]}}),t,f<o.length-1&&l.jsx("span",{className:"mx-3 inline-block h-6 w-0.5 bg-border"})]})},`${t}-${f}`)),i=6,c=[];for(let t=0;t<s.length;t+=i)c.push(l.jsx("div",{className:"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10",children:s.slice(t,t+i)},t));return l.jsx("div",{"data-slot":"pie-legend",className:"flex w-full flex-wrap text-foreground",children:c})};return l.jsxs("div",{className:"relative",style:{width:m},children:[l.jsxs("div",{className:"size-full",children:[h&&l.jsx("div",{className:"px-10 text-center",children:l.jsx("h2",{className:"m-0 text-[32px] leading-tight font-semibold",children:h})}),l.jsx("div",{ref:n,style:{width:"100%",height:"100%",margin:"0"}}),l.jsx(T,{labels:e.labels,colors:p})]}),w]})};exports.PieChart=R;
 //# sourceMappingURL=PieChart.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.cjs","sources":["../../../../src/components/charts/PieChart/PieChart.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 { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title,\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\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  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={`${label}-${i}`}>\n        <div className=\"flex items-center text-[13px] leading-[18px] font-medium\">\n          <span\n            data-slot=\"pie-legend-swatch\"\n            className=\"mr-1.5 inline-block size-3 rounded-[4px]\"\n            style={{ background: colors[i] }}\n          />\n          {label}\n          {i < labels.length - 1 && (\n            <span className=\"mx-3 inline-block h-6 w-0.5 bg-border\" />\n          )}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div\n          className=\"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10\"\n          key={i}\n        >\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"pie-legend\" className=\"flex w-full flex-wrap text-foreground\">\n        {rows}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"relative\" style={{ width: width }}>\n      <div className=\"size-full\">\n        {title && (\n          <div className=\"px-10 text-center\">\n            <h2 className=\"m-0 text-[32px] leading-tight font-semibold\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","PieChartLegend","labels","items","label","jsx","React","jsxs","rowSize","rows"],"mappings":"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"}
+{"version":3,"file":"PieChart.cjs","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title,\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: CHART_FONT_FAMILY,\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: CHART_FONT_FAMILY,\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={`${label}-${i}`}>\n        <div className=\"flex items-center text-[13px] leading-[18px] font-medium\">\n          <span\n            data-slot=\"pie-legend-swatch\"\n            className=\"mr-1.5 inline-block size-3 rounded-[4px]\"\n            style={{ background: colors[i] }}\n          />\n          {label}\n          {i < labels.length - 1 && (\n            <span className=\"mx-3 inline-block h-6 w-0.5 bg-border\" />\n          )}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div\n          className=\"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10\"\n          key={i}\n        >\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"pie-legend\" className=\"flex w-full flex-wrap text-foreground\">\n        {rows}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"relative\" style={{ width: width }}>\n      <div className=\"size-full\">\n        {title && (\n          <div className=\"px-10 text-center\">\n            <h2 className=\"m-0 text-[32px] leading-tight font-semibold\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","CHART_FONT_FAMILY","layout","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","PieChartLegend","labels","items","label","jsx","React","jsxs","rowSize","rows"],"mappings":"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"}

package/dist/components/charts/PieChart/PieChart.js

@@ -1,76 +1,77 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import y from "plotly.js-dist";
-import N, { useRef as P, useMemo as R, useEffect as _ } from "react";
-import { useChartTooltip as k } from "../ChartTooltip/ChartTooltip.js";
-import { usePlotlyTheme as L } from "../../../hooks/use-plotly-theme.js";
-import { CHART_COLORS as T } from "../../../utils/colors.js";
-const w = T, F = ({
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import N, { useRef as _, useMemo as L, useEffect as P } from "react";
+import { useChartTooltip as R } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as T, getLoadedPlotly as k } from "../plotly-loader.js";
+import { usePlotlyTheme as O, CHART_FONT_FAMILY as y } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as z } from "../../../utils/colors.js";
+const w = z, H = ({
   dataSeries: e,
-  width: m = 400,
-  height: u = 400,
-  title: g,
-  textInfo: h = "percent",
-  hole: d = 0,
-  rotation: x = 0
+  width: a = 400,
+  height: g = 400,
+  title: h,
+  textInfo: d = "percent",
+  hole: x = 0,
+  rotation: b = 0
 }) => {
-  const s = P(null), i = L(), { bindTooltip: b, tooltipElement: C } = k({ followCursor: !0 }), a = R(() => {
+  const r = _(null), m = O(), { bindTooltip: v, tooltipElement: C } = R({ followCursor: !0 }), f = L(() => {
     if (e.colors && e.colors.length >= e.labels.length)
       return e.colors;
-    const l = [...e.colors || []], r = e.labels.length - l.length;
-    if (r <= 0) return l;
-    for (let t = 0; t < r; t++)
-      l.push(w[t % w.length]);
-    return l;
+    const o = [...e.colors || []], s = e.labels.length - o.length;
+    if (s <= 0) return o;
+    for (let n = 0; n < s; n++)
+      o.push(w[n % w.length]);
+    return o;
   }, [e.colors, e.labels.length]);
-  return _(() => {
-    if (!s.current) return;
-    const l = [
+  return P(() => {
+    if (!r.current) return;
+    const o = [
       {
         type: "pie",
         labels: e.labels,
         values: e.values,
         name: e.name,
         marker: {
-          colors: a
+          colors: f
         },
-        textinfo: h,
+        textinfo: d,
         hoverinfo: "none",
         insidetextfont: {
           size: 0,
-          family: "Inter, sans-serif",
+          family: y,
           color: "transparent"
         },
-        hole: d,
-        rotation: x
+        hole: x,
+        rotation: b
       }
-    ], r = {
-      width: m,
-      height: u,
+    ], s = {
+      width: a,
+      height: g,
       font: {
-        family: "Inter, sans-serif",
-        color: i.textColor
+        family: y,
+        color: m.textColor
       },
       showlegend: !1,
       margin: { l: 40, r: 40, b: 40, t: 40 },
-      paper_bgcolor: i.paperBg,
-      plot_bgcolor: i.plotBg
-    }, t = {
+      paper_bgcolor: m.paperBg,
+      plot_bgcolor: m.plotBg
+    }, n = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    y.newPlot(s.current, l, r, t), b(s.current);
-    const c = s.current;
-    return () => {
-      c && y.purge(c);
+    let i = !1, c = null;
+    return T().then((l) => {
+      i || !r.current || (l.newPlot(r.current, o, s, n), v(r.current), c = r.current);
+    }), () => {
+      i = !0, c && k().purge(c);
     };
-  }, [a, e.labels, e.name, e.values, m, u, h, d, x, i, b]), /* @__PURE__ */ p("div", { className: "relative", style: { width: m }, children: [
-    /* @__PURE__ */ p("div", { className: "size-full", children: [
-      g && /* @__PURE__ */ o("div", { className: "px-10 text-center", children: /* @__PURE__ */ o("h2", { className: "m-0 text-[32px] leading-tight font-semibold", children: g }) }),
-      /* @__PURE__ */ o(
+  }, [f, e.labels, e.name, e.values, a, g, d, x, b, m, v]), /* @__PURE__ */ u("div", { className: "relative", style: { width: a }, children: [
+    /* @__PURE__ */ u("div", { className: "size-full", children: [
+      h && /* @__PURE__ */ t("div", { className: "px-10 text-center", children: /* @__PURE__ */ t("h2", { className: "m-0 text-[32px] leading-tight font-semibold", children: h }) }),
+      /* @__PURE__ */ t(
         "div",
         {
-          ref: s,
+          ref: r,
           style: {
             width: "100%",
             height: "100%",
@@ -78,40 +79,40 @@ const w = T, F = ({
           }
         }
       ),
-      /* @__PURE__ */ o(({
-        labels: l,
-        colors: r
+      /* @__PURE__ */ t(({
+        labels: o,
+        colors: s
       }) => {
-        const t = l.map((n, f) => /* @__PURE__ */ o(N.Fragment, { children: /* @__PURE__ */ p("div", { className: "flex items-center text-[13px] leading-[18px] font-medium", children: [
-          /* @__PURE__ */ o(
+        const n = o.map((l, p) => /* @__PURE__ */ t(N.Fragment, { children: /* @__PURE__ */ u("div", { className: "flex items-center text-[13px] leading-[18px] font-medium", children: [
+          /* @__PURE__ */ t(
             "span",
             {
               "data-slot": "pie-legend-swatch",
               className: "mr-1.5 inline-block size-3 rounded-[4px]",
-              style: { background: r[f] }
+              style: { background: s[p] }
             }
           ),
-          n,
-          f < l.length - 1 && /* @__PURE__ */ o("span", { className: "mx-3 inline-block h-6 w-0.5 bg-border" })
-        ] }) }, `${n}-${f}`)), c = 6, v = [];
-        for (let n = 0; n < t.length; n += c)
-          v.push(
-            /* @__PURE__ */ o(
+          l,
+          p < o.length - 1 && /* @__PURE__ */ t("span", { className: "mx-3 inline-block h-6 w-0.5 bg-border" })
+        ] }) }, `${l}-${p}`)), i = 6, c = [];
+        for (let l = 0; l < n.length; l += i)
+          c.push(
+            /* @__PURE__ */ t(
               "div",
               {
                 className: "mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10",
-                children: t.slice(n, n + c)
+                children: n.slice(l, l + i)
               },
-              n
+              l
             )
           );
-        return /* @__PURE__ */ o("div", { "data-slot": "pie-legend", className: "flex w-full flex-wrap text-foreground", children: v });
-      }, { labels: e.labels, colors: a })
+        return /* @__PURE__ */ t("div", { "data-slot": "pie-legend", className: "flex w-full flex-wrap text-foreground", children: c });
+      }, { labels: e.labels, colors: f })
     ] }),
     C
   ] });
 };
 export {
-  F as PieChart
+  H as PieChart
 };
 //# sourceMappingURL=PieChart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.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 { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title,\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\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  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={`${label}-${i}`}>\n        <div className=\"flex items-center text-[13px] leading-[18px] font-medium\">\n          <span\n            data-slot=\"pie-legend-swatch\"\n            className=\"mr-1.5 inline-block size-3 rounded-[4px]\"\n            style={{ background: colors[i] }}\n          />\n          {label}\n          {i < labels.length - 1 && (\n            <span className=\"mx-3 inline-block h-6 w-0.5 bg-border\" />\n          )}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div\n          className=\"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10\"\n          key={i}\n        >\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"pie-legend\" className=\"flex w-full flex-wrap text-foreground\">\n        {rows}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"relative\" style={{ width: width }}>\n      <div className=\"size-full\">\n        {title && (\n          <div className=\"px-10 text-center\">\n            <h2 className=\"m-0 text-[32px] leading-tight font-semibold\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","jsxs","jsx","labels","items","label","React","rowSize","rows"],"mappings":"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"}
+{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title,\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: CHART_FONT_FAMILY,\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: CHART_FONT_FAMILY,\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={`${label}-${i}`}>\n        <div className=\"flex items-center text-[13px] leading-[18px] font-medium\">\n          <span\n            data-slot=\"pie-legend-swatch\"\n            className=\"mr-1.5 inline-block size-3 rounded-[4px]\"\n            style={{ background: colors[i] }}\n          />\n          {label}\n          {i < labels.length - 1 && (\n            <span className=\"mx-3 inline-block h-6 w-0.5 bg-border\" />\n          )}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div\n          className=\"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10\"\n          key={i}\n        >\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"pie-legend\" className=\"flex w-full flex-wrap text-foreground\">\n        {rows}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"relative\" style={{ width: width }}>\n      <div className=\"size-full\">\n        {title && (\n          <div className=\"px-10 text-center\">\n            <h2 className=\"m-0 text-[32px] leading-tight font-semibold\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","CHART_FONT_FAMILY","layout","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsxs","jsx","labels","items","label","React","rowSize","rows"],"mappings":"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"}