@hybridcore/ui 1.5.90 → 1.6.0

package/dist/components/charts/logaritmic-scale/logic.js

@@ -0,0 +1,119 @@
+import { R as Y, A as L, T as d } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as C, useTheme as R } from "@mui/material";
+import x from "lodash";
+import { useId as I, useRef as E, useEffect as O } from "react";
+import { colorSetFromPalette as P } from "../_common/utils.js";
+import { c as s } from "../../../ColorSet-C7vpNXhM.js";
+import { X as q, V as B } from "../../../AxisRenderer-DTyLLA6c.js";
+import { X as V } from "../../../XYCursor-C8WktvKM.js";
+import { D as z } from "../../../DateAxis-YX3QNIB-.js";
+import { A as y, a as G } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as H } from "../../../CategoryAxis-CwnfaGc8.js";
+import { L as N } from "../../../LineSeries-Uiv5o56b.js";
+import { D as U } from "../../../DataProcessor-CHDO51q4.js";
+import { S as W } from "../../../Scrollbar-D86MJyr2.js";
+const ne = (X) => {
+  const u = C({ props: X, name: "HCLogaritmicScale" }), {
+    dimensions: t,
+    values: m,
+    data: i,
+    initDelay: F = 0,
+    baseInterval: b,
+    colors: f,
+    sx: k,
+    ...S
+  } = u, o = R(), h = `hc-logaritmic-scale-${I().replace(/:/g, "")}`, c = E(null);
+  O(() => {
+    let p;
+    return p = setTimeout(() => {
+      var g, A, w;
+      if (t.length < 1) {
+        console.error("LogaritmicScale requires at least 1 dimension");
+        return;
+      }
+      if (m.length < 1) {
+        console.error("LogaritmicScale requires at least 1 value");
+        return;
+      }
+      const e = Y.new(h);
+      c.current = e, e.setThemes([L.new(e)]), e.interfaceColors.setAll({
+        text: s(o.palette.text.primary),
+        grid: s(o.palette.divider),
+        stroke: s(o.palette.divider)
+      });
+      const r = e.container.children.push(
+        q.new(e, {
+          panX: !0,
+          panY: !0,
+          wheelX: "none",
+          wheelY: "none",
+          pinchZoomX: !0
+        })
+      );
+      r.set("colors", P(e, f)), r.set(
+        "cursor",
+        V.new(e, { behavior: "none" })
+      ).lineY.set("visible", !1);
+      let a, l = i;
+      t[0].type === "date" ? (l = x.orderBy(i, [t[0].value]), a = r.xAxes.push(
+        z.new(e, {
+          maxDeviation: 0.1,
+          groupData: !1,
+          baseInterval: b || { timeUnit: "day", count: 1 },
+          renderer: y.new(e, {}),
+          tooltip: d.new(e, {})
+        })
+      ), (g = a.get("renderer")) == null || g.grid.template.setAll({
+        stroke: s(o.palette.divider),
+        strokeOpacity: 1
+      })) : (a = r.xAxes.push(
+        H.new(e, {
+          categoryField: t[0].value,
+          renderer: y.new(e, {}),
+          tooltip: d.new(e, {})
+        })
+      ), e.numberFormatter.setAll({
+        numberFormat: "#",
+        numericFields: ["valueX"]
+      }), l = x.orderBy(i, [t[0].value]), a.data.setAll(l), (A = a.get("renderer")) == null || A.grid.template.setAll({
+        stroke: s(o.palette.divider),
+        strokeOpacity: 1
+      }));
+      const v = r.yAxes.push(
+        B.new(e, {
+          logarithmic: !0,
+          renderer: G.new(e, { minorGridEnabled: !0 })
+        })
+      );
+      (w = v.get("renderer")) == null || w.grid.template.setAll({
+        stroke: s(o.palette.divider),
+        strokeOpacity: 1
+      }), m.forEach((D) => {
+        const n = r.series.push(
+          N.new(e, {
+            xAxis: a,
+            yAxis: v,
+            valueYField: D.dataFieldName,
+            ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value },
+            tooltip: d.new(e, { labelText: "{valueY}" })
+          })
+        );
+        n.strokes.template.setAll({ strokeWidth: 3 }), t[0].type === "date" && (n.data.processor = U.new(e, {
+          dateFormat: "i",
+          dateFields: [t[0].value]
+        })), n.data.setAll(l), n.appear(1e3);
+      }), r.set(
+        "scrollbarX",
+        W.new(e, { orientation: "horizontal" })
+      ), r.appear(1e3, 100);
+    }, F), () => {
+      var e;
+      p && clearTimeout(p), (e = c.current) == null || e.dispose(), c.current = null;
+    };
+  }, [i, t, m, o.palette.mode, f]);
+  const T = { ...u };
+  return { chartId: h, ownerState: T, sx: k, other: S };
+};
+export {
+  ne as useLogaritmicScaleLogic
+};

