@hybridcore/ui 1.6.21 → 1.6.23

package/CATALOG.md

@@ -75,6 +75,7 @@ import { ComponentName } from '@hybridcore/ui';
 | DrillDownTreemap           | HCDrillDownTreemap         | Treemap with click-to-drill-down hierarchy                             | chart, treemap, hierarchy             |
 | DrillDownVoronoiTreemap    | HCDrillDownVoronoiTreemap  | Voronoi-tessellation treemap with drill-down                           | chart, treemap, voronoi               |
 | Heatmap                    | HCHeatmap                  | Categorical heatmap (X/Y axes, color-coded values)                     | chart, heatmap                        |
+| Histogram                  | HCHistogram                | Numeric-bin distribution (ValueAxis bins, optional log scale)          | chart, histogram, distribution        |
 | HighlightLineChart         | HCHighlightLineChart       | Line chart with hover highlighting                                     | chart, line, hover                    |
 | LineChart                  | HCLineChart                | Multi-series line chart                                                | chart, line                           |
 | LogaritmicScale            | HCLogaritmicScale          | Chart with logarithmic Y-axis                                          | chart, log, scale                     |

package/dist/components/button/index.js

@@ -1,10 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useButtonLogic as i } from "./logic.js";
-import { ButtonRoot as s } from "./styled.js";
-const u = (t) => {
-  const { state: o, actions: r } = i(t);
-  return /* @__PURE__ */ n(s, { ...o.rest, onClick: r.handleClick });
-};
+import i from "react";
+import { useButtonLogic as m } from "./logic.js";
+import { ButtonRoot as c } from "./styled.js";
+const p = i.forwardRef(
+  (t, o) => {
+    const { state: r, actions: e } = m(t);
+    return /* @__PURE__ */ n(c, { ref: o, ...r.rest, onClick: e.handleClick });
+  }
+);
 export {
-  u as Button
+  p as Button
 };

package/dist/components/charts/chart-wrapper/index.js

