npm - @tetrascience-npm/tetrascience-react-ui - Versions diffs - 0.6.0-beta.82.1 → 0.6.0-beta.84.1 - Mend

@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.82.1 → 0.6.0-beta.84.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

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

@@ -1,58 +1,60 @@
-import { jsx as z } from "react/jsx-runtime";
-import N from "plotly.js-dist";
-import { useRef as A, useMemo as s, useEffect as L } from "react";
-import { usePlotlyTheme as P } from "../../../hooks/use-plotly-theme.js";
-const B = ({
-  dataSeries: i,
-  width: y = 1e3,
-  height: g = 600,
-  xRange: p,
-  yRange: c,
-  variant: m = "lines",
-  xTitle: x = "Columns",
-  yTitle: k = "Rows",
-  title: M = "Line Graph"
+import { jsxs as v, jsx as A } from "react/jsx-runtime";
+import z from "plotly.js-dist";
+import { useRef as P, useMemo as c, useEffect as U } from "react";
+import { useChartTooltip as V } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as X } from "../../../hooks/use-plotly-theme.js";
+import { seriesColor as B } from "../../../utils/colors.js";
+const q = ({
+  dataSeries: l,
+  width: M = 1e3,
+  height: w = 600,
+  xRange: d,
+  yRange: m,
+  variant: f = "lines",
+  xTitle: y = "Columns",
+  yTitle: g = "Rows",
+  title: b = "Line Graph"
 }) => {
-  const h = A(null), o = P(), { yMin: w, yMax: b } = s(() => {
-    let r = Number.MAX_VALUE, t = Number.MIN_VALUE, l = Number.MAX_VALUE, n = Number.MIN_VALUE;
-    i.forEach((I) => {
-      I.x.forEach((f) => {
-        r = Math.min(r, f), t = Math.max(t, f);
-      }), I.y.forEach((f) => {
-        l = Math.min(l, f), n = Math.max(n, f);
+  const p = P(null), o = X(), { bindTooltip: C, tooltipElement: N } = V({ xLabel: y, yLabel: g }), { yMin: E, yMax: _ } = c(() => {
+    let r = Number.MAX_VALUE, t = Number.MIN_VALUE, i = Number.MAX_VALUE, e = Number.MIN_VALUE;
+    l.forEach((a) => {
+      a.x.forEach((h) => {
+        r = Math.min(r, h), t = Math.max(t, h);
+      }), a.y.forEach((h) => {
+        i = Math.min(i, h), e = Math.max(e, h);
       });
     });
-    const e = (t - r) * 0.1, C = (n - l) * 0.1;
+    const n = (t - r) * 0.1, u = (e - i) * 0.1;
     return {
-      xMin: r - e,
-      xMax: t + e,
-      yMin: l - C,
-      yMax: n + C
+      xMin: r - n,
+      xMax: t + n,
+      yMin: i - u,
+      yMax: e + u
     };
-  }, [i]), a = s(
-    () => c || [w, b],
-    [c, w, b]
-  ), _ = s(() => {
-    const r = a[1] - a[0];
+  }, [l]), s = c(
+    () => m || [E, _],
+    [m, E, _]
+  ), I = c(() => {
+    const r = s[1] - s[0];
     let t = Math.pow(10, Math.floor(Math.log10(r)));
     r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
-    const l = [];
-    let n = Math.ceil(a[0] / t) * t;
-    for (; n <= a[1]; )
-      l.push(n), n += t;
-    return l;
-  }, [a]), u = s(
-    () => [...new Set(i.flatMap((r) => r.x))],
-    [i]
-  ), E = s(() => {
-    switch (m) {
+    const i = [];
+    let e = Math.ceil(s[0] / t) * t;
+    for (; e <= s[1]; )
+      i.push(e), e += t;
+    return i;
+  }, [s]), x = c(
+    () => [...new Set(l.flatMap((r) => r.x))],
+    [l]
+  ), L = c(() => {
+    switch (f) {
       case "lines+markers":
       case "lines+markers+error_bars":
         return "lines+markers";
       default:
         return "lines";
     }
-  }, [m]), d = s(
+  }, [f]), k = c(
     () => ({
       tickcolor: o.tickColor,
       ticklen: 12,
@@ -71,42 +73,46 @@ const B = ({
     }),
     [o]
   );
-  return L(() => {
-    if (!h.current) return;
-    const r = i.map((e) => ({
-      x: e.x,
-      y: e.y,
-      type: "scatter",
-      mode: E,
-      name: e.name,
-      line: {
-        color: e.color,
-        width: 1.5
-      },
-      marker: m === "lines" ? { opacity: 0 } : {
-        color: e.color,
-        size: 8,
-        symbol: e.symbol || "triangle-up"
-      },
-      error_y: m === "lines+markers+error_bars" ? e.error_y || {
-        type: "data",
-        array: e.y.map(() => 10),
-        visible: !0,
-        color: e.color,
-        thickness: 1,
-        width: 5
-      } : void 0
-    })), t = {
+  return U(() => {
+    if (!p.current) return;
+    const r = l.map((n, u) => {
+      const a = B(u, n.color);
+      return {
+        x: n.x,
+        y: n.y,
+        type: "scatter",
+        mode: L,
+        name: n.name,
+        hoverinfo: "none",
+        line: {
+          color: a,
+          width: 1.5
+        },
+        marker: f === "lines" ? { opacity: 0 } : {
+          color: a,
+          size: 8,
+          symbol: n.symbol || "triangle-up"
+        },
+        error_y: f === "lines+markers+error_bars" ? n.error_y || {
+          type: "data",
+          array: n.y.map(() => 10),
+          visible: !0,
+          color: a,
+          thickness: 1,
+          width: 5
+        } : void 0
+      };
+    }), t = {
       title: {
-        text: M,
+        text: b,
         font: {
           size: 32,
           family: "Inter, sans-serif",
           color: o.textColor
         }
       },
-      width: y,
-      height: g,
+      width: M,
+      height: w,
       margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },
       paper_bgcolor: o.paperBg,
       plot_bgcolor: o.plotBg,
@@ -116,7 +122,7 @@ const B = ({
       dragmode: !1,
       xaxis: {
         title: {
-          text: x,
+          text: y,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -126,17 +132,17 @@ const B = ({
           standoff: 32
         },
         gridcolor: o.gridColor,
-        range: p,
-        autorange: !p,
+        range: d,
+        autorange: !d,
         tickmode: "array",
-        tickvals: u,
-        ticktext: u.map(String),
+        tickvals: x,
+        ticktext: x.map(String),
         showgrid: !0,
-        ...d
+        ...k
       },
       yaxis: {
         title: {
-          text: k,
+          text: g,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -146,12 +152,12 @@ const B = ({
           standoff: 30
         },
         gridcolor: o.gridColor,
-        range: c,
-        autorange: !c,
+        range: m,
+        autorange: !m,
         tickmode: "array",
-        tickvals: _,
+        tickvals: I,
         showgrid: !0,
-        ...d
+        ...k
       },
       legend: {
         x: 0.5,
@@ -167,19 +173,22 @@ const B = ({
         }
       },
       showlegend: !0
-    }, l = {
+    }, i = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    N.newPlot(h.current, r, t, l);
-    const n = h.current;
+    z.newPlot(p.current, r, t, i), C(p.current);
+    const e = p.current;
     return () => {
-      n && N.purge(n);
+      e && z.purge(e);
     };
-  }, [i, y, g, p, c, x, k, M, E, d, u, _, a, m, o]), /* @__PURE__ */ z("div", { className: "chart-container", children: /* @__PURE__ */ z("div", { ref: h, style: { width: "100%", height: "100%" } }) });
+  }, [l, M, w, d, m, y, g, b, L, k, x, I, s, f, o, C]), /* @__PURE__ */ v("div", { className: "chart-container relative", children: [
+    /* @__PURE__ */ A("div", { ref: p, style: { width: "100%", height: "100%" } }),
+    N
+  ] });
 };
 export {
-  B as LineGraph
+  q as LineGraph
 };
 //# sourceMappingURL=LineGraph.js.map

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

	@@ -1 +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 { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\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 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\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\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 = \"Line Graph\",\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\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))],\n [dataSeries],\n );\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) => ({\n x: series.x,\n y: series.y,\n type: \"scatter\" as const,\n mode: mode,\n name: series.name,\n line: {\n color: series.color,\n width: 1.5,\n },\n marker:\n variant === \"lines\"\n ? { opacity: 0 }\n : {\n color: series.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: series.color,\n thickness: 1,\n width: 5,\n }\n : undefined,\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 };\n\n const config = {\n responsive: true,\n displayModeBar: false,\n displaylogo: false,\n };\n\n Plotly.newPlot(plotRef.current, plotData, layout, config);\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, effectiveYRange, variant, theme]);\n\n return (\n <div className=\"chart-container\">\n <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n </div>\n );\n};\n\nexport { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","mode","tickOptions","useEffect","plotData","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
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\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\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 = \"Line Graph\",\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))],\n [dataSeries],\n );\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 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 };\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, effectiveYRange, variant, theme, bindTooltip]);\n\n return (\n <div className=\"chart-container relative\">\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":["LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","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","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),R=require("plotly.js-dist"),u=require("react"),y=require("../../../hooks/use-plotly-theme.cjs"),t=require("../../../utils/colors.cjs"),b=[t.COLORS.BLUE,t.COLORS.GREEN,t.COLORS.ORANGE,t.COLORS.RED,t.COLORS.YELLOW,t.COLORS.PURPLE],C=({dataSeries:e,width:m=400,height:h=400,title:f="Pie Chart",textInfo:p="percent",hole:x=0,rotation:O=0})=>{const i=u.useRef(null),a=y.usePlotlyTheme(),g=u.useMemo(()=>{if(e.colors&&e.colors.length>=e.labels.length)return e.colors;const s=[...e.colors||[]],r=e.labels.length-s.length;if(r<=0)return s;for(let n=0;n<r;n++)s.push(b[n%b.length]);return s},[e.colors,e.labels.length]);u.useEffect(()=>{if(!i.current)return;const s=[{type:"pie",labels:e.labels,values:e.values,name:e.name,marker:{colors:g},textinfo:p,hoverinfo:"label+text+value",insidetextfont:{size:0,family:"Inter, sans-serif",color:"transparent"},hole:x,rotation:O}],r={width:m,height:h,font:{family:"Inter, sans-serif",color:a.textColor},showlegend:!1,margin:{l:40,r:40,b:40,t:40},paper_bgcolor:a.paperBg,plot_bgcolor:a.plotBg},n={responsive:!0,displayModeBar:!1,displaylogo:!1};R.newPlot(i.current,s,r,n);const c=i.current;return()=>{c&&R.purge(c)}},[g,e.labels,e.name,e.values,m,h,p,x,O,a]);const j=({labels:s,colors:r})=>{const n=s.map((o,v)=>l.jsx(u.Fragment,{children:l.jsxs("div",{className:"legend-item",children:[l.jsx("span",{className:"color-box",style:{background:r[v]}}),o,v<s.length-1&&l.jsx("span",{className:"divider"})]})},o)),c=6,d=[];for(let o=0;o<n.length;o+=c)d.push(l.jsx("div",{className:"legend-row",children:n.slice(o,o+c)},o));return l.jsx("div",{className:"legend-container",children:d})};return l.jsx("div",{className:"card-container",style:{width:m},children:l.jsxs("div",{className:"chart-container",children:[f&&l.jsx("div",{className:"title-container",children:l.jsx("h2",{className:"title",children:f})}),l.jsx("div",{ref:i,style:{width:"100%",height:"100%",margin:"0"}}),l.jsx(j,{labels:e.labels,colors:g})]})})};exports.PieChart=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),j=require("plotly.js-dist"),a=require("react"),P=require("../ChartTooltip/ChartTooltip.cjs"),T=require("../../../hooks/use-plotly-theme.cjs"),R=require("../../../utils/colors.cjs"),y=R.CHART_COLORS,q=({dataSeries:e,width:u=400,height:h=400,title:g="Pie Chart",textInfo:p="percent",hole:f=0,rotation:d=0})=>{const t=a.useRef(null),i=T.usePlotlyTheme(),{bindTooltip:x,tooltipElement:C}=P.useChartTooltip({followCursor:!0}),m=a.useMemo(()=>{if(e.colors&&e.colors.length>=e.labels.length)return e.colors;const s=[...e.colors||[]],r=e.labels.length-s.length;if(r<=0)return s;for(let o=0;o<r;o++)s.push(y[o%y.length]);return s},[e.colors,e.labels.length]);a.useEffect(()=>{if(!t.current)return;const s=[{type:"pie",labels:e.labels,values:e.values,name:e.name,marker:{colors:m},textinfo:p,hoverinfo:"none",insidetextfont:{size:0,family:"Inter, sans-serif",color:"transparent"},hole:f,rotation:d}],r={width:u,height:h,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},o={responsive:!0,displayModeBar:!1,displaylogo:!1};j.newPlot(t.current,s,r,o),x(t.current);const c=t.current;return()=>{c&&j.purge(c)}},[m,e.labels,e.name,e.values,u,h,p,f,d,i,x]);const N=({labels:s,colors:r})=>{const o=s.map((n,b)=>l.jsx(a.Fragment,{children:l.jsxs("div",{className:"legend-item",children:[l.jsx("span",{className:"color-box",style:{background:r[b]}}),n,b<s.length-1&&l.jsx("span",{className:"divider"})]})},n)),c=6,v=[];for(let n=0;n<o.length;n+=c)v.push(l.jsx("div",{className:"legend-row",children:o.slice(n,n+c)},n));return l.jsx("div",{className:"legend-container",children:v})};return l.jsxs("div",{className:"card-container relative",style:{width:u},children:[l.jsxs("div",{className:"chart-container",children:[g&&l.jsx("div",{className:"title-container",children:l.jsx("h2",{className:"title",children:g})}),l.jsx("div",{ref:t,style:{width:"100%",height:"100%",margin:"0"}}),l.jsx(N,{labels:e.labels,colors:m})]}),C]})};exports.PieChart=q;
 //# sourceMappingURL=PieChart.cjs.map

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

	@@ -1 +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 { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { ~~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 = ~~[\n COLORS.BLUE,\n COLORS.GREEN,\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.YELLOW,\n COLORS.PURPLE,\n]~~;\n\nconst PieChart: React.FC<PieChartProps> = ({\n dataSeries,\n width = 400,\n height = 400,\n title = \"Pie Chart\",\n textInfo = \"percent\",\n hole = 0,\n rotation = 0,\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\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: \"~~label+text+value~~\" 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\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]);\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}>\n <div className=\"legend-item\">\n <span className=\"color-box\" style={{ background: colors[i] }} />\n {label}\n {i < labels.length - 1 && <span className=\"divider\" />}\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 className=\"legend-row\" key={i}>\n {items.slice(i, i + rowSize)}\n </div>\n );\n }\n return <div className=\"legend-container\">{rows}</div>;\n };\n\n return (\n <div className=\"card-container\" style={{ width: width }}>\n <div className=\"chart-container\">\n {title && (\n <div className=\"title-container\">\n <h2 className=\"title\">{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 </div>\n );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","~~COLORS~~","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","PieChartLegend","labels","items","label","jsx","React","jsxs","rowSize","rows"],"mappings":"~~4PAiCMA~~,~~EAAiB~~,~~CACrBC,~~EAAAA,~~OAAO~~,~~KACPA,EAAAA,OAAO,MACPA,EAAAA,OAAO,OACPA,EAAAA,OAAO,IACPA,EAAAA,OAAO,OACPA,SAAO,MACT,EAEMC,~~EAAoC,CAAC,CACzC,WAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,MAAAC,EAAQ,YACR,SAAAC,EAAW,UACX,KAAAC,EAAO,EACP,SAAAC,EAAW,CACb,IAAM,CACJ,MAAMC,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAQC,EAAAA,eAAA,~~EAERC~~,EAASC,EAAAA,QAAQ,IAAM,CAC3B,~~GACEZ~~,EAAW,QACXA,EAAW,OAAO,QAAUA,EAAW,OAAO,OAE9C,OAAOA,EAAW,OAGpB,~~MAAMa~~,EAAS,CAAC,~~GAAIb~~,EAAW,QAAU,CAAA,CAAG,~~EACtCc~~,~~EAAgBd~~,EAAW,OAAO,~~OAASa~~,EAAO,OAExD,GAAIC,GAAiB,EAAG,OAAOD,EAE/B,QAASE,EAAI,EAAGA,EAAID,EAAeC,IACjCF,EAAO,~~KAAKhB~~,~~EAAekB~~,~~EAAIlB~~,EAAe,MAAM,CAAC,EAGvD,~~OAAOgB~~,CACT,EAAG,~~CAACb~~,EAAW,OAAQA,EAAW,OAAO,MAAM,CAAC,~~EAEhDgB~~,EAAAA,UAAU,IAAM,CACd,GAAI,~~CAACT~~,EAAQ,QAAS,OAEtB,~~MAAMU~~,EAAW,CACf,CACE,KAAM,MACN,~~OAAQjB~~,EAAW,OACnB,OAAQA,EAAW,OACnB,KAAMA,EAAW,KACjB,OAAQ,CACN,~~OAAAW~~,CAAA,EAEF,~~SAAUP~~,EACV,UAAW,~~mBACX~~,eAAgB,CACd,KAAM,EACN,OAAQ,oBACR,MAAO,aAAA,EAET,KAAAC,EACA,SAAAC,CAAA,CACF,~~EAGIY~~,EAAS,CACb,~~MAAAjB~~,EACA,OAAAC,EACA,KAAM,CACJ,OAAQ,oBACR,MAAOO,EAAM,SAAA,EAEf,WAAY,GACZ,OAAQ,CAAE,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,EAAA,EAClC,cAAeA,EAAM,QACrB,aAAcA,EAAM,MAAA,~~EAGhBU~~,EAAS,CACb,WAAY,GACZ,eAAgB,GAChB,YAAa,EAAA,EAGfC,EAAO,~~QAAQb~~,EAAQ,~~QAASU~~,EAAUC,EAAQC,CAAM,~~EAGxD~~,~~MAAME~~,~~EAAcd~~,EAAQ,QAE5B,MAAO,IAAM,~~CACPc~~,GACFD,EAAO,MAAMC,CAAW,CAE5B,CACF,EAAG,CAACV,~~EAAQX~~,EAAW,OAAQA,EAAW,KAAMA,EAAW,OAAQC,EAAOC,EAAQE,EAAUC,EAAMC,EAAUG,~~CAAK~~,CAAC,~~EAElH~~,~~MAAMa~~,EAAmE,CAAC,CACxE,OAAAC,EACA,OAAAZ,CAAA,IACI,CACJ,MAAMa,EAAQD,EAAO,IAAI,CAACE,EAAOV,IAC/BW,MAACC,EAAM,SAAN,CACC,SAAAC,OAAC,MAAA,CAAI,UAAU,cACb,SAAA,CAAAF,EAAAA,IAAC,OAAA,CAAK,UAAU,YAAY,MAAO,CAAE,WAAYf,EAAOI,CAAC,CAAA,EAAK,EAC7DU,EACAV,EAAIQ,EAAO,OAAS,GAAKG,EAAAA,IAAC,OAAA,CAAK,UAAU,SAAA,CAAU,CAAA,EACtD,CAAA,EALmBD,CAMrB,CACD,EAEKI,EAAU,EACVC,EAAO,CAAA,EACb,QAASf,EAAI,EAAGA,EAAIS,EAAM,OAAQT,GAAKc,EACrCC,EAAK,KACHJ,EAAAA,IAAC,MAAA,CAAI,UAAU,aACZ,SAAAF,EAAM,MAAMT,EAAGA,EAAIc,CAAO,CAAA,EADId,CAEjC,CAAA,EAGJ,OAAOW,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAoB,SAAAI,EAAK,CACjD,EAEA,~~OACEJ~~,~~EAAAA,IAAC,~~MAAA,CAAI,UAAU,~~iBAAiB~~,MAAO,CAAE,~~MAAAzB~~,~~CAAA~~,~~EACvC~~,~~SAAA2B~~,EAAAA,KAAC,MAAA,CAAI,UAAU,kBACZ,SAAA,~~CAAAzB~~,~~GACCuB~~,EAAAA,IAAC,OAAI,UAAU,kBACb,eAAC,KAAA,CAAG,UAAU,QAAS,~~SAAAvB~~,CAAA,CAAM,CAAA,CAC/B,~~EAEFuB~~,EAAAA,IAAC,MAAA,CACC,~~IAAKnB~~,EACL,MAAO,CACL,MAAO,OACP,OAAQ,OACR,OAAQ,GAAA,CACV,CAAA,~~EAEFmB~~,EAAAA,IAACJ,EAAA,CAAe,~~OAAQtB~~,EAAW,OAAQ,~~OAAAW~~,CAAA,CAAgB,CAAA,~~CAAA~~,~~CAC7D~~,CAAA,~~CACF~~,CAEJ"}
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 = \"Pie Chart\",\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}>\n <div className=\"legend-item\">\n <span className=\"color-box\" style={{ background: colors[i] }} />\n {label}\n {i < labels.length - 1 && <span className=\"divider\" />}\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 className=\"legend-row\" key={i}>\n {items.slice(i, i + rowSize)}\n </div>\n );\n }\n return <div className=\"legend-container\">{rows}</div>;\n };\n\n return (\n <div className=\"card-container relative\" style={{ width: width }}>\n <div className=\"chart-container\">\n {title && (\n <div className=\"title-container\">\n <h2 className=\"title\">{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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"}

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

@@ -1,106 +1,103 @@
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
-import N from "plotly.js-dist";
-import L, { useRef as P, useMemo as R, useEffect as C } from "react";
-import { usePlotlyTheme as x } from "../../../hooks/use-plotly-theme.js";
-import { COLORS as t } from "../../../utils/colors.js";
-const E = [
-  t.BLUE,
-  t.GREEN,
-  t.ORANGE,
-  t.RED,
-  t.YELLOW,
-  t.PURPLE
-], j = ({
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import C from "plotly.js-dist";
+import x, { useRef as R, useMemo as _, useEffect as w } from "react";
+import { useChartTooltip as L } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as T } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as E } from "../../../utils/colors.js";
+const N = E, F = ({
   dataSeries: e,
-  width: m = 400,
-  height: p = 400,
+  width: a = 400,
+  height: f = 400,
   title: u = "Pie Chart",
-  textInfo: g = "percent",
-  hole: h = 0,
+  textInfo: h = "percent",
+  hole: g = 0,
   rotation: d = 0
 }) => {
-  const i = P(null), a = x(), f = R(() => {
+  const s = R(null), i = T(), { bindTooltip: v, tooltipElement: P } = L({ followCursor: !0 }), m = _(() => {
     if (e.colors && e.colors.length >= e.labels.length)
       return e.colors;
-    const o = [...e.colors || []], s = e.labels.length - o.length;
-    if (s <= 0) return o;
-    for (let n = 0; n < s; n++)
-      o.push(E[n % E.length]);
-    return o;
+    const l = [...e.colors || []], t = e.labels.length - l.length;
+    if (t <= 0) return l;
+    for (let n = 0; n < t; n++)
+      l.push(N[n % N.length]);
+    return l;
   }, [e.colors, e.labels.length]);
-  return C(() => {
-    if (!i.current) return;
-    const o = [
+  return w(() => {
+    if (!s.current) return;
+    const l = [
       {
         type: "pie",
         labels: e.labels,
         values: e.values,
         name: e.name,
         marker: {
-          colors: f
+          colors: m
         },
-        textinfo: g,
-        hoverinfo: "label+text+value",
+        textinfo: h,
+        hoverinfo: "none",
         insidetextfont: {
           size: 0,
           family: "Inter, sans-serif",
           color: "transparent"
         },
-        hole: h,
+        hole: g,
         rotation: d
       }
-    ], s = {
-      width: m,
-      height: p,
+    ], t = {
+      width: a,
+      height: f,
       font: {
         family: "Inter, sans-serif",
-        color: a.textColor
+        color: i.textColor
       },
       showlegend: !1,
       margin: { l: 40, r: 40, b: 40, t: 40 },
-      paper_bgcolor: a.paperBg,
-      plot_bgcolor: a.plotBg
+      paper_bgcolor: i.paperBg,
+      plot_bgcolor: i.plotBg
     }, n = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    N.newPlot(i.current, o, s, n);
-    const c = i.current;
+    C.newPlot(s.current, l, t, n), v(s.current);
+    const c = s.current;
     return () => {
-      c && N.purge(c);
+      c && C.purge(c);
     };
-  }, [f, e.labels, e.name, e.values, m, p, g, h, d, a]), /* @__PURE__ */ l("div", { className: "card-container", style: { width: m }, children: /* @__PURE__ */ y("div", { className: "chart-container", children: [
-    u && /* @__PURE__ */ l("div", { className: "title-container", children: /* @__PURE__ */ l("h2", { className: "title", children: u }) }),
-    /* @__PURE__ */ l(
-      "div",
-      {
-        ref: i,
-        style: {
-          width: "100%",
-          height: "100%",
-          margin: "0"
+  }, [m, e.labels, e.name, e.values, a, f, h, g, d, i, v]), /* @__PURE__ */ p("div", { className: "card-container relative", style: { width: a }, children: [
+    /* @__PURE__ */ p("div", { className: "chart-container", children: [
+      u && /* @__PURE__ */ o("div", { className: "title-container", children: /* @__PURE__ */ o("h2", { className: "title", children: u }) }),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          ref: s,
+          style: {
+            width: "100%",
+            height: "100%",
+            margin: "0"
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ l(({
-      labels: o,
-      colors: s
-    }) => {
-      const n = o.map((r, b) => /* @__PURE__ */ l(L.Fragment, { children: /* @__PURE__ */ y("div", { className: "legend-item", children: [
-        /* @__PURE__ */ l("span", { className: "color-box", style: { background: s[b] } }),
-        r,
-        b < o.length - 1 && /* @__PURE__ */ l("span", { className: "divider" })
-      ] }) }, r)), c = 6, v = [];
-      for (let r = 0; r < n.length; r += c)
-        v.push(
-          /* @__PURE__ */ l("div", { className: "legend-row", children: n.slice(r, r + c) }, r)
-        );
-      return /* @__PURE__ */ l("div", { className: "legend-container", children: v });
-    }, { labels: e.labels, colors: f })
-  ] }) });
+      ),
+      /* @__PURE__ */ o(({
+        labels: l,
+        colors: t
+      }) => {
+        const n = l.map((r, y) => /* @__PURE__ */ o(x.Fragment, { children: /* @__PURE__ */ p("div", { className: "legend-item", children: [
+          /* @__PURE__ */ o("span", { className: "color-box", style: { background: t[y] } }),
+          r,
+          y < l.length - 1 && /* @__PURE__ */ o("span", { className: "divider" })
+        ] }) }, r)), c = 6, b = [];
+        for (let r = 0; r < n.length; r += c)
+          b.push(
+            /* @__PURE__ */ o("div", { className: "legend-row", children: n.slice(r, r + c) }, r)
+          );
+        return /* @__PURE__ */ o("div", { className: "legend-container", children: b });
+      }, { labels: e.labels, colors: m })
+    ] }),
+    P
+  ] });
 };
 export {
-  j as PieChart
+  F as PieChart
 };
 //# sourceMappingURL=PieChart.js.map

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

	@@ -1 +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 { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { ~~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 = ~~[\n COLORS.BLUE,\n COLORS.GREEN,\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.YELLOW,\n COLORS.PURPLE,\n]~~;\n\nconst PieChart: React.FC<PieChartProps> = ({\n dataSeries,\n width = 400,\n height = 400,\n title = \"Pie Chart\",\n textInfo = \"percent\",\n hole = 0,\n rotation = 0,\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\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: \"~~label+text+value~~\" 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\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]);\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}>\n <div className=\"legend-item\">\n <span className=\"color-box\" style={{ background: colors[i] }} />\n {label}\n {i < labels.length - 1 && <span className=\"divider\" />}\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 className=\"legend-row\" key={i}>\n {items.slice(i, i + rowSize)}\n </div>\n );\n }\n return <div className=\"legend-container\">{rows}</div>;\n };\n\n return (\n <div className=\"card-container\" style={{ width: width }}>\n <div className=\"chart-container\">\n {title && (\n <div className=\"title-container\">\n <h2 className=\"title\">{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 </div>\n );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","~~COLORS~~","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","~~jsx~~","~~jsxs~~","labels","items","label","React","rowSize","rows"],"mappings":"~~;;;;;AAiCA~~,MAAMA,~~IAAiB;AAAA~~,~~EACrBC~~,~~EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AACT,GAEMC,~~IAAoC,CAAC;AAAA,EACzC,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AACb,MAAM;AACJ,QAAMC,IAAUC,EAAuB,IAAI,GACrCC,IAAQC,EAAA,~~GAERC~~,IAASC,EAAQ,MAAM;AAC3B,~~QACEZ~~,EAAW,UACXA,EAAW,OAAO,UAAUA,EAAW,OAAO;AAE9C,aAAOA,EAAW;AAGpB,~~UAAMa~~,IAAS,CAAC,~~GAAIb~~,EAAW,UAAU,CAAA,CAAG,~~GACtCc~~,~~IAAgBd~~,EAAW,OAAO,~~SAASa~~,EAAO;AAExD,QAAIC,KAAiB,EAAG,QAAOD;AAE/B,aAASE,IAAI,GAAGA,IAAID,GAAeC;AACjC,MAAAF,EAAO,~~KAAKhB~~,~~EAAekB~~,~~IAAIlB~~,EAAe,MAAM,CAAC;AAGvD,~~WAAOgB~~;AAAA,EACT,GAAG,~~CAACb~~,EAAW,QAAQA,EAAW,OAAO,MAAM,CAAC;AAEhD,~~SAAAgB~~,EAAU,MAAM;AACd,QAAI,~~CAACT~~,EAAQ,QAAS;AAEtB,~~UAAMU~~,IAAW;AAAA,MACf;AAAA,QACE,MAAM;AAAA,QACN,~~QAAQjB~~,EAAW;AAAA,QACnB,QAAQA,EAAW;AAAA,QACnB,MAAMA,EAAW;AAAA,QACjB,QAAQ;AAAA,UACN,~~QAAAW~~;AAAA,QAAA;AAAA,QAEF,~~UAAUP~~;AAAA,QACV,WAAW;AAAA,QACX,gBAAgB;AAAA,UACd,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,QAET,MAAAC;AAAA,QACA,UAAAC;AAAA,MAAA;AAAA,IACF,~~GAGIY~~,IAAS;AAAA,MACb,~~OAAAjB~~;AAAA,MACA,QAAAC;AAAA,MACA,MAAM;AAAA,QACJ,QAAQ;AAAA,QACR,OAAOO,EAAM;AAAA,MAAA;AAAA,MAEf,YAAY;AAAA,MACZ,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAA;AAAA,MAClC,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,IAAA,~~GAGhBU~~,IAAS;AAAA,MACb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAGf,IAAAC,EAAO,~~QAAQb~~,EAAQ,~~SAASU~~,GAAUC,GAAQC,CAAM;~~AAGxD~~,~~UAAME~~,~~IAAcd~~,EAAQ;AAE5B,WAAO,MAAM;AACX,~~MAAIc~~,KACFD,EAAO,MAAMC,CAAW;AAAA,IAE5B;AAAA,EACF,GAAG,CAACV,~~GAAQX~~,EAAW,QAAQA,EAAW,MAAMA,EAAW,QAAQC,GAAOC,GAAQE,GAAUC,GAAMC,GAAUG,~~CAAK~~,CAAC,~~GA6BhH~~,~~gBAAAa,EAAC,~~OAAA,EAAI,WAAU,~~kBAAiB~~,OAAO,EAAE,~~OAAArB~~,~~EAAA~~,~~GACvC,~~UAAA,~~gBAAAsB~~,EAAC,OAAA,EAAI,WAAU,mBACZ,UAAA;AAAA,~~IAAApB~~,KACC,~~gBAAAmB~~,EAAC,SAAI,WAAU,mBACb,4BAAC,MAAA,EAAG,WAAU,SAAS,~~UAAAnB~~,EAAA,CAAM,EAAA,CAC/B;AAAA,~~IAEF~~,~~gBAAAmB~~;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACC~~,~~KAAKf~~;AAAA,~~QACL~~,OAAO;AAAA,~~UACL~~,OAAO;AAAA,~~UACP~~,QAAQ;AAAA,~~UACR~~,QAAQ;AAAA,~~QAAA~~;AAAA,~~MACV~~;AAAA,~~IAAA~~;AAAA,~~IAEF~~,~~gBAAAe~~,EA1CmE,CAAC;AAAA,~~MACxE~~,~~QAAAE~~;AAAA,~~MACA~~,QAAAb;AAAAA,~~IAAA~~,MACI;AACJ,~~YAAMc~~,IAAQD,EAAO,IAAI,CAACE,GAAOX,MAC/B,~~gBAAAO~~,~~EAACK~~,EAAM,UAAN,EACC,UAAA,~~gBAAAJ~~,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,~~QAAA~~,~~gBAAAD~~,EAAC,QAAA,EAAK,WAAU,aAAY,OAAO,EAAE,~~YAAYX~~,EAAOI,CAAC,EAAA,GAAK;AAAA,~~QAC7DW~~;AAAA,~~QACAX~~,IAAIS,EAAO,SAAS,KAAK,~~gBAAAF~~,EAAC,QAAA,EAAK,WAAU,UAAA,CAAU;AAAA,~~MAAA~~,GACtD,EAAA,~~GALmBI~~,CAMrB,CACD,GAEKE,IAAU,GACVC,IAAO,CAAA;AACb,~~eAASd~~,IAAI,GAAGA,IAAIU,EAAM,QAAQV,KAAKa;AACrC,~~QAAAC~~,EAAK;AAAA,~~UACH~~,~~gBAAAP~~,EAAC,OAAA,EAAI,WAAU,cACZ,~~UAAAG~~,EAAM,MAAMV,GAAGA,IAAIa,CAAO,EAAA,GADIb,CAEjC;AAAA,~~QAAA~~;AAGJ,~~aAAO~~,~~gBAAAO~~,EAAC,OAAA,EAAI,WAAU,oBAAoB,~~UAAAO~~,GAAK;AAAA,~~IACjD~~,GAkBO,EAAe,~~QAAQ7B~~,EAAW,QAAQ,~~QAAAW~~,EAAA,CAAgB;AAAA,~~EAAA~~,~~EAAA~~,~~CAC7D~~,EAAA,~~CACF~~;AAEJ;"}
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 = \"Pie Chart\",\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}>\n <div className=\"legend-item\">\n <span className=\"color-box\" style={{ background: colors[i] }} />\n {label}\n {i < labels.length - 1 && <span className=\"divider\" />}\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 className=\"legend-row\" key={i}>\n {items.slice(i, i + rowSize)}\n </div>\n );\n }\n return <div className=\"legend-container\">{rows}</div>;\n };\n\n return (\n <div className=\"card-container relative\" style={{ width: width }}>\n <div className=\"chart-container\">\n {title && (\n <div className=\"title-container\">\n <h2 className=\"title\">{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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"}