impact-nova 3.0.0-alpha.5 → 3.0.0-alpha.7

package/dist/components/data-display/chart/chart.js

@@ -1,41 +1,43 @@
-import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { jsx as s, jsxs as z } from "react/jsx-runtime";
 import * as t from "react";
-import N from "highcharts-react-official";
-import { cn as p } from "../../../lib/utils.js";
-import { Skeleton as q } from "../skeleton/skeleton.js";
-import { Collapse as j, Expand as B } from "impact-nova-icons";
-import { Button as P } from "../../primitives/button/button.js";
-import { getInitializedHighcharts as T } from "./initializeHighcharts.js";
-import { getBaseChartOptions as O, applySeriesGradient as G } from "./chart.utils.js";
+import L from "highcharts-react-official";
+import { cn as h } from "../../../lib/utils.js";
+import { Skeleton as A } from "../skeleton/skeleton.js";
+import { Collapse as B, Expand as P } from "impact-nova-icons";
+import { Button as T } from "../../primitives/button/button.js";
+import { getInitializedHighcharts as O } from "./initializeHighcharts.js";
+import { getBaseChartOptions as D, applySeriesGradient as G } from "./chart.utils.js";
 import { resolveHighchartsOptions as M } from "./resolve-highcharts-options.js";
+import { chartUsesScatter3d as U } from "./chart-scatter3d.js";
 import { useImpactNovaI18n as V } from "../../../i18n/use-impact-nova-i18n.js";
