@hybridcore/ui 1.6.30 → 1.6.31

package/dist/components/charts/stacked-column-chart/logic.js

@@ -1,46 +1,42 @@
-import { R as V, A as q } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as I, useTheme as N } from "@mui/material";
+import { R as U, A as V } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as q, useTheme as N } from "@mui/material";
 import P from "dayjs";
-import v from "lodash";
+import C from "lodash";
 import { useId as z, useRef as H, useEffect as _ } from "react";
 import { humanizeLabel as $ } from "../_common/format.js";
 import { attachCombinedAxisTooltip as G } from "../_common/tooltip.js";
-import { applyValueFormat as J, colorSetFromPalette as K } from "../_common/utils.js";
-import { c as p, a as h, p as Q } from "../../../Entity-BJCuhdq_.js";
+import { applyValueFormat as J, applyInterfaceColors as K, colorSetFromPalette as Q } from "../_common/utils.js";
 import { X as W, V as Z } from "../../../AxisRenderer-BCQoUJw6.js";
 import { A as ee, a as te } from "../../../AxisRendererY-AXWvGU6r.js";
-import { C as D } from "../../../CategoryAxis-B6NqW8qd.js";
+import { C as b } from "../../../CategoryAxis-B6NqW8qd.js";
 import { L as re } from "../../../Legend-CFvQiIfn.js";