package/dist/components/charts/logaritmic-scale/styled.js

@@ -0,0 +1,12 @@
+import { styled as t, Box as r } from "@mui/material";
+const a = t(r, {
+  name: "HCLogaritmicScale",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  width: "100%",
+  height: "100%"
+}));
+export {
+  a as LogaritmicScaleRoot
+};

package/dist/components/charts/multiple-value-axes/index.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useMultipleValueAxesLogic as u } from "./logic.js";
+import { MultipleValueAxesRoot as s } from "./styled.js";
+function n(t) {
+  const { chartId: o, ownerState: i, sx: r, other: l } = u(t);
+  return /* @__PURE__ */ e(s, { ownerState: i, sx: r, ...l, children: /* @__PURE__ */ e("div", { id: o, style: { width: "100%", height: "100%" } }) });
+}
+export {
+  n as MultipleValueAxes
+};

package/dist/components/charts/multiple-value-axes/logic.js

@@ -0,0 +1,191 @@
+import { G as N, R as V, A as W, T as k, b as M } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as j, useTheme as q } from "@mui/material";
+import T from "lodash";
+import { useId as z, useRef as U, useEffect as $ } from "react";
+import { colorSetFromPalette as H } from "../_common/utils.js";
+import { c as C, a as g } from "../../../ColorSet-C7vpNXhM.js";
+import { X as J, V as K } from "../../../AxisRenderer-DTyLLA6c.js";
+import { L as Q } from "../../../Legend-Dp_MKfS4.js";
+import { D as Z } from "../../../DateAxis-YX3QNIB-.js";
+import { A as E, a as ee } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as te } from "../../../CategoryAxis-CwnfaGc8.js";
+import { X as re } from "../../../XYCursor-C8WktvKM.js";
+import { L as se } from "../../../LineSeries-Uiv5o56b.js";
+import { D as oe } from "../../../DataProcessor-CHDO51q4.js";
+import { C as ae } from "../../../Circle-Cy5s-pVc.js";
+import { B as ie } from "../../../Bullet-DVczI2TD.js";
+class A extends N {
+  _beforeChanged() {
+    super._beforeChanged(), (this.isDirty("width") || this.isDirty("height") || this.isPrivateDirty("width") || this.isPrivateDirty("height")) && (this._clear = !0);
+  }
+  _changed() {
+    super._changed(), this._clear && !this.get("draw") && this._draw();
+  }
+  _draw() {
+    const n = this.width(), r = this.height(), s = this._display;
+    s.moveTo(-n / 2, r / 2), s.lineTo(0, -r / 2), s.lineTo(n / 2, r / 2), s.lineTo(-n / 2, r / 2), s.closePath();
+  }
+  _updateSize() {
+    this.markDirty(), this._clear = !0;
+  }
+}
+Object.defineProperty(A, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "Triangle"
+});
+Object.defineProperty(A, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: N.classNames.concat([A.className])
+});
+const w = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ce = (D) => {
+  const n = j({ props: D, name: "HCMultipleValueAxes" }), {
+    dimensions: r,
+    values: s,
+    data: p,
+    initDelay: P = 0,
+    baseInterval: X,
+    colors: L,
+    sx: Y,
+    ...F
+  } = n, h = q(), R = `hc-multiple-value-axes-${z().replace(/:/g, "")}`, x = U(null);
+  $(() => {
+    let y;
+    return y = setTimeout(() => {
+      if (r.length < 1) {
+        console.error("MultipleValueAxes requires at least 1 dimension");
+        return;
+      }
+      if (s.length < 1) {
+        console.error("MultipleValueAxes requires at least 1 value");
+        return;
+      }
+      const e = V.new(R);
+      x.current = e, e.setThemes([W.new(e)]), e.interfaceColors.setAll({
+        text: C(h.palette.text.primary),
+        grid: C(h.palette.divider),
+        stroke: C(h.palette.divider)
+      });
+      const t = e.container.children.push(
+        J.new(e, {
+          panX: !1,
+          panY: !1,
+          wheelX: "none",
+          wheelY: "none",
+          layout: e.verticalLayout
+        })
+      );
+      t.set("colors", H(e, L)), t.get("colors", {}).set("step", 3);
+      const O = t.children.push(
+        Q.new(e, { centerX: g, x: g })
+      ), i = r[0];
+      let u, d = p;
+      i.type === "date" ? (u = t.xAxes.push(
+        Z.new(e, {
+          maxDeviation: 0.1,
+          groupData: !1,
+          baseInterval: X || { timeUnit: "day", count: 1 },
+          renderer: E.new(e, {}),
+          tooltip: k.new(e, {})
+        })
+      ), d = T.orderBy(p, [i.value])) : (u = t.xAxes.push(
+        te.new(e, {
+          categoryField: i.value,
+          renderer: E.new(e, {}),
+          tooltip: k.new(e, {})
+        })
+      ), e.numberFormatter.setAll({
+        numberFormat: "#",
+        numericFields: ["valueX"]
+      }), d = T.orderBy(p, [i.value]), u.data.setAll(d));
+      function _(l, a, c, B, G, v, S) {
+        const m = ee.new(e, { opposite: G }), b = t.yAxes.push(
+          K.new(e, { maxDeviation: 1, renderer: m })
+        );
+        t.yAxes.indexOf(b) > 0 && b.set("syncWithAxis", t.yAxes.getIndex(0));
+        const o = t.series.push(
+          se.new(e, {
+            name: a,
+            xAxis: u,
+            yAxis: b,
+            valueYField: B,
+            ...i.type === "date" ? { valueXField: c } : { categoryXField: c },
+            tooltip: k.new(e, {
+              pointerOrientation: "horizontal",
+              labelText: `${a}: {valueY}`
+            })
+          })
+        );
+        o.strokes.template.setAll({ strokeWidth: 2 }), m.grid.template.set("strokeOpacity", 0.05), m.labels.template.set("fill", o.get("fill")), m.setAll({
+          stroke: o.get("fill"),
+          strokeOpacity: 1,
+          opacity: 1
+        }), S === "date" && (o.data.processor = oe.new(e, {
+          dateFormat: "i",
+          dateFields: [c]
+        })), v !== void 0 && o.bullets.push(function() {
+          let f;
+          return v === "RECTANGLE" ? f = M.new(e, {
+            width: 10,
+            height: 10,
+            centerX: g,
+            centerY: g,
+            strokeWidth: 2,
+            stroke: o.get("stroke"),
+            fill: e.interfaceColors.get("background")
+          }) : v === "TRIANGLE" ? f = A.new(e, {
+            width: 10,
+            height: 10,
+            strokeWidth: 2,
+            stroke: o.get("stroke"),
+            fill: e.interfaceColors.get("background")
+          }) : f = ae.new(e, {
+            strokeWidth: 2,
+            radius: 4,
+            stroke: o.get("stroke"),
+            fill: e.interfaceColors.get("background")
+          }), ie.new(e, { sprite: f });
+        }), o.data.setAll(l);
+      }
+      if (t.set(
+        "cursor",
+        re.new(e, { xAxis: u, behavior: "none" })
+      ).lineY.set("visible", !1), r.length > 1) {
+        const l = T.groupBy(d, r[1].value);
+        Object.keys(l).forEach((a, c) => {
+          _(
+            l[a],
+            a,
+            r[0].value,
+            s[0].dataFieldName,
+            c !== 0,
+            w[c % w.length]
+          );
+        });
+      } else
+        s.forEach((l, a) => {
+          _(
+            d,
+            l.name,
+            i.value,
+            l.dataFieldName,
+            a !== 0,
+            w[a % w.length],
+            i.type
+          );
+        });
+      O.data.setAll(t.series.values), t.appear(1e3, 100);
+    }, P), () => {
+      var e;
+      y && clearTimeout(y), (e = x.current) == null || e.dispose(), x.current = null;
+    };
+  }, [p, r, s, h.palette.mode, L]);
+  const I = { ...n };
+  return { chartId: R, ownerState: I, sx: Y, other: F };
+};
+export {
+  Ce as useMultipleValueAxesLogic
+};

