@hybridcore/ui 1.5.89 → 1.6.0

package/dist/components/charts/drill-down-voronoi-treemap/styled.js

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

package/dist/components/charts/heatmap/index.js

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

package/dist/components/charts/heatmap/logic.js

@@ -0,0 +1,361 @@
+import { m as Q, s as Z, C as D, L as $, k as ee, l as te, T as J, R as re, A as ae } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as ie, useTheme as se } from "@mui/material";
+import oe from "dayjs";
+import Y from "lodash";
+import { useId as ne, useRef as le, useEffect as ce } from "react";
+import { colorSetFromPalette as ue } from "../_common/utils.js";
+import { E as K, e as he, f as G, u as F, m as W, b as p, p as H, c as O } from "../../../ColorSet-C7vpNXhM.js";
+import { X as de } from "../../../AxisRenderer-DTyLLA6c.js";
+import { A as me, a as pe } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as X } from "../../../CategoryAxis-CwnfaGc8.js";
+import { R as fe } from "../../../RoundedRectangle-CWLi2PXn.js";
+import { C as ge } from "../../../ColumnSeries-CjgdJ2QL.js";
+class T extends K {
+  _afterNew() {
+    super._afterNewApplyThemes();
+  }
+  /**
+   * @ignore
+   */
+  getFill(i) {
+    return {
+      addColorStop: (s, e) => {
+      }
+    };
+  }
+  _changed() {
+    super._changed();
+  }
+  /**
+   * @ignore
+   */
+  getBounds(i) {
+    const s = this.get("target");
+    if (s) {
+      let e = s.globalBounds();
+      const r = i.toLocal({ x: e.left, y: e.top }), l = i.toLocal({ x: e.right, y: e.top }), o = i.toLocal({ x: e.right, y: e.bottom }), a = i.toLocal({ x: e.left, y: e.bottom });
+      return {
+        left: Math.min(r.x, l.x, o.x, a.x),
+        top: Math.min(r.y, l.y, o.y, a.y),
+        right: Math.max(r.x, l.x, o.x, a.x),
+        bottom: Math.max(r.y, l.y, o.y, a.y)
+      };
+    }
+    return i._display.getLocalBounds();
+  }
+}
+Object.defineProperty(T, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "Gradient"
+});
+Object.defineProperty(T, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: K.classNames.concat([T.className])
+});
+class P extends T {
+  /**
+   * @ignore
+   */
+  getFill(i) {
+    const s = this.get("rotation", 0);
+    let e = this.getBounds(i), r = e.left || 0, l = e.right || 0, o = e.top || 0, a = e.bottom || 0, m = Q(s), f = Z(s), c = m * (l - r), u = f * (a - o);
+    c == 0 && (c = 1), u == 0 && (u = 1);
+    let h = Math.max(c, u);
+    const g = this._root._renderer.createLinearGradient(r, o, r + h * m, o + h * f), A = this.get("stops");
+    if (A) {
+      let C = 0;
+      he(A, (t) => {
+        let d = t.offset;
+        G(d) || (d = C / (A.length - 1));
+        let v = t.opacity;
+        G(v) || (v = 1);
+        let n = t.color;
+        if (n) {
+          const w = t.lighten;
+          w && (n = F.lighten(n, w));
+          const b = t.brighten;
+          b && (n = F.brighten(n, b)), g.addColorStop(d, "rgba(" + n.r + "," + n.g + "," + n.b + "," + v + ")");
+        }
+        C++;
+      });
+    }
+    return g;
+  }
+}
+Object.defineProperty(P, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "LinearGradient"
+});
+Object.defineProperty(P, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: T.classNames.concat([P.className])
+});
+class V extends D {
+  constructor() {
+    super(...arguments), Object.defineProperty(this, "labelContainer", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: this.children.push(D.new(this._root, {}))
+    }), Object.defineProperty(this, "markerContainer", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: this.children.push(D.new(this._root, {}))
+    }), Object.defineProperty(this, "startLabel", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: this.labelContainer.children.push($.new(this._root, { themeTags: ["start"] }))
+    }), Object.defineProperty(this, "endLabel", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: this.labelContainer.children.push($.new(this._root, { themeTags: ["end"] }))
+    }), Object.defineProperty(this, "markers", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: this.addDisposer(new ee(te.new({}), () => fe._new(this._root, {
+        themeTags: W(this.markers.template.get("themeTags", []), [this.get("orientation"), "heatlegend", "marker"])
+      }, [this.markers.template])))
+    });
+  }
+  _afterNew() {
+    this._settings.themeTags = W(this._settings.themeTags, ["heatlegend", this._settings.orientation]), super._afterNew(), this.set("tooltip", J.new(this._root, {
+      themeTags: ["heatlegend"]
+    }));
+  }
+  /**
+   * @ignore
+   */
+  makeMarker() {
+    const i = this.markers.make();
+    return i.states.create("disabled", {}), i;
+  }
+  /**
+   * Moves and shows tooltip at specific value.
+   *
+   * Can also specify optional text to show in tooltip, as well as the color.
+   *
+   * @param  value  Value
+   * @param  text   Text
+   * @param  color  Color
+   */
+  showValue(i, s, e) {
+    const r = this.getTooltip();
+    if (r && G(i)) {
+      const l = this.get("startValue", 0), o = this.get("endValue", 1);
+      let a = (i - l) / (o - l);
+      (a == 1 / 0 || a == -1 / 0 || isNaN(a)) && (a = 0.5);
+      const m = this.get("startColor"), f = this.get("endColor");
+      s || (s = this.getNumberFormatter().format(i)), e || (e = F.interpolate(a, m, f)), r.label.set("text", s);
+      let c;
+      this.get("orientation") == "vertical" ? c = this.markerContainer.toGlobal({ x: 0, y: this.innerHeight() * (1 - a) }) : c = this.markerContainer.toGlobal({ x: this.innerWidth() * a, y: 0 });
+      let u = r.get("background");
+      u && u.set("fill", e), r.set("pointTo", c), r.show();
+    }
+  }
+  _prepareChildren() {
+    super._prepareChildren();
+    const i = this.labelContainer, s = this.get("orientation"), e = this.startLabel, r = this.endLabel, l = this.getTooltip();
+    if (this.isDirty("orientation") && (s == "vertical" ? (this.markerContainer.setAll({ layout: this._root.verticalLayout, height: p }), this.set("layout", this._root.horizontalLayout), e.setAll({ y: p, x: void 0, centerY: p, centerX: p }), r.setAll({ y: 0, x: void 0, centerY: 0, centerX: p }), i.setAll({ height: p, width: void 0 }), l && l.set("pointerOrientation", "horizontal")) : (this.markerContainer.setAll({ layout: this._root.horizontalLayout, width: p }), this.set("layout", this._root.verticalLayout), e.setAll({ x: 0, y: void 0, centerX: 0, centerY: 0 }), r.setAll({ x: p, y: void 0, centerX: p, centerY: 0 }), i.setAll({ width: p, height: void 0 }), l && l.set("pointerOrientation", "vertical"))), this.isDirty("stepCount")) {
+      const o = this.get("stepCount", 1), a = this.get("startColor"), m = this.get("endColor"), f = this.get("startOpacity", 1), c = this.get("endOpacity", 1);
+      if (this.markerContainer.children.clear(), o > 1)
+        for (let u = 0; u < o; u++) {
+          const h = this.makeMarker();
+          s == "vertical" ? this.markerContainer.children.moveValue(h, 0) : this.markerContainer.children.push(h), a && m && h.setAll({
+            fill: F.interpolate(u / o, a, m),
+            fillOpacity: H(u / o * 100).interpolate(f, c)
+          });
+        }
+      else if (o == 1) {
+        const u = this.makeMarker();
+        this.markerContainer.children.push(u);
+        const h = P.new(this._root, {
+          stops: [{
+            color: a,
+            opacity: f
+          }, {
+            color: m,
+            opacity: c
+          }]
+        });
+        if (s == "vertical") {
+          h.set("rotation", 90);
+          let g = h.get("stops");
+          g && g.reverse();
+        } else
+          h.set("rotation", 0);
+        a && m && u.set("fillGradient", h);
+      }
+    }
+    (this.isDirty("startText") || this.isDirty("startValue")) && e.set("text", this.get("startText", this.getNumberFormatter().format(this.get("startValue", 0)))), (this.isDirty("endText") || this.isDirty("endValue")) && r.set("text", this.get("endText", this.getNumberFormatter().format(this.get("endValue", 1))));
+  }
+}
+Object.defineProperty(V, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "HeatLegend"
+});
+Object.defineProperty(V, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: D.classNames.concat([V.className])
+});
+const Ye = (L) => {
+  const i = ie({ props: L, name: "HCHeatmap" }), {
+    dimensions: s,
+    values: e,
+    data: r,
+    initDelay: l = 0,
+    baseInterval: o,
+    colors: a,
+    sx: m,
+    ...f
+  } = i, c = se(), h = `hc-heatmap-${ne().replace(/:/g, "")}`, g = le(null);
+  ce(() => {
+    let C;
+    return C = setTimeout(() => {
+      var I, E;
+      if (s.length < 2) {
+        console.error("Heatmap requires at least 2 dimensions");
+        return;
+      }
+      if (e.length < 1) {
+        console.error("Heatmap requires at least 1 value");
+        return;
+      }
+      const t = re.new(h);
+      g.current = t, t.setThemes([ae.new(t)]), t.interfaceColors.setAll({
+        text: O(c.palette.text.primary),
+        grid: O(c.palette.divider),
+        stroke: O(c.palette.divider)
+      });
+      const d = t.container.children.push(
+        de.new(t, {
+          panX: !1,
+          panY: !1,
+          wheelX: "none",
+          wheelY: "none",
+          layout: t.verticalLayout
+        })
+      );
+      d.set("colors", ue(t, a));
+      const v = me.new(t, {
+        visible: !1,
+        minGridDistance: 30
+      });
+      v.grid.template.set("visible", !1);
+      const n = s[0];
+      let w, b = r;
+      if (n.type === "date") {
+        const y = (o == null ? void 0 : o.timeUnit) || "day";
+        let k = "DD/MM/YYYY";
+        y === "month" ? k = "MM YYYY" : y === "year" && (k = "YYYY"), w = d.xAxes.push(
+          X.new(t, {
+            categoryField: n.value,
+            renderer: v
+          })
+        ), b = Y.orderBy(r, [n.value]), b = b.map((_) => ({
+          ..._,
+          [n.value]: oe(_[n.value]).format(k)
+        }));
+      } else
+        w = d.xAxes.push(
+          X.new(t, {
+            categoryField: n.value,
+            renderer: v,
+            tooltip: J.new(t, {})
+          })
+        );
+      const B = Y.uniqBy(b, n.value);
+      if (w.data.setAll(B), e.length === 1 && s.length > 1) {
+        const y = s[1].value, k = pe.new(t, {
+          visible: !1,
+          minGridDistance: 20,
+          inversed: !0
+        });
+        k.grid.template.set("visible", !1);
+        const _ = d.yAxes.push(
+          X.new(t, {
+            maxDeviation: 0,
+            renderer: k,
+            categoryField: y
+          })
+        ), S = t.interfaceColors.get("background"), j = d.bottomAxesContainer.children.push(
+          V.new(t, {
+            orientation: "horizontal",
+            startColor: S,
+            endColor: (I = d.get("colors")) == null ? void 0 : I.getIndex(0),
+            startOpacity: 1,
+            endOpacity: 1
+          })
+        ), x = d.series.push(
+          ge.new(t, {
+            calculateAggregates: !0,
+            stroke: O(16777215),
+            clustered: !1,
+            xAxis: w,
+            yAxis: _,
+            categoryXField: n.value,
+            categoryYField: y,
+            valueField: e[0].dataFieldName
+          })
+        );
+        x.columns.template.setAll({
+          tooltipText: "{categoryY}, {categoryX}: {value}",
+          strokeOpacity: 1,
+          strokeWidth: 2,
+          width: H(100),
+          height: H(100)
+        }), x.columns.template.events.on("pointerover", function(R) {
+          const N = R.target.dataItem;
+          N && j.showValue(N.get(y, 0));
+        }), x.events.on("datavalidated", function() {
+          j.set("startValue", x.getPrivate("valueLow")), j.set("endValue", x.getPrivate("valueHigh"));
+        }), x.set("heatRules", [
+          {
+            target: x.columns.template,
+            min: S,
+            max: (E = d.get("colors")) == null ? void 0 : E.getIndex(0),
+            dataField: "value",
+            key: "fill"
+          }
+        ]);
+        const q = Y.uniqBy(b, y), M = [];
+        B.forEach((R) => {
+          q.forEach((N) => {
+            const z = {
+              [n.value]: R[n.value],
+              [y]: N[y]
+            }, U = Y.find(b, z);
+            U === void 0 ? M.push({
+              ...z,
+              [e[0].dataFieldName]: 0
+            }) : M.push(U);
+          });
+        }), _.data.setAll(q), x.data.setAll(M);
+      }
+      d.appear(1e3, 100);
+    }, l), () => {
+      var t;
+      C && clearTimeout(C), (t = g.current) == null || t.dispose(), g.current = null;
+    };
+  }, [r, s, e, c.palette.mode, a]);
+  const A = { ...i };
+  return { chartId: h, ownerState: A, sx: m, other: f };
+};
+export {
+  Ye as useHeatmapLogic
+};

package/dist/components/charts/heatmap/styled.js

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