@hybridcore/ui 1.6.4 → 1.6.6

package/CATALOG.md

@@ -71,6 +71,7 @@ import { ComponentName } from '@hybridcore/ui';
 | ChartWrapper               | HCChartWrapper             | Switches between 14 chart types from a single config                   | chart, wrapper                        |
 | CandlestickChart           | HCCandlestickChart         | Financial OHLC candlestick chart                                       | chart, financial, ohlc                |
 | ColumnLineMix              | HCColumnLineMix            | Mixed column + line chart for combined metrics                         | chart, column, line                   |
+| DonutChart                 | HCDonutChart               | Pie chart with a hollow center (donut) for an extra metric             | chart, pie, donut                     |
 | 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                        |

package/dist/IconX-C2wmVYSK.js

@@ -0,0 +1,11 @@
+import { c as o } from "./createReactComponent-C7L-DMHj.js";
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const t = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], c = o("outline", "x", "X", t);
+export {
+  c as I
+};

package/dist/components/charts/_common/format.js

@@ -0,0 +1,49 @@
+const s = "—", o = (n) => new Intl.NumberFormat(
+  "en-US",
+  n === void 0 ? { maximumFractionDigits: 2 } : { minimumFractionDigits: n, maximumFractionDigits: n }
+), l = (n, e, i = s) => {
+  if (n == null || n === "") return i;
+  const t = Number(n);
+  if (Number.isNaN(t)) return String(n);
+  const r = o(e == null ? void 0 : e.decimals).format(t);
+  return `${(e == null ? void 0 : e.prefix) ?? ""}${r}${(e == null ? void 0 : e.suffix) ?? ""}`;
+}, d = (n) => {
+  if (!n) return;
+  const { prefix: e, suffix: i, decimals: t } = n;
+  if (e === void 0 && i === void 0 && t === void 0)
+    return;
+  const r = t === void 0 ? "#,###.##" : t <= 0 ? "#,##0" : `#,##0.${"0".repeat(t)}`, c = (u) => u ? `'${u.replace(/'/g, "")}'` : "";
+  return `${c(e)}${r}${c(i)}`;
+}, v = (n) => n && n.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().replace(/\b\w/g, (e) => e.toUpperCase()), a = (n, e) => {
+  switch (e.op) {
+    case "lt":
+      return n < e.value;
+    case "lte":
+      return n <= e.value;
+    case "gt":
+      return n > e.value;
+    case "gte":
+      return n >= e.value;
+    case "eq":
+      return n === e.value;
+    case "neq":
+      return n !== e.value;
+    case "between":
+      return e.value2 !== void 0 && n >= e.value && n <= e.value2;
+    default:
+      return !1;
+  }
+}, b = (n, e) => {
+  const i = e == null ? void 0 : e.conditionalRules;
+  if (!(i != null && i.length)) return {};
+  const t = Number(n);
+  if (Number.isNaN(t)) return {};
+  const r = i.find((c) => a(t, c));
+  return r ? { color: r.color, backgroundColor: r.backgroundColor } : {};
+};
+export {
+  d as buildAmNumberFormat,
+  l as formatValue,
+  v as humanizeLabel,
+  b as resolveConditionalStyle
+};

package/dist/components/charts/_common/utils.js

