@hybridcore/ui 1.6.21 → 1.6.22

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

@@ -1,6 +1,6 @@
-import { R as Y, A as R } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as E, useTheme as I } from "@mui/material";
-import F from "lodash";
+import { R as T, A as Y } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as R, useTheme as E } from "@mui/material";
+import I from "lodash";
 import { useId as G, useRef as O, useEffect as P } from "react";
 import { humanizeLabel as V } from "../_common/format.js";
 import { attachCombinedAxisTooltip as q } from "../_common/tooltip.js";
@@ -8,32 +8,32 @@ import { colorSetFromPalette as z, applyDateAxisLabelFormat as B, applyValueForm
 import { c as i } from "../../../Entity-BJCuhdq_.js";
 import { X as N, V as U } from "../../../AxisRenderer-BCQoUJw6.js";
 import { X as W } from "../../../XYCursor-CVUSpqb9.js";
-import { A as X, a as Z } from "../../../AxisRendererY-AXWvGU6r.js";
+import { A as F, a as Z } from "../../../AxisRendererY-AXWvGU6r.js";
 import { C as _ } from "../../../CategoryAxis-B6NqW8qd.js";
 import { L as $ } from "../../../LineSeries-D_IL2qGF.js";
 import { D as j, G as J } from "../../../GaplessDateAxis-B2g2jgSG.js";
 import { S as K } from "../../../Scrollbar-CTI7_8Qw.js";
 import { D as M } from "../../../DateAxis-DEXKps1S.js";
-const xe = (k) => {
-  const f = E({ props: k, name: "HCLogaritmicScale" }), {
+const xe = (X) => {
+  const f = R({ props: X, name: "HCLogaritmicScale" }), {
     dimensions: t,
     values: s,
-    data: n,
-    initDelay: L = 0,
+    data: p,
+    initDelay: k = 0,
     baseInterval: h,
     colors: A,
     skipEmptyDates: x = !1,
-    sx: S,
-    ...C
-  } = f, a = I(), g = `hc-logaritmic-scale-${G().replace(/:/g, "")}`, d = O(null);
-  let m = null;
-  t.length < 1 ? m = "LogaritmicScale requires at least 1 dimension" : s.length < 1 && (m = "LogaritmicScale requires at least 1 value"), P(() => {
-    if (m) return;
-    let u;
-    return u = setTimeout(() => {
-      var v, w, D, b;
-      const e = Y.new(g);
-      d.current = e, e.setThemes([R.new(e)]), e.interfaceColors.setAll({
+    sx: L,
+    ...S
+  } = f, a = E(), g = `hc-logaritmic-scale-${G().replace(/:/g, "")}`, c = O(null);
+  let n = null;
+  t.length < 1 ? n = "LogaritmicScale requires at least 1 dimension" : s.length < 1 && (n = "LogaritmicScale requires at least 1 value"), P(() => {
+    if (n) return;
+    let d;
+    return d = setTimeout(() => {
+      var w, v, D, b;
+      const e = T.new(g);
+      c.current = e, e.setThemes([Y.new(e)]), e.interfaceColors.setAll({
         text: i(a.palette.text.primary),
         grid: i(a.palette.divider),
         stroke: i(a.palette.divider)
@@ -52,18 +52,18 @@ const xe = (k) => {
         "cursor",
         W.new(e, { behavior: "none" })
       ).lineY.set("visible", !1);
-      let o, p = n;
+      let o, u = p;
       if (t[0].type === "date") {
-        p = F.orderBy(n, [t[0].value]);
+        u = I.orderBy(p, [t[0].value]);
         const l = x ? J : M;
         o = r.xAxes.push(
           l.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
             baseInterval: h || { timeUnit: "day", count: 1 },
-            renderer: X.new(e, {})
+            renderer: F.new(e, {})
           })
-        ), (v = o.get("renderer")) == null || v.grid.template.setAll({
+        ), (w = o.get("renderer")) == null || w.grid.template.setAll({
           stroke: i(a.palette.divider),
           strokeOpacity: 1
         }), B(o, t[0]);
@@ -71,12 +71,12 @@ const xe = (k) => {
         o = r.xAxes.push(
           _.new(e, {
             categoryField: t[0].value,
-            renderer: X.new(e, {})
+            renderer: F.new(e, {})
           })
         ), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), p = F.orderBy(n, [t[0].value]), o.data.setAll(p), (w = o.get("renderer")) == null || w.grid.template.setAll({
+        }), o.data.setAll(u), (v = o.get("renderer")) == null || v.grid.template.setAll({
           stroke: i(a.palette.divider),
           strokeOpacity: 1
         });
@@ -90,7 +90,7 @@ const xe = (k) => {
         stroke: i(a.palette.divider),
         strokeOpacity: 1
       }), s.forEach((l) => {
-        const c = r.series.push(
+        const m = r.series.push(
           $.new(e, {
             name: l.label ?? V(l.name),
             xAxis: o,
@@ -99,10 +99,10 @@ const xe = (k) => {
             ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value }
           })
         );
-        c.strokes.template.setAll({ strokeWidth: 3 }), t[0].type === "date" && (c.data.processor = j.new(e, {
+        m.strokes.template.setAll({ strokeWidth: 3 }), t[0].type === "date" && (m.data.processor = j.new(e, {
           dateFormat: "i",
           dateFields: [t[0].value]
-        })), c.data.setAll(p), c.appear(1e3);
+        })), m.data.setAll(u), m.appear(1e3);
       }), q({
         root: e,
         chart: r,
@@ -115,13 +115,13 @@ const xe = (k) => {
         "scrollbarX",
         K.new(e, { orientation: "horizontal" })
       ), H(e, (b = s == null ? void 0 : s[0]) == null ? void 0 : b.format), r.appear(1e3, 100);
-    }, L), () => {
+    }, k), () => {
       var e;
-      u && clearTimeout(u), (e = d.current) == null || e.dispose(), d.current = null;
+      d && clearTimeout(d), (e = c.current) == null || e.dispose(), c.current = null;
     };
-  }, [n, t, s, a.palette.mode, A, x]);
-  const T = { ...f };
-  return { chartId: g, ownerState: T, sx: S, error: m, other: C };
+  }, [p, t, s, a.palette.mode, A, x]);
+  const C = { ...f };
+  return { chartId: g, ownerState: C, sx: L, error: n, other: S };
 };
 export {
   xe as useLogaritmicScaleLogic

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

@@ -1,11 +1,11 @@
 import { R as j, A as q } from "../../../AnimatedTheme-ktdO3Bel.js";
 import { useThemeProps as z, useTheme as U } from "@mui/material";
-import v from "lodash";
+import N 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, applyDateAxisLabelFormat as Z, applyValueFormat as ee } from "../_common/utils.js";
-import { c as C, a as A } from "../../../Entity-BJCuhdq_.js";
+import { c as v, a as g } from "../../../Entity-BJCuhdq_.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";
@@ -14,10 +14,10 @@ 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 { G, R as pe } from "../../../Tooltip-vyZRZWih.js";
+import { C as ue } from "../../../Circle-BnfBNKBD.js";
 import { B as de } from "../../../Bullet-Djj7Vs9T.js";
-class y extends G {
+class x extends G {
   _beforeChanged() {
     super._beforeChanged(), (this.isDirty("width") || this.isDirty("height") || this.isPrivateDirty("width") || this.isPrivateDirty("height")) && (this._clear = !0);
   }
@@ -32,41 +32,41 @@ class y extends G {
     this.markDirty(), this._clear = !0;
   }
 }
-Object.defineProperty(y, "className", {
+Object.defineProperty(x, "className", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
   value: "Triangle"
 });
-Object.defineProperty(y, "classNames", {
+Object.defineProperty(x, "classNames", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
-  value: G.classNames.concat([y.className])
+  value: G.classNames.concat([x.className])
 });
-const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
-  const c = z({ props: T, name: "HCMultipleValueAxes" }), {
+const A = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (C) => {
+  const c = z({ props: C, name: "HCMultipleValueAxes" }), {
     dimensions: s,
     values: t,
-    data: d,
+    data: y,
     initDelay: I = 0,
-    baseInterval: L,
-    colors: R,
-    skipEmptyDates: E = !1,
+    baseInterval: T,
+    colors: L,
+    skipEmptyDates: R = !1,
     sx: Y,
     ...V
-  } = 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;
+  } = c, p = U(), E = `hc-multiple-value-axes-${H().replace(/:/g, "")}`, w = $(null);
+  let u = null;
+  s.length < 1 ? u = "MultipleValueAxes requires at least 1 dimension" : t.length < 1 && (u = "MultipleValueAxes requires at least 1 value"), J(() => {
+    if (u) return;
     let b;
     return b = setTimeout(() => {
-      var N;
-      const e = j.new(_);
+      var F;
+      const e = j.new(E);
       w.current = e, e.setThemes([q.new(e)]), e.interfaceColors.setAll({
-        text: C(u.palette.text.primary),
-        grid: C(u.palette.divider),
-        stroke: C(u.palette.divider)
+        text: v(p.palette.text.primary),
+        grid: v(p.palette.divider),
+        stroke: v(p.palette.divider)
       });
       const r = e.container.children.push(
         te.new(e, {
@@ -78,75 +78,75 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
           layout: e.verticalLayout
         })
       );
-      r.set("colors", Q(e, R)), r.get("colors", {}).set("step", 3);
-      const O = r.children.push(
-        se.new(e, { centerX: A, x: A })
-      ), i = s[0];
-      let l, p = d;
-      if (i.type === "date") {
-        const a = E ? le : ce;
+      r.set("colors", Q(e, L)), r.get("colors", {}).set("step", 3);
+      const S = r.children.push(
+        se.new(e, { centerX: g, x: g })
+      ), o = s[0];
+      let l, d = y;
+      if (o.type === "date") {
+        const a = R ? le : ce;
         l = r.xAxes.push(
           a.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
-            baseInterval: L || { timeUnit: "day", count: 1 },
+            baseInterval: T || { timeUnit: "day", count: 1 },
             renderer: X.new(e, {})
           })
-        ), Z(l, i), p = v.orderBy(d, [i.value]);
+        ), Z(l, o), d = N.orderBy(y, [o.value]);
       } else
         l = r.xAxes.push(
           ie.new(e, {
-            categoryField: i.value,
+            categoryField: o.value,
             renderer: X.new(e, {})
           })
         ), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), 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 })
+        }), l.data.setAll(d);
+      function _(a, n, m, B, W, D, M) {
+        const h = ae.new(e, { opposite: W }), k = r.yAxes.push(
+          re.new(e, { maxDeviation: 1, renderer: h })
         );
         r.yAxes.indexOf(k) > 0 && k.set("syncWithAxis", r.yAxes.getIndex(0));
-        const o = r.series.push(
+        const i = r.series.push(
           me.new(e, {
             name: n,
             xAxis: l,
             yAxis: k,
-            valueYField: S,
-            ...i.type === "date" ? { valueXField: m } : { categoryXField: m }
+            valueYField: B,
+            ...o.type === "date" ? { valueXField: m } : { categoryXField: m }
           })
         );
-        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"),
+        i.strokes.template.setAll({ strokeWidth: 2 }), h.grid.template.set("strokeOpacity", 0.05), h.labels.template.set("fill", i.get("fill")), h.setAll({
+          stroke: i.get("fill"),
           strokeOpacity: 1,
           opacity: 1
-        }), M === "date" && (o.data.processor = ne.new(e, {
+        }), M === "date" && (i.data.processor = ne.new(e, {
           dateFormat: "i",
           dateFields: [m]
-        })), D !== void 0 && o.bullets.push(function() {
-          let g;
-          return D === "RECTANGLE" ? g = ue.new(e, {
+        })), D !== void 0 && i.bullets.push(function() {
+          let f;
+          return D === "RECTANGLE" ? f = pe.new(e, {
             width: 10,
             height: 10,
-            centerX: A,
-            centerY: A,
+            centerX: g,
+            centerY: g,
             strokeWidth: 2,
-            stroke: o.get("stroke"),
+            stroke: i.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }) : D === "TRIANGLE" ? g = y.new(e, {
+          }) : D === "TRIANGLE" ? f = x.new(e, {
             width: 10,
             height: 10,
             strokeWidth: 2,
-            stroke: o.get("stroke"),
+            stroke: i.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }) : g = pe.new(e, {
+          }) : f = ue.new(e, {
             strokeWidth: 2,
             radius: 4,
-            stroke: o.get("stroke"),
+            stroke: i.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }), de.new(e, { sprite: g });
-        }), o.data.setAll(a);
+          }), de.new(e, { sprite: f });
+        }), i.data.setAll(a);
       }
       if (r.set(
         "cursor",
@@ -155,42 +155,42 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
         root: e,
         chart: r,
         xAxis: l,
-        theme: u,
-        isDateAxis: i.type === "date",
-        baseInterval: L,
+        theme: p,
+        isDateAxis: o.type === "date",
+        baseInterval: T,
         follow: !0
       }), s.length > 1) {
-        const a = v.groupBy(p, s[1].value);
+        const a = N.groupBy(d, s[1].value);
         Object.keys(a).forEach((n, m) => {
-          F(
+          _(
             a[n],
             P(n),
             s[0].value,
             t[0].dataFieldName,
             m !== 0,
-            x[m % x.length]
+            A[m % A.length]
           );
         });
       } else
         t.forEach((a, n) => {
-          F(
-            p,
+          _(
+            d,
             a.label ?? P(a.name),
-            i.value,
+            o.value,
             a.dataFieldName,
             n !== 0,
-            x[n % x.length],
-            i.type
+            A[n % A.length],
+            o.type
           );
         });
-      O.data.setAll(r.series.values), ee(e, (N = t == null ? void 0 : t[0]) == null ? void 0 : N.format), r.appear(1e3, 100);
+      S.data.setAll(r.series.values), ee(e, (F = t == null ? void 0 : t[0]) == null ? void 0 : F.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 = { ...c };
-  return { chartId: _, ownerState: B, sx: Y, error: h, other: V };
+  }, [y, s, t, p.palette.mode, L, R]);
+  const O = { ...c };
+  return { chartId: E, ownerState: O, sx: Y, error: u, other: V };
 };
 export {
   Ge as useMultipleValueAxesLogic

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

@@ -178,7 +178,15 @@ const Be = (I) => {
       var t;
       x && clearTimeout(x), (t = h.current) == null || t.dispose(), h.current = null;
     };
-  }, [f, l, c, n.palette.mode, w, b, D]);
+  }, [
+    f,
+    l,
+    c,
+    n.palette.mode,
+    w,
+    b,
+    D
+  ]);
   const j = { ...g };
   return { chartId: X, ownerState: j, sx: W, error: C, other: N };
 };

package/dist/main.d.ts

@@ -97,7 +97,7 @@ export declare interface BaseInterval {
     count: number;
 }
 
-export declare const Button: (props: ButtonProps) => JSX_2.Element;
+export declare const Button: (props: ButtonProps & default_2.RefAttributes<HTMLButtonElement>) => default_2.ReactNode | null;
 
 export declare type ButtonComponentOverride<Theme = unknown> = {
     defaultProps?: Partial<ButtonProps>;
@@ -232,6 +232,7 @@ export declare interface ChartDimension {
 
 export declare type ChartNameType =
 | "HeatLegend"
+| "Histogram"
 | "XYChart"
 | "XYChartHorizontal"
 | "MultipleValueAxes"
@@ -955,6 +956,36 @@ export declare interface HighlightLineChartProps {
     sx?: SxProps<Theme>;
 }
 
+export declare const Histogram: (inProps: HistogramProps) => JSX_2.Element;
+
+export declare type HistogramComponentOverride<Theme = unknown> = {
+    defaultProps?: Partial<HistogramProps>;
+    styleOverrides?: ComponentsOverrides_2<Theme>["HCHistogram"];
+};
+
+export declare type HistogramProps = ChartProps & {
+    /**
+     * Explicit bin width, in dimension units. When omitted, the width is inferred
+     * from the smallest positive gap between adjacent bin starts — correct for
+     * uniformly pre-binned data (e.g. 250-wide buckets). Set this when bins are
+     * non-uniform, or when a single bin makes the gap impossible to infer.
+     */
+    binWidth?: number;
+    /**
+     * Fractional gap between adjacent bars, `0`–`1`. `0` (default) makes bars
+     * touch edge-to-edge — the defining histogram look. Raise it toward a spaced
+     * bar chart if a visual separation is wanted.
+     */
+    barGap?: number;
+    /**
+     * Draw the frequency (Y) axis on a logarithmic scale. Useful when one bin
+     * dwarfs the rest (e.g. a large zero/overflow bucket) and a linear axis would
+     * flatten every other bar. Zero-count bins are treated as the axis floor, so
+     * they simply render as no bar. Default `false` (linear, zero-baselined).
+     */
+    logarithmic?: boolean;
+};
+
 /**
  * Turn a raw field key into a human label: snake_case / kebab-case / camelCase
  * → Title Case (e.g. "total_revenue" / "totalRevenue" → "Total Revenue"). Used
@@ -2690,6 +2721,22 @@ declare module "@mui/material/styles" {
 
 
 
+declare module "@mui/material/styles" {
+  interface ComponentNameToClassKey {
+    HCHistogram: "root";
+  }
+
+  interface ComponentsPropsList {
+    HCHistogram: Partial<HistogramProps>;
+  }
+
+  interface Components<Theme = unknown> {
+    HCHistogram?: HistogramComponentOverride<Theme>;
+  }
+}
+
+
+
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey {
     HCLineChart: "root";