@hybridcore/ui 1.6.3 → 1.6.5

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/LinearGradient-DiRq5YcI.js

@@ -0,0 +1,93 @@
+import { E as M, e as v, f as w, u as G } from "./ColorSet-C7vpNXhM.js";
+import { m as B, s as O } from "./AnimatedTheme-jnasw6rT.js";
+class c extends M {
+  _afterNew() {
+    super._afterNewApplyThemes();
+  }
+  /**
+   * @ignore
+   */
+  getFill(t) {
+    return {
+      addColorStop: (l, e) => {
+      }
+    };
+  }
+  _changed() {
+    super._changed();
+  }
+  /**
+   * @ignore
+   */
+  getBounds(t) {
+    const l = this.get("target");
+    if (l) {
+      let e = l.globalBounds();
+      const r = t.toLocal({ x: e.left, y: e.top }), s = t.toLocal({ x: e.right, y: e.top }), a = t.toLocal({ x: e.right, y: e.bottom }), n = t.toLocal({ x: e.left, y: e.bottom });
+      return {
+        left: Math.min(r.x, s.x, a.x, n.x),
+        top: Math.min(r.y, s.y, a.y, n.y),
+        right: Math.max(r.x, s.x, a.x, n.x),
+        bottom: Math.max(r.y, s.y, a.y, n.y)
+      };
+    }
+    return t._display.getLocalBounds();
+  }
+}
+Object.defineProperty(c, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "Gradient"
+});
+Object.defineProperty(c, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: M.classNames.concat([c.className])
+});
+class d extends c {
+  /**
+   * @ignore
+   */
+  getFill(t) {
+    const l = this.get("rotation", 0);
+    let e = this.getBounds(t), r = e.left || 0, s = e.right || 0, a = e.top || 0, n = e.bottom || 0, h = B(l), p = O(l), u = h * (s - r), f = p * (n - a);
+    u == 0 && (u = 1), f == 0 && (f = 1);
+    let y = Math.max(u, f);
+    const x = this._root._renderer.createLinearGradient(r, a, r + y * h, a + y * p), b = this.get("stops");
+    if (b) {
+      let N = 0;
+      v(b, (i) => {
+        let g = i.offset;
+        w(g) || (g = N / (b.length - 1));
+        let m = i.opacity;
+        w(m) || (m = 1);
+        let o = i.color;
+        if (o) {
+          const _ = i.lighten;
+          _ && (o = G.lighten(o, _));
+          const L = i.brighten;
+          L && (o = G.brighten(o, L)), x.addColorStop(g, "rgba(" + o.r + "," + o.g + "," + o.b + "," + m + ")");
+        }
+        N++;
+      });
+    }
+    return x;
+  }
+}
+Object.defineProperty(d, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "LinearGradient"
+});
+Object.defineProperty(d, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: c.classNames.concat([d.className])
+});
+export {
+  d as L
+};

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

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

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

@@ -1,7 +1,7 @@
 import { useThemeProps as v } from "@mui/material";
 import { useMemo as P } from "react";
-import { adaptTemporalData as g } from "./helpers.js";
-const x = (l) => {
+import { adaptTemporalData as C } from "./helpers.js";
+const M = (l) => {
   const n = v({ props: l, name: "HCChartWrapper" }), {
     title: m,
     description: d,
@@ -11,9 +11,10 @@ const x = (l) => {
     dimensions: s = [],
     values: p = [],
     series: r = [],
-    sx: f,
-    ...u
-  } = n, h = {
+    loading: f = !1,
+    sx: u,
+    ...h
+  } = n, y = {
     ...P(() => {
       let t = { data: a, dimensions: s, values: p };
       if (s.length > 0) {
@@ -26,22 +27,23 @@ const x = (l) => {
           };
         }
       } else if (r.length > 0) {
-        const o = g(r);
+        const o = C(r);
         t = { ...t, ...o };
       }
       return t;
     }, [i, a, s, p, r]),
-    ...u
-  }, y = { ...n };
+    ...h
+  }, g = { ...n };
   return {
     title: m,
     description: d,
     type: c,
-    chartProps: h,
-    ownerState: y,
-    sx: f
+    chartProps: y,
+    loading: f,
+    ownerState: g,
+    sx: u
   };
 };
 export {
-  x as useChartWrapperLogic
+  M as useChartWrapperLogic
 };

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