-import { X as oe } from "../../../XYCursor-CVUSpqb9.js";
-import { C as ae } from "../../../ColumnSeries-CtRTsn-E.js";
-import { B as se } from "../../../Bullet-Djj7Vs9T.js";
-import { L as ne } from "../../../Tooltip-vyZRZWih.js";
-const Xe = (L) => {
-  const C = I({
+import { a as f, c as D, p as oe } from "../../../Entity-BJCuhdq_.js";
+import { X as ae } from "../../../XYCursor-CVUSpqb9.js";
+import { C as se } from "../../../ColumnSeries-CtRTsn-E.js";
+import { B as ne } from "../../../Bullet-Djj7Vs9T.js";
+import { L as le } from "../../../Tooltip-vyZRZWih.js";
+const Fe = (L) => {
+  const g = q({
     props: L,
     name: "HCStackedColumnChart"
   }), {
-    dimensions: u,
+    dimensions: p,
     values: n,
     data: w,
     initDelay: R = 0,
-    baseInterval: d,
-    colors: k,
+    baseInterval: u,
+    colors: v,
     sx: O,
     ...B
-  } = C, i = N(), T = `hc-stacked-column-chart-${z().replace(/:/g, "")}`, x = H(null);
-  let f = null;
-  u.length < 2 ? f = "StackedColumnChart requires at least 2 dimensions" : n.length < 1 && (f = "StackedColumnChart requires at least 1 value"), _(() => {
-    if (f) return;
-    let A;
-    return A = setTimeout(() => {
-      var F, S, b;
-      const e = V.new(T);
-      x.current = e, J(e, (F = n == null ? void 0 : n[0]) == null ? void 0 : F.format), e.setThemes([q.new(e)]), e.interfaceColors.setAll({
-        text: p(i.palette.text.primary),
-        grid: p(i.palette.divider),
-        stroke: p(i.palette.divider)
-      });
+  } = g, c = N(), k = `hc-stacked-column-chart-${z().replace(/:/g, "")}`, h = H(null);
+  let d = null;
+  p.length < 2 ? d = "StackedColumnChart requires at least 2 dimensions" : n.length < 1 && (d = "StackedColumnChart requires at least 1 value"), _(() => {
+    if (d) return;
+    let x;
+    return x = setTimeout(() => {
+      var X, F, S;
+      const e = U.new(k);
+      h.current = e, J(e, (X = n == null ? void 0 : n[0]) == null ? void 0 : X.format), e.setThemes([V.new(e)]), K(e, c);
       const o = e.container.children.push(
         W.new(e, {
           panX: !1,
@@ -51,105 +47,109 @@ const Xe = (L) => {
           layout: e.verticalLayout
         })
       );
-      o.set("colors", K(e, k)), o.get("colors", {}).set("step", 2);
+      o.set("colors", Q(e, v)), o.get("colors", {}).set("step", 2);
       const Y = ee.new(e, {});
       Y.grid.template.setAll({ location: 1 });
-      const a = u[0], M = u[1];
-      let l, c = w;
+      const a = p[0], M = p[1];
+      let l, m = w;
       if (a.type === "date") {
-        const t = (d == null ? void 0 : d.timeUnit) || "day";
+        const t = (u == null ? void 0 : u.timeUnit) || "day";
         let s = "DD/MM/YYYY";
         t === "month" ? s = "MM YYYY" : t === "year" && (s = "YYYY"), l = o.xAxes.push(
-          D.new(e, {
+          b.new(e, {
             categoryField: a.value,
             renderer: Y
           })
-        ), c = v.orderBy(c, [a.value]), c = c.map((r) => ({
+        ), m = C.orderBy(m, [a.value]), m = m.map((r) => ({
           ...r,
-          [a.value]: P(r[a.value]).format(s)
+          [a.value]: P(r[a.value]).format(
+            s
+          )
         }));
       } else
         l = o.xAxes.push(
-          D.new(e, {
+          b.new(e, {
             categoryField: a.value,
             renderer: Y
           })
         );
-      const m = [], y = v.groupBy(c, M.value);
-      Object.keys(y).forEach((t) => {
-        y[t].forEach((s) => {
-          const r = s[a.value], g = v.findIndex(m, { [a.value]: r });
-          g === -1 ? m.push({
+      const i = [], A = C.groupBy(m, M.value);
+      Object.keys(A).forEach((t) => {
+        A[t].forEach((s) => {
+          const r = s[a.value], y = C.findIndex(i, { [a.value]: r });
+          y === -1 ? i.push({
             [a.value]: r,
             [t]: s[n[0].dataFieldName]
-          }) : m[g] = {
-            ...m[g],
+          }) : i[y] = {
+            ...i[y],
             [t]: s[n[0].dataFieldName]
           };
         });
-      }), l.data.setAll(m);
-      const X = o.yAxes.push(
+      }), l.data.setAll(i);
+      const T = o.yAxes.push(
         Z.new(e, {
           min: 0,
           renderer: te.new(e, { strokeOpacity: 0.1 })
         })
       ), j = o.children.push(
         re.new(e, {
-          centerX: h,
-          x: h
+          centerX: f,
+          x: f
         })
       );
-      (S = l.get("renderer")) == null || S.grid.template.setAll({
-        stroke: p(i.palette.divider),
+      (F = l.get("renderer")) == null || F.grid.template.setAll({
+        stroke: D(c.palette.divider),
         strokeOpacity: 1
-      }), (b = X.get("renderer")) == null || b.grid.template.setAll({
-        stroke: p(i.palette.divider),
+      }), (S = T.get("renderer")) == null || S.grid.template.setAll({
+        stroke: D(c.palette.divider),
         strokeOpacity: 1
       });
-      function U(t, s) {
+      function I(t, s) {
         const r = o.series.push(
-          ae.new(e, {
+          se.new(e, {
             name: t,
             stacked: !0,
             xAxis: l,
-            yAxis: X,
+            yAxis: T,
             valueYField: s,
             categoryXField: a.value
           })
         );
         r.columns.template.setAll({
-          tooltipY: Q(10)
-        }), r.data.setAll(m), r.appear(), r.bullets.push(function() {
-          return se.new(e, {
-            sprite: ne.new(e, {
+          tooltipY: oe(10)
+        }), r.data.setAll(i), r.appear(), r.bullets.push(function() {
+          return ne.new(e, {
+            sprite: le.new(e, {
               fill: e.interfaceColors.get("alternativeText"),
-              centerY: h,
-              centerX: h,
+              centerY: f,
+              centerX: f,
               populateText: !0
             })
           });
         }), j.data.push(r);
       }
-      Object.keys(y).forEach((t) => U($(t), t)), o.set(
+      Object.keys(A).forEach(
+        (t) => I($(t), t)
+      ), o.set(
         "cursor",
-        oe.new(e, { xAxis: l, behavior: "none" })
+        ae.new(e, { xAxis: l, behavior: "none" })
       ).lineY.set("visible", !1), G({
         root: e,
         chart: o,
         xAxis: l,
-        theme: i,
+        theme: c,
         isDateAxis: !1,
-        baseInterval: d,
+        baseInterval: u,
         follow: !0
       }), o.appear(1e3, 100);
     }, R), () => {
       var e;
-      A && clearTimeout(A), (e = x.current) == null || e.dispose(), x.current = null;
+      x && clearTimeout(x), (e = h.current) == null || e.dispose(), h.current = null;
     };
-  }, [w, u, n, i.palette.mode, k]);
-  const E = { ...C };
-  return { chartId: T, ownerState: E, sx: O, error: f, other: B };
+  }, [w, p, n, c.palette.mode, v]);
+  const E = { ...g };
+  return { chartId: k, ownerState: E, sx: O, error: d, other: B };
 };
 export {
-  Xe as useStackedColumnChartLogic
+  Fe as useStackedColumnChartLogic
 };

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

@@ -1,25 +1,25 @@
 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 A from "lodash";
+import { useId as te, useRef as oe, useEffect as re } 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,
+import { applyInterfaceColors as se, colorSetFromPalette as ie, applyDateAxisLabelFormat as ne, applyValueFormat as le } from "../_common/utils.js";
+import { X as ce, V as me } from "../../../AxisRenderer-BCQoUJw6.js";
+import { L as pe } from "../../../Legend-CFvQiIfn.js";
+import { a as I, c as y, p as S } from "../../../Entity-BJCuhdq_.js";
+import { C as de } from "../../../CategoryAxis-B6NqW8qd.js";
+import { T as ue, R as fe } from "../../../Tooltip-vyZRZWih.js";
+import { X as he } from "../../../XYCursor-CVUSpqb9.js";
+import { a as z, A as B } from "../../../AxisRendererY-AXWvGU6r.js";
+import { G as xe, D as Ae } from "../../../GaplessDateAxis-B2g2jgSG.js";
+import { D as ye } from "../../../DateAxis-DEXKps1S.js";
+import { C as ge } from "../../../ColumnSeries-CtRTsn-E.js";
+const Be = (G) => {
+  const g = Z({ props: G, name: "HCXYChart" }), {
+    dimensions: n,
+    values: l,
+    data: u,
     initDelay: V = 0,
     baseInterval: v,
     colors: w,
@@ -27,20 +27,16 @@ const Be = (I) => {
     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(() => {
+  } = g, m = ee(), X = `hc-xy-chart-${te().replace(/:/g, "")}`, f = oe(null), C = n.length < 1 ? "Missing dimensions config!" : null;
+  re(() => {
     if (C) return;
-    let x;
-    return x = setTimeout(() => {
+    let h;
+    return h = 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)
-      });
+      f.current = e, e.setThemes([Q.new(e)]), se(e, m);
       const a = e.container.children.push(
-        le.new(e, {
+        ce.new(e, {
           panX: !1,
           panY: !1,
           wheelX: "none",
@@ -50,139 +46,139 @@ const Be = (I) => {
           layout: e.verticalLayout
         })
       );
-      a.set("colors", se(e, w));
+      a.set("colors", ie(e, w));
       const q = a.children.push(
-        me.new(e, {
-          centerX: S,
-          x: S
+        pe.new(e, {
+          centerX: I,
+          x: I
         })
-      ), 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;
+      ), s = n[0], F = t ? z : B, H = t ? B : z, R = t ? a.yAxes : a.xAxes, M = t ? a.xAxes : a.yAxes;
+      let r, p = u;
       if (s.type === "date") {
-        const r = b ? he : Ae;
-        o = R.push(
-          r.new(e, {
+        const o = b ? xe : ye;
+        r = R.push(
+          o.new(e, {
             maxDeviation: 0,
             baseInterval: v || { timeUnit: "day", count: 1 },
             renderer: F.new(e, { minGridDistance: 60 })
           })
-        ), ie(o, s), d = y.orderBy(f, [s.value]);
+        ), ne(r, s), p = A.orderBy(u, [s.value]);
       } else {
-        const r = F.new(e, {
+        const o = F.new(e, {
           cellStartLocation: 0.1,
           cellEndLocation: 0.9,
           minGridDistance: 30
         });
-        o = R.push(
-          pe.new(e, {
+        r = R.push(
+          de.new(e, {
             categoryField: s.value,
-            renderer: r
+            renderer: o
           })
-        ), r.grid.template.setAll({ location: 1 }), o.labelsContainer.set(
+        ), o.grid.template.setAll({ location: 1 }), r.labelsContainer.set(
           "tooltip",
-          de.new(e, {
+          ue.new(e, {
             pointerOrientation: t ? "right" : "down"
           })
-        ), r.labels.template.setAll({
+        ), o.labels.template.setAll({
           oversizedBehavior: "truncate",
           maxWidth: 150,
           tooltipText: "{category}"
-        }), r.labels.template.setup = function(i) {
+        }), o.labels.template.setup = function(i) {
           i.set(
             "background",
-            ue.new(e, {
-              fill: p(0),
+            fe.new(e, {
+              fill: y(0),
               fillOpacity: 0
             })
           );
-        }, t || o.onPrivate("cellWidth", function(i) {
-          r.labels.template.set("maxWidth", i);
+        }, t || r.onPrivate("cellWidth", function(i) {
+          o.labels.template.set("maxWidth", i);
         }), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: [t ? "valueY" : "valueX"]
         });
-        const m = l.length > 1 ? y.uniqBy(d, s.value) : d;
-        o.data.setAll(m);
+        const c = n.length > 1 ? A.uniqBy(p, s.value) : p;
+        r.data.setAll(c);
       }
-      const A = M.push(
-        ce.new(e, {
+      const x = M.push(
+        me.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 } : {}
         })
-      ), U = t ? A : o, _ = t ? o : A;
-      (k = o.get("renderer")) == null || k.grid.template.setAll({
-        stroke: p(n.palette.divider),
+      ), U = t ? x : r, _ = t ? r : x;
+      (k = r.get("renderer")) == null || k.grid.template.setAll({
+        stroke: y(m.palette.divider),
         strokeOpacity: 1
-      }), (L = A.get("renderer")) == null || L.grid.template.setAll({
-        stroke: p(n.palette.divider),
+      }), (L = x.get("renderer")) == null || L.grid.template.setAll({
+        stroke: y(m.palette.divider),
         strokeOpacity: 1
       });
-      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,
+      function Y(o, c, i, P) {
+        const $ = t ? { valueXField: P } : { valueYField: P }, J = s.type === "date" ? t ? { valueYField: i } : { valueXField: i } : t ? { categoryYField: i } : { categoryXField: i }, d = a.series.push(
+          ge.new(e, {
+            name: o,
             xAxis: U,
             yAxis: _,
             ...$,
             ...J
           })
         );
-        u.columns.template.setAll({
-          ...t ? { height: z(90) } : { width: z(90) },
+        d.columns.template.setAll({
+          ...t ? { height: S(90) } : { width: S(90) },
           strokeOpacity: 0
-        }), s.type === "date" && (u.data.processor = xe.new(e, {
+        }), s.type === "date" && (d.data.processor = Ae.new(e, {
           dateFormat: "i",
           dateFields: [i]
-        })), u.data.setAll(m), u.appear(), q.data.push(u);
+        })), d.data.setAll(c), d.appear(), q.data.push(d);
       }
-      if (l.length === 1)
-        c.forEach((r) => {
+      if (n.length === 1)
+        l.forEach((o) => {
           Y(
-            r.label ?? E(r.name),
-            d,
+            o.label ?? E(o.name),
+            p,
             s.value,
-            r.dataFieldName
+            o.dataFieldName
           );
         });
       else {
-        const r = y.groupBy(d, l[1].value);
-        Object.keys(r).forEach((m) => {
+        const o = A.groupBy(p, n[1].value);
+        Object.keys(o).forEach((c) => {
           Y(
-            E(m),
-            r[m],
+            E(c),
+            o[c],
             s.value,
-            c[0].dataFieldName
+            l[0].dataFieldName
           );
         });
       }
       const T = a.set(
         "cursor",
-        fe.new(
+        he.new(
           e,
-          t ? { yAxis: o, behavior: "none" } : { xAxis: o, behavior: "none" }
+          t ? { yAxis: r, behavior: "none" } : { xAxis: r, behavior: "none" }
         )
       );
       t ? T.lineX.set("visible", !1) : T.lineY.set("visible", !1), ae({
         root: e,
         chart: a,
-        xAxis: o,
-        theme: n,
+        xAxis: r,
+        theme: m,
         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);
+      }), le(e, (O = l == null ? void 0 : l[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;
+      h && clearTimeout(h), (t = f.current) == null || t.dispose(), f.current = null;
     };
   }, [
-    f,
+    u,
+    n,
     l,
-    c,
-    n.palette.mode,
+    m.palette.mode,
     w,
     b,
     D

package/dist/components/metric-card/MetricChart.js

@@ -10,7 +10,7 @@ import { C as S } from "../../ColumnSeries-CtRTsn-E.js";
 import { c as i } from "../../Entity-BJCuhdq_.js";
 import { L as Y } from "../../LineSeries-D_IL2qGF.js";
 import { L as G } from "../../LinearGradient-CxQyCSEB.js";
-const u = 10, k = 21, q = ({
+const u = 10, O = 21, W = ({
   data: a,
   type: p,
   fill: n = "solid",
@@ -32,7 +32,9 @@ const u = 10, k = 21, q = ({
         paddingTop: 0,
         paddingBottom: 0
       })
-    ), o = s.xAxes.push(
+    );
+    s.zoomOutButton.set("forceHidden", !0);
+    const o = s.xAxes.push(
       X.new(e, {
         categoryField: "t",
         renderer: b.new(e, {
@@ -103,11 +105,11 @@ const u = 10, k = 21, q = ({
         width: `calc(100% + ${u}px)`,
         height: "100%",
         marginLeft: -u,
-        marginBottom: -k
+        marginBottom: -O
       }
     }
   );
 };
 export {
-  q as MetricChart
+  W as MetricChart
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.6.30",
+  "version": "1.6.31",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",