@hybridcore/ui 1.6.20 → 1.6.22

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,41 +1,41 @@
 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 { useThemeProps as B, useTheme as E } from "@mui/material";
+import P from "lodash";
 import { useId as V, useRef as z, useEffect as G } from "react";
-import { humanizeLabel as b } from "../_common/format.js";
+import { humanizeLabel as C } 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 { c as l, p as U, a as D } from "../../../Entity-BJCuhdq_.js";
+import { c as l, p as U, a as b } 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 { A as D, 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 { D as X, 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 { D as se } from "../../../DateAxis-DEXKps1S.js";
-const Ye = (Y) => {
-  const f = E({ props: Y, name: "HCColumnLineMix" }), {
+const Ye = (L) => {
+  const f = B({ props: L, name: "HCColumnLineMix" }), {
     dimensions: t,
     values: n,
     data: p,
-    initDelay: S = 0,
+    initDelay: Y = 0,
     baseInterval: h,
     colors: x,
     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;
+    sx: S,
+    ...T
+  } = f, s = E(), g = `hc-column-line-mix-${V().replace(/:/g, "")}`, d = z(null), y = t.length < 1 ? "ColumnLineMix requires at least 1 dimension" : null;
   G(() => {
-    if (g) return;
+    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),
@@ -58,14 +58,14 @@ const Ye = (Y) => {
       );
       let a, m = p;
       if (t[0].type === "date") {
-        m = C.orderBy(p, [t[0].value]);
+        m = P.orderBy(p, [t[0].value]);
         const i = A ? Z : se;
         a = r.xAxes.push(
           i.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
             baseInterval: h || { timeUnit: "day", count: 1 },
-            renderer: X.new(e, {})
+            renderer: D.new(e, {})
           })
         ), (w = a.get("renderer")) == null || w.grid.template.setAll({
           stroke: l(s.palette.divider),
@@ -75,7 +75,7 @@ const Ye = (Y) => {
         a = r.xAxes.push(
           K.new(e, {
             categoryField: t[0].value,
-            renderer: X.new(e, {})
+            renderer: D.new(e, {})
           })
         ), (F = a.get("renderer")) == null || F.grid.template.setAll({
           stroke: l(s.palette.divider),
@@ -83,7 +83,7 @@ const Ye = (Y) => {
         }), 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,
@@ -98,7 +98,7 @@ const Ye = (Y) => {
         if (I === 0) {
           const o = r.series.push(
             Q.new(e, {
-              name: i.label ?? b(i.name),
+              name: i.label ?? C(i.name),
               xAxis: a,
               yAxis: u,
               valueYField: i.dataFieldName,
@@ -108,14 +108,14 @@ const Ye = (Y) => {
           o.columns.template.setAll({
             tooltipY: U(10),
             templateField: "columnSettings"
-          }), t[0].type === "date" && (o.data.processor = L.new(e, {
+          }), t[0].type === "date" && (o.data.processor = X.new(e, {
             dateFormat: "i",
             dateFields: [t[0].value]
           })), o.data.setAll(m), o.appear();
         } else {
           const o = r.series.push(
             ee.new(e, {
-              name: i.label ?? b(i.name),
+              name: i.label ?? C(i.name),
               xAxis: a,
               yAxis: u,
               valueYField: i.dataFieldName,
@@ -125,7 +125,7 @@ const Ye = (Y) => {
           o.strokes.template.setAll({
             strokeWidth: 3,
             templateField: "strokeSettings"
-          }), t[0].type === "date" && (o.data.processor = L.new(e, {
+          }), t[0].type === "date" && (o.data.processor = X.new(e, {
             dateFormat: "i",
             dateFields: [t[0].value]
           })), o.data.setAll(m), o.bullets.push(function() {
@@ -152,17 +152,17 @@ const Ye = (Y) => {
         follow: !0
       }), r.children.push(
         oe.new(e, {
-          centerX: D,
-          x: D
+          centerX: b,
+          x: b
         })
       ).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 };
+  const R = { ...f };
+  return { chartId: g, ownerState: R, sx: S, error: y, other: T };
 };
 export {
   Ye as useColumnLineMixLogic

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

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ChartError as a } from "../_common/chart-error.js";
+import { useHistogramLogic as h } from "./logic.js";
+import { HistogramRoot as g } from "./styled.js";
+const f = (t) => {
+  const { chartId: i, ownerState: e, sx: m, error: o, other: s } = h(t);
+  return /* @__PURE__ */ r(g, { ownerState: e, sx: m, ...s, children: o ? /* @__PURE__ */ r(a, { message: o }) : /* @__PURE__ */ r("div", { id: i, style: { width: "100%", height: "100%" } }) });
+};
+export {
+  f as Histogram
+};

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

@@ -0,0 +1,133 @@
+import { R as O, A as H } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as P, useTheme as W } from "@mui/material";
+import z from "lodash";
+import { useId as Z, useRef as $, useEffect as j } from "react";
+import { humanizeLabel as q } from "../_common/format.js";
+import { colorSetFromPalette as J, applyValueFormat as K } from "../_common/utils.js";
+import { c as i, a as F, p as Q } from "../../../Entity-BJCuhdq_.js";
+import { X as U, V as Y } from "../../../AxisRenderer-BCQoUJw6.js";
+import { L as ee } from "../../../Legend-CFvQiIfn.js";
+import { A as te, a as re } from "../../../AxisRendererY-AXWvGU6r.js";
+import { C as oe } from "../../../ColumnSeries-CtRTsn-E.js";
+import { T as se } from "../../../Tooltip-vyZRZWih.js";
+import { X as ne } from "../../../XYCursor-CVUSpqb9.js";
+const R = "__hcBinStart", _ = "__hcBinEnd", Ne = (C) => {
+  const x = P({ props: C, name: "HCHistogram" }), {
+    dimensions: p,
+    values: u,
+    data: A,
+    initDelay: B = 0,
+    colors: b,
+    binWidth: v,
+    barGap: y = 0,
+    logarithmic: d = !1,
+    sx: D,
+    ...I
+  } = x, r = W(), N = `hc-histogram-${Z().replace(/:/g, "")}`, h = $(null), X = p.length < 1 ? "Missing dimensions config!" : u.length < 1 ? "Missing values config!" : null;
+  j(() => {
+    if (X) return;
+    let f;
+    return f = setTimeout(() => {
+      var k, w;
+      const e = O.new(N);
+      h.current = e, e.setThemes([H.new(e)]), e.interfaceColors.setAll({
+        text: i(r.palette.text.primary),
+        grid: i(r.palette.divider),
+        stroke: i(r.palette.divider)
+      });
+      const o = e.container.children.push(
+        U.new(e, {
+          panX: !1,
+          panY: !1,
+          wheelX: "none",
+          wheelY: "none",
+          layout: e.verticalLayout
+        })
+      );
+      o.set("colors", J(e, b));
+      const S = o.children.push(
+        ee.new(e, {
+          centerX: F,
+          x: F
+        })
+      ), s = p[0].value, l = u[0], V = l.dataFieldName, m = z.orderBy(
+        A.filter(
+          (t) => (t == null ? void 0 : t[s]) != null && !Number.isNaN(Number(t[s]))
+        ),
+        [(t) => Number(t[s])]
+      );
+      let c = 1 / 0;
+      for (let t = 1; t < m.length; t++) {
+        const n = Number(m[t][s]) - Number(m[t - 1][s]);
+        n > 0 && n < c && (c = n);
+      }
+      const E = v ?? (Number.isFinite(c) ? c : 1), G = m.map((t) => {
+        const n = Number(t[s]);
+        return { ...t, [R]: n, [_]: n + E };
+      }), g = o.xAxes.push(
+        Y.new(e, {
+          maxDeviation: 0,
+          renderer: te.new(e, { minGridDistance: 40 })
+        })
+      ), T = o.yAxes.push(
+        Y.new(e, {
+          // Linear: frequency bars must grow from a zero baseline, else the auto
+          // min crops the axis and distorts relative bar heights. Log: `min: 0`
+          // is invalid (log 0 is undefined), so drop it and map zero-count bins
+          // to `1` (the axis floor) — those bins then render as no bar.
+          ...d ? { logarithmic: !0, treatZeroAs: 1 } : { min: 0 },
+          renderer: re.new(e, {
+            strokeOpacity: 0.1,
+            ...d ? { minorGridEnabled: !0 } : {}
+          })
+        })
+      );
+      (k = g.get("renderer")) == null || k.grid.template.setAll({
+        stroke: i(r.palette.divider),
+        strokeOpacity: 1
+      }), (w = T.get("renderer")) == null || w.grid.template.setAll({
+        stroke: i(r.palette.divider),
+        strokeOpacity: 1
+      });
+      const a = o.series.push(
+        oe.new(e, {
+          name: l.label ?? q(l.name),
+          xAxis: g,
+          yAxis: T,
+          valueYField: V,
+          // Explicit [open, value] edges give each bar its exact bin span, so
+          // bars sit to numeric scale and a missing bin leaves a real gap.
+          openValueXField: R,
+          valueXField: _
+        })
+      ), M = Math.min(Math.max(y, 0), 1);
+      a.columns.template.setAll({
+        width: Q((1 - M) * 100),
+        strokeOpacity: 1,
+        strokeWidth: 1,
+        stroke: i(r.palette.background.paper),
+        tooltipText: "{openValueX} – {valueX}: {valueY}"
+      }), a.set("tooltip", se.new(e, {})), a.data.setAll(G), a.appear(), S.data.push(a), o.set(
+        "cursor",
+        ne.new(e, { xAxis: g, behavior: "none" })
+      ).lineY.set("visible", !1), K(e, l.format), o.appear(1e3, 100);
+    }, B), () => {
+      var e;
+      f && clearTimeout(f), (e = h.current) == null || e.dispose(), h.current = null;
+    };
+  }, [
+    A,
+    p,
+    u,
+    r.palette.mode,
+    b,
+    v,
+    y,
+    d
+  ]);
+  const L = { ...x };
+  return { chartId: N, ownerState: L, sx: D, error: X, other: I };
+};
+export {
+  Ne as useHistogramLogic
+};

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

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

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

@@ -1,13 +1,13 @@
-import { R as H, T as Z, A as $ } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as j, useTheme as q } from "@mui/material";
-import U from "lodash";
+import { R as z, T as H, A as Z } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as $, useTheme as j } from "@mui/material";
+import q from "lodash";
 import { useId as J, useRef as K, useEffect as Q } from "react";
 import { humanizeLabel as ee } from "../_common/format.js";
 import { attachCombinedAxisTooltip as te } from "../_common/tooltip.js";
 import { colorSetFromPalette as re, applyDateAxisLabelFormat as se, applyValueFormat as oe } from "../_common/utils.js";
-import { c as d, p as X, b as V } from "../../../Entity-BJCuhdq_.js";
+import { c as d, p as X, b as U } from "../../../Entity-BJCuhdq_.js";
 import { X as ae, V as ie } from "../../../AxisRenderer-BCQoUJw6.js";
-import { A as _, a as ne } from "../../../AxisRendererY-AXWvGU6r.js";
+import { A as V, a as ne } from "../../../AxisRendererY-AXWvGU6r.js";
 import { C as le } from "../../../CategoryAxis-B6NqW8qd.js";
 import { L as me } from "../../../LineSeries-D_IL2qGF.js";
 import { D as pe, G as de } from "../../../GaplessDateAxis-B2g2jgSG.js";
@@ -16,7 +16,7 @@ import { C as ue } from "../../../Circle-BnfBNKBD.js";
 import { X as fe } from "../../../XYCursor-CVUSpqb9.js";
 import { L as he } from "../../../Legend-CFvQiIfn.js";
 import { D as Ae } from "../../../DateAxis-DEXKps1S.js";
-const B = 1.1, ge = {
+const _ = 1.1, ge = {
   millisecond: 1,
   second: 1e3,
   minute: 6e4,
@@ -26,28 +26,28 @@ const B = 1.1, ge = {
   month: 2592e6,
   year: 31536e6
 }, _e = (E) => {
-  const b = j({ props: E, name: "HCLineChart" }), {
+  const b = $({ props: E, name: "HCLineChart" }), {
     dimensions: t,
     values: m,
-    data: A,
+    data: w,
     initDelay: P = 0,
     baseInterval: n,
     colors: L,
     connectMissingData: k = !0,
-    skipEmptyDates: v = !1,
+    skipEmptyDates: C = !1,
     sx: R,
     ...W
-  } = b, l = q(), N = `hc-line-chart-${J().replace(/:/g, "")}`, C = K(null);
-  let g = null;
-  t.length < 1 ? g = "Missing dimensions config!" : m.length < 1 && (g = "Missing values config!"), Q(() => {
-    if (g) return;
+  } = b, l = j(), N = `hc-line-chart-${J().replace(/:/g, "")}`, v = K(null);
+  let h = null;
+  t.length < 1 ? h = "Missing dimensions config!" : m.length < 1 && (h = "Missing values config!"), Q(() => {
+    if (h) return;
     let T;
     return T = setTimeout(() => {
       var G, O, I, M;
-      const e = H.new(N);
-      C.current = e;
-      const z = Z.new(e);
-      e.setThemes([$.new(e), z]), e.interfaceColors.setAll({
+      const e = z.new(N);
+      v.current = e;
+      const S = H.new(e);
+      e.setThemes([Z.new(e), S]), e.interfaceColors.setAll({
         text: d(l.palette.text.primary),
         grid: d(l.palette.divider),
         stroke: d(l.palette.divider)
@@ -65,27 +65,27 @@ const B = 1.1, ge = {
         })
       );
       s.set("colors", re(e, L));
-      let i, c = A;
+      let i, A = w;
       if (t[0].type === "date") {
-        const o = v ? de : Ae;
+        const o = C ? de : Ae;
         i = s.xAxes.push(
           o.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
             baseInterval: n || { timeUnit: "day", count: 1 },
-            renderer: _.new(e, {})
+            renderer: V.new(e, {})
           })
-        ), se(i, t[0]), c = U.orderBy(A, [t[0].value]);
+        ), se(i, t[0]), A = q.orderBy(w, [t[0].value]);
       } else
         i = s.xAxes.push(
           le.new(e, {
             categoryField: t[0].value,
-            renderer: _.new(e, {})
+            renderer: V.new(e, {})
           })
         ), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), c = U.orderBy(A, [t[0].value]), i.data.setAll(c);
+        }), i.data.setAll(A);
       const Y = s.yAxes.push(
         ie.new(e, {
           renderer: ne.new(e, {})
@@ -111,24 +111,24 @@ const B = 1.1, ge = {
             // `autoGapCount` (default 1.1) base intervals apart, so absent dates
             // surface as gaps instead of being bridged by a straight segment.
             connect: k,
-            autoGapCount: B,
+            autoGapCount: _,
             ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value }
           })
         );
         if (t[0].type === "date" && (a.data.processor = pe.new(e, {
           dateFormat: "i",
           dateFields: [t[0].value]
-        })), t[0].type === "date" && !v) {
-          const y = t[0].value, x = ge[(n == null ? void 0 : n.timeUnit) ?? "day"] * ((n == null ? void 0 : n.count) ?? 1), p = k ? 1 / 0 : x * B, w = c.map((r) => ({
-            t: new Date(r[y]).getTime(),
+        })), t[0].type === "date" && !C) {
+          const g = t[0].value, y = ge[(n == null ? void 0 : n.timeUnit) ?? "day"] * ((n == null ? void 0 : n.count) ?? 1), p = k ? 1 / 0 : y * _, x = A.map((r) => ({
+            t: new Date(r[g]).getTime(),
             hasValue: r[o.dataFieldName] !== null && r[o.dataFieldName] !== void 0
           })).filter((r) => r.hasValue && !Number.isNaN(r.t)), D = /* @__PURE__ */ new Set();
-          w.forEach((r, f) => {
-            const F = f > 0 ? r.t - w[f - 1].t : 1 / 0, h = f < w.length - 1 ? w[f + 1].t - r.t : 1 / 0;
-            F > p && h > p && D.add(r.t);
-          }), D.size > 0 && a.bullets.push((r, f, F) => {
-            const h = F.dataContext;
-            if (D.has(new Date(h == null ? void 0 : h[y]).getTime()))
+          x.forEach((r, u) => {
+            const F = u > 0 ? r.t - x[u - 1].t : 1 / 0, f = u < x.length - 1 ? x[u + 1].t - r.t : 1 / 0;
+            F > p && f > p && D.add(r.t);
+          }), D.size > 0 && a.bullets.push((r, u, F) => {
+            const f = F.dataContext;
+            if (D.has(new Date(f == null ? void 0 : f[g]).getTime()))
               return ce.new(r, {
                 sprite: ue.new(r, {
                   radius: 3,
@@ -139,7 +139,7 @@ const B = 1.1, ge = {
               });
           });
         }
-        a.data.setAll(c), a.strokes.template.setAll({ strokeWidth: 2 }), a.appear();
+        a.data.setAll(A), a.strokes.template.setAll({ strokeWidth: 2 }), a.appear();
       }), s.set(
         "cursor",
         fe.new(e, { xAxis: i, behavior: "none" })
@@ -152,7 +152,7 @@ const B = 1.1, ge = {
         baseInterval: n,
         follow: !0
       });
-      const u = s.bottomAxesContainer.children.push(
+      const c = s.bottomAxesContainer.children.push(
         he.new(e, {
           width: X(100),
           paddingTop: 10,
@@ -161,16 +161,16 @@ const B = 1.1, ge = {
           layout: e.gridLayout
         })
       );
-      u.itemContainers.template.events.on("pointerover", function(o) {
-        var x;
-        const a = o.target, y = (x = a == null ? void 0 : a.dataItem) == null ? void 0 : x.dataContext;
+      c.itemContainers.template.events.on("pointerover", function(o) {
+        var y;
+        const a = o.target, g = (y = a == null ? void 0 : a.dataItem) == null ? void 0 : y.dataContext;
         s.series.each(function(p) {
-          p !== y ? p.strokes.template.setAll({
+          p !== g ? p.strokes.template.setAll({
             strokeOpacity: 0.15,
             stroke: d(0)
           }) : p.strokes.template.setAll({ strokeWidth: 3 });
         });
-      }), u.itemContainers.template.events.on("pointerout", function() {
+      }), c.itemContainers.template.events.on("pointerout", function() {
         s.series.each(function(o) {
           o.strokes.template.setAll({
             strokeOpacity: 1,
@@ -178,25 +178,25 @@ const B = 1.1, ge = {
             stroke: o.get("fill")
           });
         });
-      }), u.itemContainers.template.set("width", V), u.valueLabels.template.setAll({
-        width: V,
+      }), c.itemContainers.template.set("width", U), c.valueLabels.template.setAll({
+        width: U,
         textAlign: "right"
-      }), u.data.setAll(s.series.values), oe(e, (M = m == null ? void 0 : m[0]) == null ? void 0 : M.format), s.appear(1e3, 100);
+      }), c.data.setAll(s.series.values), oe(e, (M = m == null ? void 0 : m[0]) == null ? void 0 : M.format), s.appear(1e3, 100);
     }, P), () => {
       var e;
-      T && clearTimeout(T), (e = C.current) == null || e.dispose(), C.current = null;
+      T && clearTimeout(T), (e = v.current) == null || e.dispose(), v.current = null;
     };
   }, [
-    A,
+    w,
     t,
     m,
     l.palette.mode,
     L,
     k,
-    v
+    C
   ]);
-  const S = { ...b };
-  return { chartId: N, ownerState: S, sx: R, error: g, other: W };
+  const B = { ...b };
+  return { chartId: N, ownerState: B, sx: R, error: h, other: W };
 };
 export {
   _e as useLineChartLogic