-const R = T(), S = t.createContext(null), A = () => {
-  const r = t.useContext(S);
+/* empty css                    */
+const k = O(), q = t.createContext(null), H = () => {
+  const r = t.useContext(q);
   if (!r)
     throw new Error("Chart components must be used within a ChartContainer");
   return r;
-}, H = t.forwardRef(
+}, I = t.forwardRef(
   ({ className: r, children: l, isLoading: n = !1, ...a }, u) => {
-    const c = t.useRef(null), o = t.useRef(null), [f, d] = t.useState(null), [h, w] = t.useState(!1), [x, C] = t.useState(!1), v = t.useCallback((e) => {
-      c.current = e, d(e);
+    const c = t.useRef(null), i = t.useRef(null), [m, f] = t.useState(null), [d, E] = t.useState(!1), [w, p] = t.useState(!1), x = t.useCallback((e) => {
+      c.current = e, f(e);
     }, []);
     t.useImperativeHandle(u, () => c.current);
-    const E = () => {
+    const F = () => {
       const e = c.current;
-      e && (C(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
-        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), w(!0), e.classList.remove("fullscreen-animating");
+      e && (p(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
+        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), E(!0), e.classList.remove("fullscreen-animating");
       }, 200));
-    }, F = () => {
+    }, b = () => {
       const e = c.current;
-      e && (C(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
-        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), w(!1), e.classList.remove("fullscreen-animating-out");
+      e && (p(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
+        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), E(!1), e.classList.remove("fullscreen-animating-out");
       }, 200));
-    }, b = () => {
-      h ? F() : E();
+    }, S = () => {
+      d ? b() : F();
     };
     return t.useEffect(() => {
       const e = () => {
-        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || w(!1);
+        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || E(!1);
       };
       return document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
         document.removeEventListener("fullscreenchange", e), document.removeEventListener(
@@ -44,46 +46,46 @@ const R = T(), S = t.createContext(null), A = () => {
         );
       };
     }, []), t.useEffect(() => {
-      if (!o?.current?.chart) return;
-      const e = o.current.chart;
-      let i = null;
-      const g = () => {
-        h && c.current ? (i && cancelAnimationFrame(i), i = requestAnimationFrame(() => {
-          const m = c.current;
-          if (!m) return;
-          const L = m.getBoundingClientRect(), k = m.querySelector('[class*="ChartContent"]');
-          if (k) {
-            const z = k.getBoundingClientRect();
-            e.setSize(z.width, z.height, !1);
+      if (!i?.current?.chart) return;
+      const e = i.current.chart;
+      let o = null;
+      const N = () => {
+        d && c.current ? (o && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
+          const v = c.current;
+          if (!v) return;
+          const R = v.getBoundingClientRect(), g = v.querySelector('[class*="ChartContent"]');
+          if (g) {
+            const C = g.getBoundingClientRect();
+            e.setSize(C.width, C.height, !1);
           } else
-            e.setSize(L.width, L.height, !1);
-          i = null;
+            e.setSize(R.width, R.height, !1);
+          o = null;
         })) : (e.setSize(null, null, !1), e.reflow());
       };
-      return window.addEventListener("resize", g), () => {
-        i && cancelAnimationFrame(i), window.removeEventListener("resize", g);
+      return window.addEventListener("resize", N), () => {
+        o && cancelAnimationFrame(o), window.removeEventListener("resize", N);
       };
-    }, [h]), /* @__PURE__ */ s(
-      S.Provider,
+    }, [d]), /* @__PURE__ */ s(
+      q.Provider,
       {
         value: {
-          isExpanded: h,
-          toggleFullscreen: b,
+          isExpanded: d,
+          toggleFullscreen: S,
           isLoading: n,
           containerRef: c,
-          containerElement: f,
-          chartComponentRef: o
+          containerElement: m,
+          chartComponentRef: i
         },
         children: /* @__PURE__ */ s(
           "div",
           {
-            ref: v,
+            ref: x,
             "data-component": "chart",
-            className: p(
+            className: h(
               r,
               "w-full relative bg-canvas-elevated transition-all duration-200 ease-in-out",
-              h && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
-              x && "overflow-hidden"
+              d && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
+              w && "overflow-hidden"
             ),
             ...a,
             children: l
@@ -93,120 +95,131 @@ const R = T(), S = t.createContext(null), A = () => {
     );
   }
 );
-H.displayName = "ChartContainer";
+I.displayName = "ChartContainer";
 const W = t.forwardRef(
-  ({ className: r, children: l, ...n }, a) => /* @__PURE__ */ s("div", { ref: a, className: p("flex items-center justify-between mb-4", r), ...n, children: l })
+  ({ className: r, children: l, ...n }, a) => /* @__PURE__ */ s("div", { ref: a, className: h("flex items-center justify-between mb-4", r), ...n, children: l })
 );
 W.displayName = "ChartHeader";
-const D = t.forwardRef(
-  ({ className: r, ...l }, n) => /* @__PURE__ */ s("h3", { ref: n, className: p("text-lg font-semibold leading-none tracking-tight", r), ...l })
-);
-D.displayName = "ChartTitle";
 const J = t.forwardRef(
-  ({ className: r, ...l }, n) => /* @__PURE__ */ s("div", { ref: n, className: p("flex items-center gap-2", r), ...l })
+  ({ className: r, ...l }, n) => /* @__PURE__ */ s("h3", { ref: n, className: h("text-lg font-semibold leading-none tracking-tight", r), ...l })
 );
-J.displayName = "ChartActions";
+J.displayName = "ChartTitle";
 const K = t.forwardRef(
+  ({ className: r, ...l }, n) => /* @__PURE__ */ s("div", { ref: n, className: h("flex items-center gap-2", r), ...l })
+);
+K.displayName = "ChartActions";
+const Q = t.forwardRef(
   ({ className: r, ...l }, n) => {
-    const { t: a } = V(), { toggleFullscreen: u, isExpanded: c } = A(), o = a("aria.toggleFullscreen");
-    return /* @__PURE__ */ y(
-      P,
+    const { t: a } = V(), { toggleFullscreen: u, isExpanded: c } = H(), i = a("aria.toggleFullscreen");
+    return /* @__PURE__ */ z(
+      T,
       {
         variant: "ghost",
         size: "icon",
         onClick: u,
         ref: n,
-        className: p("h-8 w-8", r),
-        "aria-label": o,
+        className: h("h-8 w-8", r),
+        "aria-label": i,
         ...l,
         children: [
-          c ? /* @__PURE__ */ s(j, { className: "h-4 w-4" }) : /* @__PURE__ */ s(B, { className: "h-4 w-4" }),
-          /* @__PURE__ */ s("span", { className: "sr-only", children: o })
+          c ? /* @__PURE__ */ s(B, { className: "h-4 w-4" }) : /* @__PURE__ */ s(P, { className: "h-4 w-4" }),
+          /* @__PURE__ */ s("span", { className: "sr-only", children: i })
         ]
       }
     );
   }
 );
-K.displayName = "ChartFullScreen";
-const I = t.forwardRef(
+Q.displayName = "ChartFullScreen";
+const j = t.forwardRef(
   ({ className: r, children: l, loader: n, ...a }, u) => {
-    const { isLoading: c, chartComponentRef: o, isExpanded: f } = A();
-    return c && n ? /* @__PURE__ */ s("div", { ref: u, className: p(r, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", f && "min-h-0"), ...a, children: n }) : /* @__PURE__ */ y("div", { ref: u, className: p(r, "w-full relative flex-1 min-h-[300px]", f && "min-h-0"), ...a, children: [
-      c && /* @__PURE__ */ y("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
-        /* @__PURE__ */ s(q, { className: "h-8 w-1/3" }),
-        /* @__PURE__ */ s(q, { className: "flex-1 w-full" })
+    const { isLoading: c, chartComponentRef: i, isExpanded: m } = H();
+    return c && n ? /* @__PURE__ */ s("div", { ref: u, className: h(r, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", m && "min-h-0"), ...a, children: n }) : /* @__PURE__ */ z("div", { ref: u, className: h(r, "w-full relative flex-1 min-h-[300px]", m && "min-h-0"), ...a, children: [
+      c && /* @__PURE__ */ z("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
+        /* @__PURE__ */ s(A, { className: "h-8 w-1/3" }),
+        /* @__PURE__ */ s(A, { className: "flex-1 w-full" })
       ] }),
-      t.Children.map(l, (d) => t.isValidElement(d) ? t.cloneElement(d, { ref: o }) : d)
+      t.Children.map(l, (f) => t.isValidElement(f) ? t.cloneElement(f, { ref: i }) : f)
     ] });
   }
 );
-I.displayName = "ChartContent";
-const Q = t.forwardRef(
+j.displayName = "ChartContent";
+const X = t.forwardRef(
   (r, l) => {
     const {
       height: n,
       width: a,
       className: u,
       isLoading: c,
-      loader: o,
-      title: f,
-      noWrapper: d,
-      gradient: h,
-      children: w,
-      ...x
-    } = r, C = t.useContext(S), [v, E] = t.useState(null), F = t.useCallback((m) => {
-      E(m);
-    }, []), b = t.useMemo(() => {
-      const m = O({ title: f, ...x });
+      loader: i,
+      title: m,
+      noWrapper: f,
+      gradient: d,
+      children: E,
+      is3D: w,
+      type: p,
+      series: x,
+      ...F
+    } = r, b = t.useContext(q), [S, e] = t.useState(null), o = t.useCallback((y) => {
+      e(y);
+    }, []), N = U({ is3D: w, type: p, series: x }), v = t.useMemo(() => {
+      const y = D({ title: m, is3D: w, type: p, series: x, ...F });
       return {
-        ...m,
+        ...y,
         chart: {
-          ...m.chart,
+          ...y.chart,
           height: n ?? null,
           width: a ?? null
         }
       };
-    }, [f, n, a, x]), e = C?.containerElement ?? v ?? (typeof document > "u" ? null : document.documentElement), i = G(
-      M(b, e),
-      h
-    ), g = {
+    }, [m, n, a, w, p, x, F]), R = b?.containerElement ?? S ?? (typeof document > "u" ? null : document.documentElement), g = G(
+      M(v, R),
+      d
+    ), C = {
       height: typeof n == "number" ? n : n ?? "100%",
       width: typeof a == "number" ? a : a ?? "100%"
     };
-    return d ? /* @__PURE__ */ s("div", { ref: F, className: "h-full w-full", children: /* @__PURE__ */ s(
-      N,
+    return f ? /* @__PURE__ */ s("div", { ref: o, className: "h-full w-full", children: /* @__PURE__ */ s(
+      L,
       {
-        highcharts: R,
-        options: i,
+        highcharts: k,
+        options: g,
         ref: l,
-        containerProps: { style: g }
+        containerProps: { style: C }
       }
-    ) }) : C ? /* @__PURE__ */ s(
-      N,
+    ) }) : b ? /* @__PURE__ */ s(
+      L,
       {
-        highcharts: R,
-        options: i,
+        highcharts: k,
+        options: g,
         ref: l,
-        containerProps: { style: g }
+        containerProps: { style: C }
       }
-    ) : /* @__PURE__ */ s(H, { className: u, isLoading: c, children: /* @__PURE__ */ s(I, { loader: o, children: /* @__PURE__ */ s(
-      N,
+    ) : /* @__PURE__ */ s(
+      I,
       {
-        highcharts: R,
-        options: i,
-        ref: l,
-        containerProps: { style: g }
+        className: u,
+        isLoading: c,
+        "data-slot": N ? "chart-scatter3d" : void 0,
+        children: /* @__PURE__ */ s(j, { loader: i, children: /* @__PURE__ */ s(
+          L,
+          {
+            highcharts: k,
+            options: g,
+            ref: l,
+            containerProps: { style: C }
+          }
+        ) })
       }
-    ) }) });
+    );
   }
 );
-Q.displayName = "Chart";
+X.displayName = "Chart";
 export {
-  Q as Chart,
-  J as ChartActions,
-  H as ChartContainer,
-  I as ChartContent,
-  K as ChartFullScreen,
+  X as Chart,
+  K as ChartActions,
+  I as ChartContainer,
+  j as ChartContent,
+  Q as ChartFullScreen,
   W as ChartHeader,
-  D as ChartTitle
+  J as ChartTitle
 };