@hybridcore/ui 1.6.14 → 1.6.17

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

@@ -1,22 +1,22 @@
 import { R as j, A as q } from "../../../AnimatedTheme-ktdO3Bel.js";
 import { useThemeProps as z, useTheme as U } from "@mui/material";
-import D from "lodash";
+import v from "lodash";
 import { useId as H, useRef as $, useEffect as J } from "react";
 import { humanizeLabel as P } from "../_common/format.js";
 import { attachCombinedAxisTooltip as K } from "../_common/tooltip.js";
-import { colorSetFromPalette as Q, applyValueFormat as Z } from "../_common/utils.js";
+import { colorSetFromPalette as Q, applyDateAxisLabelFormat as Z, applyValueFormat as ee } from "../_common/utils.js";
 import { c as C, a as A } from "../../../Entity-BJCuhdq_.js";
-import { X as ee, V as te } from "../../../AxisRenderer-BCQoUJw6.js";
-import { L as re } from "../../../Legend-CFvQiIfn.js";
-import { A as X, a as se } from "../../../AxisRendererY-AXWvGU6r.js";
-import { C as ae } from "../../../CategoryAxis-B6NqW8qd.js";
-import { X as ie } from "../../../XYCursor-CVUSpqb9.js";
-import { G as oe, D as le } from "../../../GaplessDateAxis-B2g2jgSG.js";
-import { D as ne } from "../../../DateAxis-DEXKps1S.js";
-import { L as ce } from "../../../LineSeries-D_IL2qGF.js";
-import { G, R as me } from "../../../Tooltip-vyZRZWih.js";
-import { C as ue } from "../../../Circle-BnfBNKBD.js";
-import { B as pe } from "../../../Bullet-Djj7Vs9T.js";
+import { X as te, V as re } from "../../../AxisRenderer-BCQoUJw6.js";
+import { L as se } from "../../../Legend-CFvQiIfn.js";
+import { A as X, a as ae } from "../../../AxisRendererY-AXWvGU6r.js";
+import { C as ie } from "../../../CategoryAxis-B6NqW8qd.js";
+import { X as oe } from "../../../XYCursor-CVUSpqb9.js";
+import { G as le, D as ne } from "../../../GaplessDateAxis-B2g2jgSG.js";
+import { D as ce } from "../../../DateAxis-DEXKps1S.js";
+import { L as me } from "../../../LineSeries-D_IL2qGF.js";
+import { G, R as ue } from "../../../Tooltip-vyZRZWih.js";
+import { C as pe } from "../../../Circle-BnfBNKBD.js";
+import { B as de } from "../../../Bullet-Djj7Vs9T.js";
 class y extends G {
   _beforeChanged() {
     super._beforeChanged(), (this.isDirty("width") || this.isDirty("height") || this.isPrivateDirty("width") || this.isPrivateDirty("height")) && (this._clear = !0);
@@ -25,8 +25,8 @@ class y extends G {
     super._changed(), this._clear && !this.get("draw") && this._draw();
   }
   _draw() {
-    const n = this.width(), s = this.height(), t = this._display;
-    t.moveTo(-n / 2, s / 2), t.lineTo(0, -s / 2), t.lineTo(n / 2, s / 2), t.lineTo(-n / 2, s / 2), t.closePath();
+    const c = this.width(), s = this.height(), t = this._display;
+    t.moveTo(-c / 2, s / 2), t.lineTo(0, -s / 2), t.lineTo(c / 2, s / 2), t.lineTo(-c / 2, s / 2), t.closePath();
   }
   _updateSize() {
     this.markDirty(), this._clear = !0;
@@ -44,8 +44,8 @@ Object.defineProperty(y, "classNames", {
   writable: !0,
   value: G.classNames.concat([y.className])
 });
-const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Xe = (T) => {
-  const n = z({ props: T, name: "HCMultipleValueAxes" }), {
+const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
+  const c = z({ props: T, name: "HCMultipleValueAxes" }), {
     dimensions: s,
     values: t,
     data: d,
@@ -55,13 +55,13 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Xe = (T) => {
     skipEmptyDates: E = !1,
     sx: Y,
     ...V
-  } = n, u = U(), _ = `hc-multiple-value-axes-${H().replace(/:/g, "")}`, w = $(null);
+  } = c, u = U(), _ = `hc-multiple-value-axes-${H().replace(/:/g, "")}`, w = $(null);
   let h = null;
   s.length < 1 ? h = "MultipleValueAxes requires at least 1 dimension" : t.length < 1 && (h = "MultipleValueAxes requires at least 1 value"), J(() => {
     if (h) return;
     let b;
     return b = setTimeout(() => {
-      var F;
+      var N;
       const e = j.new(_);
       w.current = e, e.setThemes([q.new(e)]), e.interfaceColors.setAll({
         text: C(u.palette.text.primary),
@@ -69,7 +69,7 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Xe = (T) => {
         stroke: C(u.palette.divider)
       });
       const r = e.container.children.push(
-        ee.new(e, {
+        te.new(e, {
           panX: !1,
           panY: !1,
           wheelX: "none",
@@ -80,91 +80,91 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Xe = (T) => {
       );
       r.set("colors", Q(e, R)), r.get("colors", {}).set("step", 3);
       const O = r.children.push(
-        re.new(e, { centerX: A, x: A })
-      ), o = s[0];
-      let c, p = d;
-      if (o.type === "date") {
-        const a = E ? oe : ne;
-        c = r.xAxes.push(
+        se.new(e, { centerX: A, x: A })
+      ), i = s[0];
+      let l, p = d;
+      if (i.type === "date") {
+        const a = E ? le : ce;
+        l = r.xAxes.push(
           a.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
             baseInterval: L || { timeUnit: "day", count: 1 },
             renderer: X.new(e, {})
           })
-        ), p = D.orderBy(d, [o.value]);
+        ), Z(l, i), p = v.orderBy(d, [i.value]);
       } else
-        c = r.xAxes.push(
-          ae.new(e, {
-            categoryField: o.value,
+        l = r.xAxes.push(
+          ie.new(e, {
+            categoryField: i.value,
             renderer: X.new(e, {})
           })
         ), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), p = D.orderBy(d, [o.value]), c.data.setAll(p);
-      function N(a, l, m, S, W, k, M) {
-        const f = se.new(e, { opposite: W }), v = r.yAxes.push(
-          te.new(e, { maxDeviation: 1, renderer: f })
+        }), p = v.orderBy(d, [i.value]), l.data.setAll(p);
+      function F(a, n, m, S, W, D, M) {
+        const f = ae.new(e, { opposite: W }), k = r.yAxes.push(
+          re.new(e, { maxDeviation: 1, renderer: f })
         );
-        r.yAxes.indexOf(v) > 0 && v.set("syncWithAxis", r.yAxes.getIndex(0));
-        const i = r.series.push(
-          ce.new(e, {
-            name: l,
-            xAxis: c,
-            yAxis: v,
+        r.yAxes.indexOf(k) > 0 && k.set("syncWithAxis", r.yAxes.getIndex(0));
+        const o = r.series.push(
+          me.new(e, {
+            name: n,
+            xAxis: l,
+            yAxis: k,
             valueYField: S,
-            ...o.type === "date" ? { valueXField: m } : { categoryXField: m }
+            ...i.type === "date" ? { valueXField: m } : { categoryXField: m }
           })
         );
-        i.strokes.template.setAll({ strokeWidth: 2 }), f.grid.template.set("strokeOpacity", 0.05), f.labels.template.set("fill", i.get("fill")), f.setAll({
-          stroke: i.get("fill"),
+        o.strokes.template.setAll({ strokeWidth: 2 }), f.grid.template.set("strokeOpacity", 0.05), f.labels.template.set("fill", o.get("fill")), f.setAll({
+          stroke: o.get("fill"),
           strokeOpacity: 1,
           opacity: 1
-        }), M === "date" && (i.data.processor = le.new(e, {
+        }), M === "date" && (o.data.processor = ne.new(e, {
           dateFormat: "i",
           dateFields: [m]
-        })), k !== void 0 && i.bullets.push(function() {
+        })), D !== void 0 && o.bullets.push(function() {
           let g;
-          return k === "RECTANGLE" ? g = me.new(e, {
+          return D === "RECTANGLE" ? g = ue.new(e, {
             width: 10,
             height: 10,
             centerX: A,
             centerY: A,
             strokeWidth: 2,
-            stroke: i.get("stroke"),
+            stroke: o.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }) : k === "TRIANGLE" ? g = y.new(e, {
+          }) : D === "TRIANGLE" ? g = y.new(e, {
             width: 10,
             height: 10,
             strokeWidth: 2,
-            stroke: i.get("stroke"),
+            stroke: o.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }) : g = ue.new(e, {
+          }) : g = pe.new(e, {
             strokeWidth: 2,
             radius: 4,
-            stroke: i.get("stroke"),
+            stroke: o.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }), pe.new(e, { sprite: g });
-        }), i.data.setAll(a);
+          }), de.new(e, { sprite: g });
+        }), o.data.setAll(a);
       }
       if (r.set(
         "cursor",
-        ie.new(e, { xAxis: c, behavior: "none" })
+        oe.new(e, { xAxis: l, behavior: "none" })
       ).lineY.set("visible", !1), K({
         root: e,
         chart: r,
-        xAxis: c,
+        xAxis: l,
         theme: u,
-        isDateAxis: o.type === "date",
+        isDateAxis: i.type === "date",
         baseInterval: L,
         follow: !0
       }), s.length > 1) {
-        const a = D.groupBy(p, s[1].value);
-        Object.keys(a).forEach((l, m) => {
-          N(
-            a[l],
-            P(l),
+        const a = v.groupBy(p, s[1].value);
+        Object.keys(a).forEach((n, m) => {
+          F(
+            a[n],
+            P(n),
             s[0].value,
             t[0].dataFieldName,
             m !== 0,
@@ -172,26 +172,26 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Xe = (T) => {
           );
         });
       } else
-        t.forEach((a, l) => {
-          N(
+        t.forEach((a, n) => {
+          F(
             p,
             a.label ?? P(a.name),
-            o.value,
+            i.value,
             a.dataFieldName,
-            l !== 0,
-            x[l % x.length],
-            o.type
+            n !== 0,
+            x[n % x.length],
+            i.type
           );
         });
-      O.data.setAll(r.series.values), Z(e, (F = t == null ? void 0 : t[0]) == null ? void 0 : F.format), r.appear(1e3, 100);
+      O.data.setAll(r.series.values), ee(e, (N = t == null ? void 0 : t[0]) == null ? void 0 : N.format), r.appear(1e3, 100);
     }, I), () => {
       var e;
       b && clearTimeout(b), (e = w.current) == null || e.dispose(), w.current = null;
     };
   }, [d, s, t, u.palette.mode, R, E]);
-  const B = { ...n };
+  const B = { ...c };
   return { chartId: _, ownerState: B, sx: Y, error: h, other: V };
 };
 export {
-  Xe as useMultipleValueAxesLogic
+  Ge as useMultipleValueAxesLogic
 };

package/dist/components/charts/xy-chart/logic.js

@@ -1,46 +1,46 @@
-import { R as P, A as V } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as W, useTheme as z } from "@mui/material";
-import k from "lodash";
-import { useId as N, useRef as j, useEffect as H } from "react";
-import { humanizeLabel as F } from "../_common/format.js";
-import { attachCombinedAxisTooltip as M } from "../_common/tooltip.js";
-import { colorSetFromPalette as U, applyValueFormat as _ } from "../_common/utils.js";
-import { c, a as x, p as $ } from "../../../Entity-BJCuhdq_.js";
-import { X as q, V as J } from "../../../AxisRenderer-BCQoUJw6.js";
-import { L as K } from "../../../Legend-CFvQiIfn.js";
-import { A as L, a as Q } from "../../../AxisRendererY-AXWvGU6r.js";
-import { C as Z } from "../../../CategoryAxis-B6NqW8qd.js";
-import { T as ee, R as te, L as re } from "../../../Tooltip-vyZRZWih.js";
-import { X as oe } from "../../../XYCursor-CVUSpqb9.js";
-import { G as ae, D as se } from "../../../GaplessDateAxis-B2g2jgSG.js";
-import { D as ie } from "../../../DateAxis-DEXKps1S.js";
-import { C as ne } from "../../../ColumnSeries-CtRTsn-E.js";
-import { B as le } from "../../../Bullet-Djj7Vs9T.js";
-const Fe = (R) => {
-  const A = W({ props: R, name: "HCXYChart" }), {
-    dimensions: p,
-    values: n,
-    data: d,
-    initDelay: O = 0,
-    baseInterval: y,
-    colors: g,
-    skipEmptyDates: w = !1,
-    sx: B,
-    ...E
-  } = A, i = z(), b = `hc-xy-chart-${N().replace(/:/g, "")}`, u = j(null), v = p.length < 1 ? "Missing dimensions config!" : null;
-  H(() => {
-    if (v) return;
-    let f;
-    return f = setTimeout(() => {
-      var T, X, Y;
-      const e = P.new(b);
-      u.current = e, e.setThemes([V.new(e)]), e.interfaceColors.setAll({
-        text: c(i.palette.text.primary),
-        grid: c(i.palette.divider),
-        stroke: c(i.palette.divider)
+import { R as K, A as Q } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as Z, useTheme as ee } from "@mui/material";
+import y from "lodash";
+import { useId as te, useRef as re, useEffect as oe } from "react";
+import { humanizeLabel as E } from "../_common/format.js";
+import { attachCombinedAxisTooltip as ae } from "../_common/tooltip.js";
+import { colorSetFromPalette as se, applyDateAxisLabelFormat as ie, applyValueFormat as ne } from "../_common/utils.js";
+import { c as p, a as S, p as z } from "../../../Entity-BJCuhdq_.js";
+import { X as le, V as ce } from "../../../AxisRenderer-BCQoUJw6.js";
+import { L as me } from "../../../Legend-CFvQiIfn.js";
+import { C as pe } from "../../../CategoryAxis-B6NqW8qd.js";
+import { T as de, R as ue } from "../../../Tooltip-vyZRZWih.js";
+import { X as fe } from "../../../XYCursor-CVUSpqb9.js";
+import { a as B, A as G } from "../../../AxisRendererY-AXWvGU6r.js";
+import { G as he, D as xe } from "../../../GaplessDateAxis-B2g2jgSG.js";
+import { D as Ae } from "../../../DateAxis-DEXKps1S.js";
+import { C as ye } from "../../../ColumnSeries-CtRTsn-E.js";
+const Be = (I) => {
+  const g = Z({ props: I, name: "HCXYChart" }), {
+    dimensions: l,
+    values: c,
+    data: f,
+    initDelay: V = 0,
+    baseInterval: v,
+    colors: w,
+    skipEmptyDates: b = !1,
+    orientation: D = "vertical",
+    sx: W,
+    ...N
+  } = g, n = ee(), X = `hc-xy-chart-${te().replace(/:/g, "")}`, h = re(null), C = l.length < 1 ? "Missing dimensions config!" : null;
+  oe(() => {
+    if (C) return;
+    let x;
+    return x = setTimeout(() => {
+      var k, L, O;
+      const t = D === "horizontal", e = K.new(X);
+      h.current = e, e.setThemes([Q.new(e)]), e.interfaceColors.setAll({
+        text: p(n.palette.text.primary),
+        grid: p(n.palette.divider),
+        stroke: p(n.palette.divider)
       });
-      const r = e.container.children.push(
-        q.new(e, {
+      const a = e.container.children.push(
+        le.new(e, {
           panX: !1,
           panY: !1,
           wheelX: "none",
@@ -50,137 +50,138 @@ const Fe = (R) => {
           layout: e.verticalLayout
         })
       );
-      r.set("colors", U(e, g));
-      const G = r.children.push(
-        K.new(e, {
-          centerX: x,
-          x
+      a.set("colors", se(e, w));
+      const q = a.children.push(
+        me.new(e, {
+          centerX: S,
+          x: S
         })
-      ), a = p[0];
-      let o, m = d;
-      if (a.type === "date") {
-        const t = w ? ae : ie;
-        o = r.xAxes.push(
-          t.new(e, {
+      ), s = l[0], F = t ? B : G, H = t ? G : B, R = t ? a.yAxes : a.xAxes, M = t ? a.xAxes : a.yAxes;
+      let o, d = f;
+      if (s.type === "date") {
+        const r = b ? he : Ae;
+        o = R.push(
+          r.new(e, {
             maxDeviation: 0,
-            baseInterval: y || { timeUnit: "day", count: 1 },
-            renderer: L.new(e, { minGridDistance: 60 })
+            baseInterval: v || { timeUnit: "day", count: 1 },
+            renderer: F.new(e, { minGridDistance: 60 })
           })
-        ), m = k.orderBy(d, [a.value]);
+        ), ie(o, s), d = y.orderBy(f, [s.value]);
       } else {
-        const t = L.new(e, {
+        const r = F.new(e, {
           cellStartLocation: 0.1,
           cellEndLocation: 0.9,
           minGridDistance: 30
         });
-        o = r.xAxes.push(
-          Z.new(e, {
-            categoryField: a.value,
-            renderer: t
+        o = R.push(
+          pe.new(e, {
+            categoryField: s.value,
+            renderer: r
           })
-        ), t.grid.template.setAll({ location: 1 }), o.labelsContainer.set(
+        ), r.grid.template.setAll({ location: 1 }), o.labelsContainer.set(
           "tooltip",
-          ee.new(e, { pointerOrientation: "down" })
-        ), t.labels.template.setAll({
+          de.new(e, {
+            pointerOrientation: t ? "right" : "down"
+          })
+        ), r.labels.template.setAll({
           oversizedBehavior: "truncate",
           maxWidth: 150,
           tooltipText: "{category}"
-        }), t.labels.template.setup = function(s) {
-          s.set(
+        }), r.labels.template.setup = function(i) {
+          i.set(
             "background",
-            te.new(e, {
-              fill: c(0),
+            ue.new(e, {
+              fill: p(0),
               fillOpacity: 0
             })
           );
-        }, o.onPrivate("cellWidth", function(s) {
-          t.labels.template.set("maxWidth", s);
+        }, t || o.onPrivate("cellWidth", function(i) {
+          r.labels.template.set("maxWidth", i);
         }), e.numberFormatter.setAll({
           numberFormat: "#",
-          numericFields: ["valueX"]
-        }), o.data.setAll(m);
+          numericFields: [t ? "valueY" : "valueX"]
+        });
+        const m = l.length > 1 ? y.uniqBy(d, s.value) : d;
+        o.data.setAll(m);
       }
-      const D = r.yAxes.push(
-        J.new(e, {
-          renderer: Q.new(e, { strokeOpacity: 0.1 })
+      const A = M.push(
+        ce.new(e, {
+          renderer: H.new(e, { strokeOpacity: 0.1 }),
+          // Horizontal bars must grow from a zero baseline; otherwise the auto
+          // min crops the axis (e.g. starting at 100) and distorts bar lengths.
+          ...t ? { min: 0 } : {}
         })
-      );
-      (T = o.get("renderer")) == null || T.grid.template.setAll({
-        stroke: c(i.palette.divider),
+      ), U = t ? A : o, _ = t ? o : A;
+      (k = o.get("renderer")) == null || k.grid.template.setAll({
+        stroke: p(n.palette.divider),
         strokeOpacity: 1
-      }), (X = D.get("renderer")) == null || X.grid.template.setAll({
-        stroke: c(i.palette.divider),
+      }), (L = A.get("renderer")) == null || L.grid.template.setAll({
+        stroke: p(n.palette.divider),
         strokeOpacity: 1
       });
-      function C(t, s, h, I) {
-        const l = r.series.push(
-          ne.new(e, {
-            name: t,
-            xAxis: o,
-            yAxis: D,
-            valueYField: I,
-            ...a.type === "date" ? { valueXField: h } : { categoryXField: h }
+      function Y(r, m, i, P) {
+        const $ = t ? { valueXField: P } : { valueYField: P }, J = s.type === "date" ? t ? { valueYField: i } : { valueXField: i } : t ? { categoryYField: i } : { categoryXField: i }, u = a.series.push(
+          ye.new(e, {
+            name: r,
+            xAxis: U,
+            yAxis: _,
+            ...$,
+            ...J
           })
         );
-        l.columns.template.setAll({
-          width: $(90),
+        u.columns.template.setAll({
+          ...t ? { height: z(90) } : { width: z(90) },
           strokeOpacity: 0
-        }), a.type === "date" && (l.data.processor = se.new(e, {
+        }), s.type === "date" && (u.data.processor = xe.new(e, {
           dateFormat: "i",
-          dateFields: [h]
-        })), l.data.setAll(s), l.appear(), l.bullets.push(function() {
-          return le.new(e, {
-            locationY: 0,
-            sprite: re.new(e, {
-              text: "{valueY}",
-              fill: e.interfaceColors.get("alternativeText"),
-              centerY: 0,
-              centerX: x,
-              populateText: !0
-            })
-          });
-        }), G.data.push(l);
+          dateFields: [i]
+        })), u.data.setAll(m), u.appear(), q.data.push(u);
       }
-      if (p.length === 1)
-        n.forEach((t) => {
-          C(
-            t.label ?? F(t.name),
-            m,
-            a.value,
-            t.dataFieldName
+      if (l.length === 1)
+        c.forEach((r) => {
+          Y(
+            r.label ?? E(r.name),
+            d,
+            s.value,
+            r.dataFieldName
           );
         });
       else {
-        const t = k.groupBy(m, p[1].value);
-        Object.keys(t).forEach((s) => {
-          C(
-            F(s),
-            t[s],
-            a.value,
-            n[0].dataFieldName
+        const r = y.groupBy(d, l[1].value);
+        Object.keys(r).forEach((m) => {
+          Y(
+            E(m),
+            r[m],
+            s.value,
+            c[0].dataFieldName
           );
         });
       }
-      r.set(
+      const T = a.set(
         "cursor",
-        oe.new(e, { xAxis: o, behavior: "none" })
-      ).lineY.set("visible", !1), M({
+        fe.new(
+          e,
+          t ? { yAxis: o, behavior: "none" } : { xAxis: o, behavior: "none" }
+        )
+      );
+      t ? T.lineX.set("visible", !1) : T.lineY.set("visible", !1), ae({
         root: e,
-        chart: r,
+        chart: a,
         xAxis: o,
-        theme: i,
-        isDateAxis: a.type === "date",
-        baseInterval: y,
-        follow: !0
-      }), _(e, (Y = n == null ? void 0 : n[0]) == null ? void 0 : Y.format), r.appear(1e3, 100);
-    }, O), () => {
-      var e;
-      f && clearTimeout(f), (e = u.current) == null || e.dispose(), u.current = null;
+        theme: n,
+        isDateAxis: s.type === "date",
+        baseInterval: v,
+        follow: !0,
+        horizontal: t
+      }), ne(e, (O = c == null ? void 0 : c[0]) == null ? void 0 : O.format), a.appear(1e3, 100);
+    }, V), () => {
+      var t;
+      x && clearTimeout(x), (t = h.current) == null || t.dispose(), h.current = null;
     };
-  }, [d, p, n, i.palette.mode, g, w]);
-  const S = { ...A };
-  return { chartId: b, ownerState: S, sx: B, error: v, other: E };
+  }, [f, l, c, n.palette.mode, w, b, D]);
+  const j = { ...g };
+  return { chartId: X, ownerState: j, sx: W, error: C, other: N };
 };
 export {
-  Fe as useXYChartLogic
+  Be as useXYChartLogic
 };