@@ -1,5 +1,6 @@
-import { C as t, c as F } from "../../../ColorSet-C7vpNXhM.js";
-const c = [
+import { buildAmNumberFormat as t } from "./format.js";
+import { C as m, c as F } from "../../../ColorSet-C7vpNXhM.js";
+const a = [
   "#294D94",
   "#375F97",
   "#44729C",
@@ -10,11 +11,15 @@ const c = [
   "#9FCFBF",
   "#B9E1C9",
   "#D6F1D5"
-], C = (o, r = c) => t.new(o, {
-  colors: r.map((e) => F(e)),
+], u = (r, e = a) => m.new(r, {
+  colors: e.map((o) => F(o)),
   reuse: !0
-});
+}), c = (r, e) => {
+  const o = t(e);
+  o && (r.numberFormatter.set("numericFields", void 0), r.numberFormatter.set("numberFormat", o));
+};
 export {
-  c as DEFAULT_VIRIDIS_COOL,
-  C as colorSetFromPalette
+  a as DEFAULT_VIRIDIS_COOL,
+  c as applyValueFormat,
+  u as colorSetFromPalette
 };

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

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

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

@@ -1,45 +1,45 @@
-import { R, A as B, T as p } from "../../../AnimatedTheme-jnasw6rT.js";
-import { useThemeProps as I, useTheme as M } from "@mui/material";
-import F from "lodash";
-import { useId as z, useRef as P, useEffect as E } from "react";
-import { colorSetFromPalette as N } from "../_common/utils.js";
-import { c as i, p as V, a as X } from "../../../ColorSet-C7vpNXhM.js";
-import { X as W, V as q } from "../../../AxisRenderer-DTyLLA6c.js";
-import { S as H } from "../../../Scrollbar-D86MJyr2.js";
-import { D as U } from "../../../DateAxis-YX3QNIB-.js";
-import { A as k, a as _ } from "../../../AxisRendererY-C_ItLPNV.js";
-import { C as $ } from "../../../CategoryAxis-CwnfaGc8.js";
-import { C as j } from "../../../ColumnSeries-CjgdJ2QL.js";
-import { D as C } from "../../../DataProcessor-CHDO51q4.js";
-import { L as G } from "../../../LineSeries-Uiv5o56b.js";
-import { B as J } from "../../../Bullet-DVczI2TD.js";
-import { C as K } from "../../../Circle-Cy5s-pVc.js";
-import { X as Q } from "../../../XYCursor-C8WktvKM.js";
-import { L as Z } from "../../../Legend-Dp_MKfS4.js";
-const ye = (b) => {
-  const f = I({ props: b, name: "HCColumnLineMix" }), {
+import { R as B, A as I, T as d } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as M, useTheme as z } from "@mui/material";
+import X from "lodash";
+import { useId as P, useRef as V, useEffect as E } from "react";
+import { colorSetFromPalette as N, applyValueFormat as W } from "../_common/utils.js";
+import { c as i, p as q, a as k } from "../../../ColorSet-C7vpNXhM.js";
+import { X as H, V as U } from "../../../AxisRenderer-DTyLLA6c.js";
+import { S as _ } from "../../../Scrollbar-D86MJyr2.js";
+import { D as $ } from "../../../DateAxis-YX3QNIB-.js";
+import { A as C, a as j } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as G } from "../../../CategoryAxis-CwnfaGc8.js";
+import { C as J } from "../../../ColumnSeries-CjgdJ2QL.js";
+import { D as b } from "../../../DataProcessor-CHDO51q4.js";
+import { L as K } from "../../../LineSeries-Uiv5o56b.js";
+import { B as Q } from "../../../Bullet-DVczI2TD.js";
+import { C as Z } from "../../../Circle-Cy5s-pVc.js";
+import { X as ee } from "../../../XYCursor-C8WktvKM.js";
+import { L as te } from "../../../Legend-Dp_MKfS4.js";
+const Fe = (L) => {
+  const h = M({ props: L, name: "HCColumnLineMix" }), {
     dimensions: t,
-    values: h,
-    data: n,
-    initDelay: L = 0,
-    baseInterval: T,
+    values: l,
+    data: m,
+    initDelay: T = 0,
+    baseInterval: Y,
     colors: g,
-    sx: Y,
-    ...D
-  } = f, a = M(), x = `hc-column-line-mix-${z().replace(/:/g, "")}`, d = P(null), w = t.length < 1 ? "ColumnLineMix requires at least 1 dimension" : null;
+    sx: D,
+    ...S
+  } = h, a = z(), x = `hc-column-line-mix-${P().replace(/:/g, "")}`, c = V(null), w = t.length < 1 ? "ColumnLineMix requires at least 1 dimension" : null;
   E(() => {
     if (w) return;
     let u;
     return u = setTimeout(() => {
-      var v, y, A;
-      const e = R.new(x);
-      d.current = e, e.setThemes([B.new(e)]), e.interfaceColors.setAll({
+      var y, A, v, F;
+      const e = B.new(x);
+      c.current = e, e.setThemes([I.new(e)]), e.interfaceColors.setAll({
         text: i(a.palette.text.primary),
         grid: i(a.palette.divider),
         stroke: i(a.palette.divider)
       });
       const r = e.container.children.push(
-        W.new(e, {
+        H.new(e, {
           panX: !1,
           panY: !1,
           wheelX: "none",
@@ -50,74 +50,74 @@ const ye = (b) => {
       );
       r.set("colors", N(e, g)), r.get("colors", {}).set("step", 3), r.set(
         "scrollbarX",
-        H.new(e, { orientation: "horizontal" })
+        _.new(e, { orientation: "horizontal" })
       );
-      let s, l = n;
-      t[0].type === "date" ? (l = F.orderBy(n, [t[0].value]), s = r.xAxes.push(
-        U.new(e, {
+      let s, n = m;
+      t[0].type === "date" ? (n = X.orderBy(m, [t[0].value]), s = r.xAxes.push(
+        $.new(e, {
           maxDeviation: 0.1,
           groupData: !1,
-          baseInterval: T || { timeUnit: "day", count: 1 },
-          renderer: k.new(e, {}),
-          tooltip: p.new(e, {})
+          baseInterval: Y || { timeUnit: "day", count: 1 },
+          renderer: C.new(e, {}),
+          tooltip: d.new(e, {})
         })
-      ), (v = s.get("renderer")) == null || v.grid.template.setAll({
+      ), (y = s.get("renderer")) == null || y.grid.template.setAll({
         stroke: i(a.palette.divider),
         strokeOpacity: 1
       })) : (s = r.xAxes.push(
-        $.new(e, {
+        G.new(e, {
           categoryField: t[0].value,
-          renderer: k.new(e, {}),
-          tooltip: p.new(e, {})
+          renderer: C.new(e, {}),
+          tooltip: d.new(e, {})
         })
-      ), (y = s.get("renderer")) == null || y.grid.template.setAll({
+      ), (A = s.get("renderer")) == null || A.grid.template.setAll({
         stroke: i(a.palette.divider),
         strokeOpacity: 1
       }), e.numberFormatter.setAll({
         numberFormat: "#",
         numericFields: ["valueX"]
-      }), l = F.orderBy(n, [t[0].value]), s.data.setAll(l));
-      const c = r.yAxes.push(
-        q.new(e, {
+      }), n = X.orderBy(m, [t[0].value]), s.data.setAll(n));
+      const f = r.yAxes.push(
+        U.new(e, {
           min: 0,
           extraMax: 0.1,
-          renderer: _.new(e, { strokeOpacity: 0.1 })
+          renderer: j.new(e, { strokeOpacity: 0.1 })
         })
       );
-      (A = c.get("renderer")) == null || A.grid.template.setAll({
+      (v = f.get("renderer")) == null || v.grid.template.setAll({
         stroke: i(a.palette.divider),
         strokeOpacity: 1
-      }), h.forEach((m, O) => {
-        if (O === 0) {
+      }), l.forEach((p, R) => {
+        if (R === 0) {
           const o = r.series.push(
-            j.new(e, {
-              name: m.name,
+            J.new(e, {
+              name: p.name,
               xAxis: s,
-              yAxis: c,
-              valueYField: m.dataFieldName,
+              yAxis: f,
+              valueYField: p.dataFieldName,
               ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value },
-              tooltip: p.new(e, {
+              tooltip: d.new(e, {
                 pointerOrientation: "horizontal",
                 labelText: "{name} in {categoryX}: {valueY} {info}"
               })
             })
           );
           o.columns.template.setAll({
-            tooltipY: V(10),
+            tooltipY: q(10),
             templateField: "columnSettings"
-          }), t[0].type === "date" && (o.data.processor = C.new(e, {
+          }), t[0].type === "date" && (o.data.processor = b.new(e, {
             dateFormat: "i",
             dateFields: [t[0].value]
-          })), o.data.setAll(l), o.appear();
+          })), o.data.setAll(n), o.appear();
         } else {
           const o = r.series.push(
-            G.new(e, {
-              name: m.name,
+            K.new(e, {
+              name: p.name,
               xAxis: s,
-              yAxis: c,
-              valueYField: m.dataFieldName,
+              yAxis: f,
+              valueYField: p.dataFieldName,
               ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value },
-              tooltip: p.new(e, {
+              tooltip: d.new(e, {
                 pointerOrientation: "horizontal",
                 labelText: "{name} in {categoryX}: {valueY} {info}"
               })
@@ -126,12 +126,12 @@ const ye = (b) => {
           o.strokes.template.setAll({
             strokeWidth: 3,
             templateField: "strokeSettings"
-          }), t[0].type === "date" && (o.data.processor = C.new(e, {
+          }), t[0].type === "date" && (o.data.processor = b.new(e, {
             dateFormat: "i",
             dateFields: [t[0].value]
-          })), o.data.setAll(l), o.bullets.push(function() {
-            return J.new(e, {
-              sprite: K.new(e, {
+          })), o.data.setAll(n), o.bullets.push(function() {
+            return Q.new(e, {
+              sprite: Z.new(e, {
                 strokeWidth: 3,
                 stroke: o.get("stroke"),
                 radius: 5,
@@ -140,20 +140,20 @@ const ye = (b) => {
             });
           });
         }
-      }), r.set("cursor", Q.new(e, {})), r.children.push(
-        Z.new(e, {
-          centerX: X,
-          x: X
+      }), r.set("cursor", ee.new(e, {})), r.children.push(
+        te.new(e, {
+          centerX: k,
+          x: k
         })
-      ).data.setAll(r.series.values), r.appear(1e3, 100);
-    }, L), () => {
+      ).data.setAll(r.series.values), W(e, (F = l == null ? void 0 : l[0]) == null ? void 0 : F.format), r.appear(1e3, 100);
+    }, T), () => {
       var e;
-      u && clearTimeout(u), (e = d.current) == null || e.dispose(), d.current = null;
+      u && clearTimeout(u), (e = c.current) == null || e.dispose(), c.current = null;
     };
-  }, [n, t, h, a.palette.mode, g]);
-  const S = { ...f };
-  return { chartId: x, ownerState: S, sx: Y, error: w, other: D };
+  }, [m, t, l, a.palette.mode, g]);
+  const O = { ...h };
+  return { chartId: x, ownerState: O, sx: D, error: w, other: S };
 };
 export {
-  ye as useColumnLineMixLogic
+  Fe as useColumnLineMixLogic
 };

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

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

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

@@ -0,0 +1,67 @@
+import { R as x, A } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as C, useTheme as D } from "@mui/material";
+import F from "dayjs";
+import { useId as P, useRef as R, useEffect as L } from "react";
+import { applyValueFormat as I, colorSetFromPalette as S } from "../_common/utils.js";
+import { P as E, a as j } from "../../../PieSeries-B2fW3z0s.js";
+import { p as m, c as u } from "../../../ColorSet-C7vpNXhM.js";
+import { L as k } from "../../../Legend-Dp_MKfS4.js";
+const J = (v) => {
+  const d = C({ props: v, name: "HCDonutChart" }), {
+    dimensions: t,
+    values: o,
+    data: n,
+    initDelay: y = 0,
+    colors: p,
+    sx: M,
+    ...T
+  } = d, r = D(), f = `hc-donut-chart-${P().replace(/:/g, "")}`, i = R(null);
+  let s = null;
+  t.length < 1 ? s = "Missing dimensions config!" : o.length < 1 && (s = "Missing values config!"), L(() => {
+    if (s) return;
+    let l;
+    return l = setTimeout(() => {
+      var g;
+      const e = x.new(f);
+      i.current = e, I(e, (g = o == null ? void 0 : o[0]) == null ? void 0 : g.format), e.setThemes([A.new(e)]);
+      const h = e.container.children.push(
+        E.new(e, {
+          layout: e.verticalLayout,
+          innerRadius: m(50)
+        })
+      );
+      e.interfaceColors.setAll({
+        text: u(r.palette.text.primary),
+        grid: u(r.palette.divider),
+        stroke: u(r.palette.divider)
+      });
+      const a = h.series.push(
+        j.new(e, {
+          valueField: o[0].dataFieldName,
+          categoryField: t[0].value
+        })
+      );
+      a.set("colors", S(e, p)), t[0].type === "date" && n.forEach((Y) => {
+        let c = "YYYY";
+        t[0].value.includes("month") ? c = "MMM YYYY" : t[0].value.includes("day") && (c = "DD MMM YYYY"), Y[t[0].value] = F(Y[t[0].value]).format(
+          c
+        );
+      }), a.data.setAll(n), h.children.push(
+        k.new(e, {
+          centerX: m(50),
+          x: m(50),
+          marginTop: 15,
+          marginBottom: 15
+        })
+      ).data.setAll(a.dataItems), a.appear(1e3, 100);
+    }, y), () => {
+      var e;
+      l && clearTimeout(l), (e = i.current) == null || e.dispose(), i.current = null;
+    };
+  }, [n, t, o, r.palette.mode, p]);
+  const w = { ...d };
+  return { chartId: f, ownerState: w, sx: M, error: s, other: T };
+};
+export {
+  J as useDonutChartLogic
+};

package/dist/components/charts/donut-chart/styled.js

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