@@ -1,50 +1,52 @@
-import { jsxs as a, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
 import { Typography as C, Divider as c } from "@mui/material";
 import { Loading as d } from "../../loading/index.js";
-import { CandlestickChart as f } from "../candlestick/index.js";
-import { ColumnLineMix as s } from "../column-line-mix/index.js";
+import { CandlestickChart as s } from "../candlestick/index.js";
+import { ColumnLineMix as f } from "../column-line-mix/index.js";
 import { DonutChart as u } from "../donut-chart/index.js";
-import { DrillDownTreemap as D } from "../drill-down-treemap/index.js";
-import { DrillDownVoronoiTreemap as L } from "../drill-down-voronoi-treemap/index.js";
-import { ForecastConeChart as g } from "../forecast-cone/index.js";
+import { DrillDownTreemap as g } from "../drill-down-treemap/index.js";
+import { DrillDownVoronoiTreemap as D } from "../drill-down-voronoi-treemap/index.js";
+import { ForecastConeChart as L } from "../forecast-cone/index.js";
 import { Heatmap as x } from "../heatmap/index.js";
-import { LineChart as k } from "../line/index.js";
-import { LogaritmicScale as S } from "../logaritmic-scale/index.js";
-import { MultipleValueAxes as P } from "../multiple-value-axes/index.js";
-import { NestedPie as w } from "../nested-pie/index.js";
+import { Histogram as k } from "../histogram/index.js";
+import { LineChart as S } from "../line/index.js";
+import { LogaritmicScale as P } from "../logaritmic-scale/index.js";
+import { MultipleValueAxes as w } from "../multiple-value-axes/index.js";
+import { NestedPie as H } from "../nested-pie/index.js";
 import { PackedCircles as A } from "../packed-circles/index.js";
 import { PieChart as T } from "../pie-chart/index.js";
 import { StackedAreaRadar as W } from "../stacked-area-radar/index.js";
-import { StackedColumnChart as H } from "../stacked-column-chart/index.js";
-import { XYChart as i } from "../xy-chart/index.js";
-import { useChartWrapperLogic as M } from "./logic.js";
-import { ChartWrapperRoot as V, ChartWrapperHeader as v, ChartWrapperContent as y } from "./styled.js";
-const rr = (m) => {
-  const { title: p, type: o, chartProps: t, loading: n, ownerState: e, sx: l } = M(m);
-  return /* @__PURE__ */ a(V, { ownerState: e, sx: l, children: [
-    /* @__PURE__ */ r(v, { ownerState: e, children: /* @__PURE__ */ r(C, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: p }) }),
+import { StackedColumnChart as M } from "../stacked-column-chart/index.js";
+import { XYChart as a } from "../xy-chart/index.js";
+import { useChartWrapperLogic as V } from "./logic.js";
+import { ChartWrapperRoot as v, ChartWrapperHeader as y, ChartWrapperContent as F } from "./styled.js";
+const tr = (m) => {
+  const { title: p, type: o, chartProps: t, loading: n, ownerState: e, sx: l } = V(m);
+  return /* @__PURE__ */ i(v, { ownerState: e, sx: l, children: [
+    /* @__PURE__ */ r(y, { ownerState: e, children: /* @__PURE__ */ r(C, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: p }) }),
     /* @__PURE__ */ r(c, {}),
-    /* @__PURE__ */ r(y, { ownerState: e, children: n ? /* @__PURE__ */ r(d, { show: !0, position: "absolute" }) : /* @__PURE__ */ a(h, { children: [
-      o === "MultipleValueAxes" && /* @__PURE__ */ r(P, { ...t }),
-      o === "XYChart" && /* @__PURE__ */ r(i, { ...t }),
-      o === "XYChartHorizontal" && /* @__PURE__ */ r(i, { ...t, orientation: "horizontal" }),
+    /* @__PURE__ */ r(F, { ownerState: e, children: n ? /* @__PURE__ */ r(d, { show: !0, position: "absolute" }) : /* @__PURE__ */ i(h, { children: [
+      o === "MultipleValueAxes" && /* @__PURE__ */ r(w, { ...t }),
+      o === "XYChart" && /* @__PURE__ */ r(a, { ...t }),
+      o === "XYChartHorizontal" && /* @__PURE__ */ r(a, { ...t, orientation: "horizontal" }),
       o === "HeatLegend" && /* @__PURE__ */ r(x, { ...t }),
+      o === "Histogram" && /* @__PURE__ */ r(k, { ...t }),
       o === "PieChart" && /* @__PURE__ */ r(T, { ...t }),
       o === "DonutChart" && /* @__PURE__ */ r(u, { ...t }),
-      o === "StackedColumnChart" && /* @__PURE__ */ r(H, { ...t }),
+      o === "StackedColumnChart" && /* @__PURE__ */ r(M, { ...t }),
       o === "StackedAreaRadar" && /* @__PURE__ */ r(W, { ...t }),
-      o === "LineChart" && /* @__PURE__ */ r(k, { ...t }),
-      o === "NestedPie" && /* @__PURE__ */ r(w, { ...t }),
+      o === "LineChart" && /* @__PURE__ */ r(S, { ...t }),
+      o === "NestedPie" && /* @__PURE__ */ r(H, { ...t }),
       o === "SingleLevelPackedCircles" && /* @__PURE__ */ r(A, { ...t }),
-      o === "LogarithmicScale" && /* @__PURE__ */ r(S, { ...t }),
-      o === "ColumnAndLineMix" && /* @__PURE__ */ r(s, { ...t }),
-      o === "DrillDownTreemap" && /* @__PURE__ */ r(D, { ...t }),
-      o === "DrillDownVoronoiTreemap" && /* @__PURE__ */ r(L, { ...t }),
-      o === "CandlestickChart" && /* @__PURE__ */ r(f, { ...t }),
-      o === "ForecastCone" && /* @__PURE__ */ r(g, { ...t })
+      o === "LogarithmicScale" && /* @__PURE__ */ r(P, { ...t }),
+      o === "ColumnAndLineMix" && /* @__PURE__ */ r(f, { ...t }),
+      o === "DrillDownTreemap" && /* @__PURE__ */ r(g, { ...t }),
+      o === "DrillDownVoronoiTreemap" && /* @__PURE__ */ r(D, { ...t }),
+      o === "CandlestickChart" && /* @__PURE__ */ r(s, { ...t }),
+      o === "ForecastCone" && /* @__PURE__ */ r(L, { ...t })
     ] }) })
   ] });
 };
 export {
-  rr as ChartWrapper
+  tr as ChartWrapper
 };

package/dist/components/charts/column-line-mix/logic.js

@@ -1,45 +1,44 @@
 import { R as M, A as O } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as E, useTheme as P } from "@mui/material";
-import C from "lodash";
-import { useId as V, useRef as z, useEffect as G } from "react";
-import { humanizeLabel as b } from "../_common/format.js";
-import { attachCombinedAxisTooltip as N } from "../_common/tooltip.js";
-import { colorSetFromPalette as W, applyDateAxisLabelFormat as q, applyValueFormat as H } from "../_common/utils.js";
+import { useThemeProps as B, useTheme as E } from "@mui/material";
+import P from "lodash";
+import { useId as V, useRef as G, useEffect as N } from "react";
+import { humanizeLabel as C } from "../_common/format.js";
+import { attachCombinedAxisTooltip as W } from "../_common/tooltip.js";
+import { colorSetFromPalette as q, applyDateAxisLabelFormat as z, applyValueFormat as H } from "../_common/utils.js";
 import { c as l, p as U, a as D } from "../../../Entity-BJCuhdq_.js";
 import { X as _, V as $ } from "../../../AxisRenderer-BCQoUJw6.js";
-import { S as j } from "../../../Scrollbar-CTI7_8Qw.js";
-import { A as X, a as J } from "../../../AxisRendererY-AXWvGU6r.js";
-import { C as K } from "../../../CategoryAxis-B6NqW8qd.js";
-import { C as Q } from "../../../ColumnSeries-CtRTsn-E.js";
-import { D as L, G as Z } from "../../../GaplessDateAxis-B2g2jgSG.js";
-import { L as ee } from "../../../LineSeries-D_IL2qGF.js";
-import { B as te } from "../../../Bullet-Djj7Vs9T.js";
-import { C as re } from "../../../Circle-BnfBNKBD.js";
-import { X as ae } from "../../../XYCursor-CVUSpqb9.js";
-import { L as oe } from "../../../Legend-CFvQiIfn.js";
+import { A as b, a as j } from "../../../AxisRendererY-AXWvGU6r.js";
+import { C as J } from "../../../CategoryAxis-B6NqW8qd.js";
+import { C as K } from "../../../ColumnSeries-CtRTsn-E.js";
+import { D as X, G as Q } from "../../../GaplessDateAxis-B2g2jgSG.js";
+import { L as Z } from "../../../LineSeries-D_IL2qGF.js";
+import { B as ee } from "../../../Bullet-Djj7Vs9T.js";
+import { C as te } from "../../../Circle-BnfBNKBD.js";
+import { X as re } from "../../../XYCursor-CVUSpqb9.js";
+import { L as ae } from "../../../Legend-CFvQiIfn.js";
 import { D as se } from "../../../DateAxis-DEXKps1S.js";
-const Ye = (Y) => {
-  const f = E({ props: Y, name: "HCColumnLineMix" }), {
+const Xe = (L) => {
+  const f = B({ props: L, name: "HCColumnLineMix" }), {
     dimensions: t,
     values: n,
     data: p,
-    initDelay: S = 0,
-    baseInterval: h,
-    colors: x,
+    initDelay: Y = 0,
+    baseInterval: x,
+    colors: h,
     skipEmptyDates: A = !1,
     sx: T,
     ...R
-  } = f, s = P(), y = `hc-column-line-mix-${V().replace(/:/g, "")}`, d = z(null), g = t.length < 1 ? "ColumnLineMix requires at least 1 dimension" : null;
-  G(() => {
-    if (g) return;
+  } = f, o = E(), g = `hc-column-line-mix-${V().replace(/:/g, "")}`, d = G(null), y = t.length < 1 ? "ColumnLineMix requires at least 1 dimension" : null;
+  N(() => {
+    if (y) return;
     let c;
     return c = setTimeout(() => {
       var w, F, v, k;
-      const e = M.new(y);
+      const e = M.new(g);
       d.current = e, e.setThemes([O.new(e)]), e.interfaceColors.setAll({
-        text: l(s.palette.text.primary),
-        grid: l(s.palette.divider),
-        stroke: l(s.palette.divider)
+        text: l(o.palette.text.primary),
+        grid: l(o.palette.divider),
+        stroke: l(o.palette.divider)
       });
       const r = e.container.children.push(
         _.new(e, {
@@ -52,87 +51,84 @@ const Ye = (Y) => {
           layout: e.verticalLayout
         })
       );
-      r.set("colors", W(e, x)), r.get("colors", {}).set("step", 3), r.set(
-        "scrollbarX",
-        j.new(e, { orientation: "horizontal" })
-      );
+      r.set("colors", q(e, h)), r.get("colors", {}).set("step", 3);
       let a, m = p;
       if (t[0].type === "date") {
-        m = C.orderBy(p, [t[0].value]);
-        const i = A ? Z : se;
+        m = P.orderBy(p, [t[0].value]);
+        const i = A ? Q : se;
         a = r.xAxes.push(
           i.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
-            baseInterval: h || { timeUnit: "day", count: 1 },
-            renderer: X.new(e, {})
+            baseInterval: x || { timeUnit: "day", count: 1 },
+            renderer: b.new(e, {})
           })
         ), (w = a.get("renderer")) == null || w.grid.template.setAll({
-          stroke: l(s.palette.divider),
+          stroke: l(o.palette.divider),
           strokeOpacity: 1
-        }), q(a, t[0]);
+        }), z(a, t[0]);
       } else
         a = r.xAxes.push(
-          K.new(e, {
+          J.new(e, {
             categoryField: t[0].value,
-            renderer: X.new(e, {})
+            renderer: b.new(e, {})
           })
         ), (F = a.get("renderer")) == null || F.grid.template.setAll({
-          stroke: l(s.palette.divider),
+          stroke: l(o.palette.divider),
           strokeOpacity: 1
         }), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), m = C.orderBy(p, [t[0].value]), a.data.setAll(m);
+        }), a.data.setAll(m);
       const u = r.yAxes.push(
         $.new(e, {
           min: 0,
           extraMax: 0.1,
-          renderer: J.new(e, { strokeOpacity: 0.1 })
+          renderer: j.new(e, { strokeOpacity: 0.1 })
         })
       );
       (v = u.get("renderer")) == null || v.grid.template.setAll({
-        stroke: l(s.palette.divider),
+        stroke: l(o.palette.divider),
         strokeOpacity: 1
       }), n.forEach((i, I) => {
         if (I === 0) {
-          const o = r.series.push(
-            Q.new(e, {
-              name: i.label ?? b(i.name),
+          const s = r.series.push(
+            K.new(e, {
+              name: i.label ?? C(i.name),
               xAxis: a,
               yAxis: u,
               valueYField: i.dataFieldName,
               ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value }
             })
           );
-          o.columns.template.setAll({
+          s.columns.template.setAll({
             tooltipY: U(10),
             templateField: "columnSettings"
-          }), t[0].type === "date" && (o.data.processor = L.new(e, {
+          }), t[0].type === "date" && (s.data.processor = X.new(e, {
             dateFormat: "i",
             dateFields: [t[0].value]
-          })), o.data.setAll(m), o.appear();
+          })), s.data.setAll(m), s.appear();
         } else {
-          const o = r.series.push(
-            ee.new(e, {
-              name: i.label ?? b(i.name),
+          const s = r.series.push(
+            Z.new(e, {
+              name: i.label ?? C(i.name),
               xAxis: a,
               yAxis: u,
               valueYField: i.dataFieldName,
               ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value }
             })
           );
-          o.strokes.template.setAll({
+          s.strokes.template.setAll({
             strokeWidth: 3,
             templateField: "strokeSettings"
-          }), t[0].type === "date" && (o.data.processor = L.new(e, {
+          }), t[0].type === "date" && (s.data.processor = X.new(e, {
             dateFormat: "i",
             dateFields: [t[0].value]
-          })), o.data.setAll(m), o.bullets.push(function() {
-            return te.new(e, {
-              sprite: re.new(e, {
+          })), s.data.setAll(m), s.bullets.push(function() {
+            return ee.new(e, {
+              sprite: te.new(e, {
                 strokeWidth: 3,
-                stroke: o.get("stroke"),
+                stroke: s.get("stroke"),
                 radius: 5,
                 fill: e.interfaceColors.get("background")
               })
@@ -141,29 +137,29 @@ const Ye = (Y) => {
         }
       }), r.set(
         "cursor",
-        ae.new(e, { xAxis: a, behavior: "none" })
-      ).lineY.set("visible", !1), N({
+        re.new(e, { xAxis: a, behavior: "none" })
+      ).lineY.set("visible", !1), W({
         root: e,
         chart: r,
         xAxis: a,
-        theme: s,
+        theme: o,
         isDateAxis: t[0].type === "date",
-        baseInterval: h,
+        baseInterval: x,
         follow: !0
       }), r.children.push(
-        oe.new(e, {
+        ae.new(e, {
           centerX: D,
           x: D
         })
       ).data.setAll(r.series.values), H(e, (k = n == null ? void 0 : n[0]) == null ? void 0 : k.format), r.appear(1e3, 100);
-    }, S), () => {
+    }, Y), () => {
       var e;
       c && clearTimeout(c), (e = d.current) == null || e.dispose(), d.current = null;
     };
-  }, [p, t, n, s.palette.mode, x, A]);
-  const B = { ...f };
-  return { chartId: y, ownerState: B, sx: T, error: g, other: R };
+  }, [p, t, n, o.palette.mode, h, A]);
+  const S = { ...f };
+  return { chartId: g, ownerState: S, sx: T, error: y, other: R };
 };
 export {
-  Ye as useColumnLineMixLogic
+  Xe as useColumnLineMixLogic
 };

package/dist/components/charts/forecast-cone/index.js

@@ -1,47 +1,49 @@
-import c, { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { i as h } from "../../../styled-Ckq8ALHh.js";
-import { r as u } from "../../../createSvgIcon-jKAqRXE2.js";
-import { IconButton as s, Typography as d } from "@mui/material";
-import { useForecastConeChartLogic as z } from "./logic.js";
-import { ForecastConeChartRoot as I, ForecastConeChartCanvas as R, ForecastConeChartPager as $ } from "./styled.js";
-var a = {}, S = h;
-Object.defineProperty(a, "__esModule", {
+import h, { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { i as u } from "../../../styled-Ckq8ALHh.js";
+import { r as f } from "../../../createSvgIcon-jKAqRXE2.js";
+import { IconButton as d, Typography as c } from "@mui/material";
+import { useForecastConeChartLogic as R } from "./logic.js";
+import { ForecastConeChartRoot as $, ForecastConeChartCanvas as S, ForecastConeChartPager as F } from "./styled.js";
+var i = {}, L = u;
+Object.defineProperty(i, "__esModule", {
   value: !0
 });
-var f = a.default = void 0, F = S(u()), L = c;
-f = a.default = (0, F.default)(/* @__PURE__ */ (0, L.jsx)("path", {
+var v = i.default = void 0, M = L(f()), q = h;
+v = i.default = (0, M.default)(/* @__PURE__ */ (0, q.jsx)("path", {
   d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
 }), "ChevronLeft");
-var i = {}, M = h;
-Object.defineProperty(i, "__esModule", {
+var a = {}, w = u;
+Object.defineProperty(a, "__esModule", {
   value: !0
 });
-var v = i.default = void 0, q = M(u()), D = c;
-v = i.default = (0, q.default)(/* @__PURE__ */ (0, D.jsx)("path", {
+var p = a.default = void 0, O = w(f()), P = h;
+p = a.default = (0, O.default)(/* @__PURE__ */ (0, P.jsx)("path", {
   d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
 }), "ChevronRight");
-const N = (p) => {
+const A = (g) => {
   const {
-    chartDivRef: g,
-    data: m,
-    chartId: C,
+    chartDivRef: m,
+    data: C,
+    chartId: x,
     loading: n,
-    emptyMessage: x,
-    isMulti: y,
+    emptyMessage: y,
+    isMulti: _,
     origins: r,
-    selectedOriginIndex: t,
-    onOriginChange: l,
-    sx: _,
-    other: b,
-    ownerState: j
-  } = z(p);
-  return /* @__PURE__ */ o(I, { ownerState: j, sx: _, ...b, children: [
-    /* @__PURE__ */ o(R, { children: [
+    selectedOriginIndex: o,
+    shownOriginIndex: l,
+    isPreviewing: b,
+    onOriginChange: s,
+    sx: I,
+    other: j,
+    ownerState: z
+  } = R(g);
+  return /* @__PURE__ */ t($, { ownerState: z, sx: I, ...j, children: [
+    /* @__PURE__ */ t(S, { children: [
       /* @__PURE__ */ e(
         "div",
         {
-          ref: g,
-          id: C,
+          ref: m,
+          id: x,
           style: { width: "100%", height: "100%" }
         }
       ),
@@ -62,7 +64,7 @@ const N = (p) => {
           children: "Loading..."
         }
       ),
-      !n && m.length === 0 && /* @__PURE__ */ e(
+      !n && C.length === 0 && /* @__PURE__ */ e(
         "div",
         {
           style: {
@@ -75,38 +77,49 @@ const N = (p) => {
             fontSize: "1.1rem",
             zIndex: 10
           },
-          children: x
+          children: y
         }
       )
     ] }),
-    y && r.length > 1 && /* @__PURE__ */ o($, { children: [
+    _ && r.length > 1 && /* @__PURE__ */ t(F, { children: [
       /* @__PURE__ */ e(
-        s,
+        d,
         {
           size: "small",
           "aria-label": "Previous forecast",
-          disabled: t <= 0,
-          onClick: () => l(t - 1),
-          children: /* @__PURE__ */ e(f, { fontSize: "small" })
+          disabled: o <= 0,
+          onClick: () => s(o - 1),
+          children: /* @__PURE__ */ e(v, { fontSize: "small" })
         }
       ),
-      /* @__PURE__ */ o(d, { variant: "caption", color: "text.secondary", component: "div", children: [
-        `Forecast origin: ${r[t] ?? ""}`,
-        /* @__PURE__ */ e(d, { variant: "caption", color: "text.disabled", component: "span", children: ` (${t + 1} / ${r.length})` })
+      /* @__PURE__ */ t(c, { variant: "caption", color: "text.secondary", component: "div", children: [
+        `Forecast origin: ${r[l] ?? ""}`,
+        /* @__PURE__ */ t(
+          c,
+          {
+            variant: "caption",
+            color: "text.disabled",
+            component: "span",
+            children: [
+              ` (${l + 1} / ${r.length})`,
+              b ? " · preview" : ""
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ e(
-        s,
+        d,
         {
           size: "small",
           "aria-label": "Next forecast",
-          disabled: t >= r.length - 1,
-          onClick: () => l(t + 1),
-          children: /* @__PURE__ */ e(v, { fontSize: "small" })
+          disabled: o >= r.length - 1,
+          onClick: () => s(o + 1),
+          children: /* @__PURE__ */ e(p, { fontSize: "small" })
         }
       )
     ] })
   ] });
 };
 export {
-  N as ForecastConeChart
+  A as ForecastConeChart
 };