package/dist/components/charts/multiple-value-axes/styled.js

@@ -0,0 +1,12 @@
+import { styled as t, Box as e } from "@mui/material";
+const r = t(e, {
+  name: "HCMultipleValueAxes",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  width: "100%",
+  height: "100%"
+}));
+export {
+  r as MultipleValueAxesRoot
+};

package/dist/components/charts/nested-pie/index.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useNestedPieLogic as s } from "./logic.js";
+import { NestedPieRoot as h } from "./styled.js";
+function f(t) {
+  const { chartId: o, ownerState: i, sx: r, other: d } = s(t);
+  return /* @__PURE__ */ e(h, { ownerState: i, sx: r, ...d, children: /* @__PURE__ */ e("div", { id: o, style: { width: "100%", height: "100%" } }) });
+}
+export {
+  f as NestedPie
+};

package/dist/components/charts/nested-pie/logic.js

@@ -0,0 +1,110 @@
+import { R, A as C } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as S, useTheme as E } from "@mui/material";
+import L from "dayjs";
+import P from "lodash";
+import { useId as j, useRef as q, useEffect as B } from "react";
+import { colorSetFromPalette as H } from "../_common/utils.js";
+import { c as u, p as o } from "../../../ColorSet-C7vpNXhM.js";
+import { P as I, a as T } from "../../../PieSeries-B2fW3z0s.js";
+const Q = (F) => {
+  const h = S({ props: F, name: "HCNestedPie" }), {
+    dimensions: r,
+    values: s,
+    data: n,
+    initDelay: N = 0,
+    colors: v,
+    sx: b,
+    ...x
+  } = h, i = E(), g = `hc-nested-pie-${j().replace(/:/g, "")}`, d = q(null);
+  B(() => {
+    let m;
+    return m = setTimeout(() => {
+      if (r.length < 2) {
+        console.error("NestedPie requires at least 2 dimensions");
+        return;
+      }
+      if (s.length < 1) {
+        console.error("NestedPie requires at least 1 value");
+        return;
+      }
+      const e = R.new(g);
+      d.current = e, e.setThemes([C.new(e)]), e.interfaceColors.setAll({
+        text: u(i.palette.text.primary),
+        grid: u(i.palette.divider),
+        stroke: u(i.palette.divider)
+      });
+      const p = e.container.children.push(
+        I.new(e, {
+          layout: e.verticalLayout,
+          radius: o(100)
+        })
+      );
+      r[0].type === "date" && n.forEach((a) => {
+        let l = "YYYY";
+        r[0].value.includes("month") ? l = "MMM YYYY" : r[0].value.includes("day") && (l = "DD MMM YYYY"), a[r[0].value] = L(a[r[0].value]).format(
+          l
+        );
+      });
+      const f = P.orderBy(n, (a) => a[r[0].value]);
+      r.forEach((a, l) => {
+        const y = e.interfaceColors.get("background");
+        if (l === 0) {
+          const t = p.series.push(
+            T.new(e, {
+              valueField: s[0].dataFieldName,
+              categoryField: a.value,
+              alignLabels: !1,
+              radius: o(80),
+              innerRadius: o(25)
+            })
+          );
+          if (t.ticks.template.setAll({ forceHidden: !0 }), t.labels.template.setAll({
+            radius: -10,
+            text: "{category}",
+            textType: "radial",
+            centerX: o(100)
+          }), t.slices.template.setAll({
+            stroke: y,
+            strokeWidth: 2,
+            fill: u(11184810),
+            tooltipText: "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value})"
+          }), t.slices.template.states.create("hover", { scale: 0.95 }), r.length > 1) {
+            const c = [], Y = P.groupBy(f, a.value);
+            Object.keys(Y).forEach((A) => {
+              const w = Y[A].reduce((D, M) => D + M[s[0].dataFieldName], 0);
+              c.push({
+                [a.value]: A,
+                [s[0].dataFieldName]: w
+              });
+            }), t.data.setAll(c);
+          } else
+            t.data.setAll(f);
+        } else if (l === 1) {
+          const t = p.series.push(
+            T.new(e, {
+              valueField: s[0].dataFieldName,
+              categoryField: a.value,
+              alignLabels: !0,
+              innerRadius: o(80),
+              radius: o(100)
+            })
+          ), c = H(e, v);
+          t.set("colors", c), t.slices.template.setAll({
+            stroke: y,
+            strokeWidth: 2,
+            templateField: "settings",
+            tooltipText: "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value})"
+          }), t.labels.template.setAll({ text: "{category}" }), t.data.setAll(f);
+        }
+      }), p.appear(1e3, 100);
+    }, N), () => {
+      var e;
+      m && clearTimeout(m), (e = d.current) == null || e.dispose(), d.current = null;
+    };
+  }, [n, r, s, i.palette.mode, v]);
+  const k = { ...h };
+  return { chartId: g, ownerState: k, sx: b, other: x };
+};
+export {
+  Q as useNestedPieLogic
+};

package/dist/components/charts/nested-pie/styled.js

@@ -0,0 +1,12 @@
+import { styled as t, Box as e } from "@mui/material";
+const d = t(e, {
+  name: "HCNestedPie",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  width: "100%",
+  height: "100%"
+}));
+export {
+  d as NestedPieRoot
+};

package/dist/components/charts/packed-circles/index.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { usePackedCirclesLogic as d } from "./logic.js";
+import { PackedCirclesRoot as s } from "./styled.js";
+function a(e) {
+  const { chartId: t, ownerState: o, sx: i, other: c } = d(e);
+  return /* @__PURE__ */ r(s, { ownerState: o, sx: i, ...c, children: /* @__PURE__ */ r("div", { id: t, style: { width: "100%", height: "100%" } }) });
+}
+export {
+  a as PackedCircles
+};