@hybridcore/ui 1.6.14 → 1.6.16

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

@@ -1,6 +1,6 @@
-import { T as x } from "../../../Tooltip-vyZRZWih.js";
-import { c as p, p as v } from "../../../Entity-BJCuhdq_.js";
-const F = {
+import { T } from "../../../Tooltip-vyZRZWih.js";
+import { c as p, p as S } from "../../../Entity-BJCuhdq_.js";
+const w = {
   millisecond: "d MMM, yyyy HH:mm:ss.SSS",
   second: "d MMM, yyyy HH:mm:ss",
   minute: "d MMM, yyyy HH:mm",
@@ -9,7 +9,7 @@ const F = {
   week: "d MMM, yyyy",
   month: "MMM yyyy",
   year: "yyyy"
-}, $ = (o) => F[(o == null ? void 0 : o.timeUnit) ?? "day"], T = (o, t) => {
+}, A = (o) => w[(o == null ? void 0 : o.timeUnit) ?? "day"], F = (o, t) => {
   var i;
   (i = o.get("background")) == null || i.setAll({
     fill: p(t.palette.background.paper),
@@ -18,56 +18,65 @@ const F = {
   }), o.label.setAll({
     fill: p(t.palette.text.primary),
     textAlign: "left",
-    lineHeight: v(160)
+    lineHeight: S(160)
   });
-}, D = (o) => {
-  const { root: t, chart: i, theme: s, getText: y } = o, e = x.new(t, { getFillFromSprite: !1 });
-  T(e, s), e.label.adapters.add("text", y), t.tooltipContainer.children.push(e);
-  const n = i.get("cursor");
-  return n == null || n.events.on("cursormoved", () => {
-    const c = n.getPrivate("point");
-    c && (e.label.text.markDirtyText(), e.set("pointTo", n.toGlobal(c)), e.show());
-  }), n == null || n.events.on("cursorhidden", () => e.hide()), e;
-}, A = (o) => {
-  const { root: t, chart: i, xAxis: s, theme: y, isDateAxis: e, baseInterval: n, follow: c } = o, f = $(n), b = p(y.palette.text.secondary).toCSSHex(), g = () => {
-    let l = "";
+}, k = (o) => {
+  const { root: t, chart: i, theme: s, getText: c } = o, e = T.new(t, { getFillFromSprite: !1 });
+  F(e, s), e.label.adapters.add("text", c), t.tooltipContainer.children.push(e);
+  const a = i.get("cursor");
+  return a == null || a.events.on("cursormoved", () => {
+    const y = a.getPrivate("point");
+    y && (e.label.text.markDirtyText(), e.set("pointTo", a.toGlobal(y)), e.show());
+  }), a == null || a.events.on("cursorhidden", () => e.hide()), e;
+}, O = (o) => {
+  const {
+    root: t,
+    chart: i,
+    xAxis: s,
+    theme: c,
+    isDateAxis: e,
+    baseInterval: a,
+    follow: y,
+    horizontal: u
+  } = o, g = A(a), v = p(c.palette.text.secondary).toCSSHex(), b = u ? "valueX" : "valueY", H = u ? "valueY" : "valueX", $ = u ? "categoryY" : "categoryX", M = () => {
+    let n = "";
     const m = [];
     if (i.series.each((r) => {
-      const a = r.get("tooltipDataItem"), u = a == null ? void 0 : a.get("valueY");
-      if (a === void 0 || u === void 0 || u === null)
+      const l = r.get("tooltipDataItem"), f = l == null ? void 0 : l.get(b);
+      if (l === void 0 || f === void 0 || f === null)
         return;
-      if (!l)
+      if (!n)
         if (e) {
-          const h = a.get("valueX");
-          typeof h == "number" && (l = t.dateFormatter.format(new Date(h), f));
+          const x = l.get(H);
+          typeof x == "number" && (n = t.dateFormatter.format(new Date(x), g));
         } else
-          l = `${a.get("categoryX") ?? ""}`;
-      const M = r.get("fill") ?? r.get("stroke"), H = M ? `[${M.toCSSHex()}]●[/] ` : "";
+          n = `${l.get($) ?? ""}`;
+      const h = r.get("fill") ?? r.get("stroke"), D = h ? `[${h.toCSSHex()}]●[/] ` : "";
       m.push(
-        `${H}${r.get("name")}: ${t.numberFormatter.format(u)}`
+        `${D}${r.get("name")}: ${t.numberFormatter.format(f)}`
       );
     }), m.length === 0) {
       if (e) {
-        const a = s.positionToValue(
+        const l = s.positionToValue(
           s.getPrivate("tooltipPosition", 0)
         );
-        typeof a == "number" && !Number.isNaN(a) && (l = t.dateFormatter.format(new Date(a), f));
+        typeof l == "number" && !Number.isNaN(l) && (n = t.dateFormatter.format(new Date(l), g));
       }
-      const r = `[${b}]No data[/]`;
-      return l ? `[bold]${l}[/]
+      const r = `[${v}]No data[/]`;
+      return n ? `[bold]${n}[/]
 ${r}` : r;
     }
-    return l ? `[bold]${l}[/]
+    return n ? `[bold]${n}[/]
 ${m.join(`
 `)}` : m.join(`
 `);
   };
-  if (c) return D({ root: t, chart: i, theme: y, getText: g });
-  const d = x.new(t, { getFillFromSprite: !1 });
-  return T(d, y), d.label.adapters.add("text", g), s.set("tooltip", d), d;
+  if (y) return k({ root: t, chart: i, theme: c, getText: M });
+  const d = T.new(t, { getFillFromSprite: !1 });
+  return F(d, c), d.label.adapters.add("text", M), s.set("tooltip", d), d;
 };
 export {
-  A as attachCombinedAxisTooltip,
-  D as attachCursorTooltip,
-  $ as getTooltipDateFormat
+  O as attachCombinedAxisTooltip,
+  k as attachCursorTooltip,
+  A as getTooltipDateFormat
 };

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

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

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

@@ -1,69 +1,82 @@
-import { R as P, A } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as C, useTheme as D } from "@mui/material";
-import F from "dayjs";
-import { useId as R, useRef as L, useEffect as I } from "react";
-import { applyValueFormat as S, colorSetFromPalette as b } from "../_common/utils.js";
-import { P as E, a as N } from "../../../PieSeries-CMH0Z7pz.js";
-import { p as m, c as u } from "../../../Entity-BJCuhdq_.js";
-import { L as j } from "../../../Legend-CFvQiIfn.js";
-const K = (y) => {
-  const p = C({ props: y, name: "HCDonutChart" }), {
+import { R as w, A } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as P, useTheme as R } from "@mui/material";
+import b from "dayjs";
+import { useId as C, useRef as D, useEffect as F } from "react";
+import { applyValueFormat as L, colorSetFromPalette as I } from "../_common/utils.js";
+import { P as S, a as B } from "../../../PieSeries-CMH0Z7pz.js";
+import { p as l, c as s } from "../../../Entity-BJCuhdq_.js";
+import { L as E } from "../../../Legend-CFvQiIfn.js";
+const G = (y) => {
+  const u = P({ props: y, name: "HCDonutChart" }), {
     dimensions: t,
     values: o,
-    data: i,
+    data: n,
     initDelay: T = 0,
     colors: d,
     sx: x,
     ...M
-  } = p, a = D(), f = `hc-donut-chart-${R().replace(/:/g, "")}`, n = L(null);
-  let s = null;
-  t.length < 1 ? s = "Missing dimensions config!" : o.length < 1 && (s = "Missing values config!"), I(() => {
-    if (s) return;
-    let l;
-    return l = setTimeout(() => {
-      var Y;
-      const e = P.new(f);
-      n.current = e, S(e, (Y = o == null ? void 0 : o[0]) == null ? void 0 : Y.format), e.setThemes([A.new(e)]);
+  } = u, a = R(), f = `hc-donut-chart-${C().replace(/:/g, "")}`, c = D(null);
+  let i = null;
+  t.length < 1 ? i = "Missing dimensions config!" : o.length < 1 && (i = "Missing values config!"), F(() => {
+    if (i) return;
+    let m;
+    return m = setTimeout(() => {
+      var v;
+      const e = w.new(f);
+      c.current = e, L(e, (v = o == null ? void 0 : o[0]) == null ? void 0 : v.format), e.setThemes([A.new(e)]);
       const h = e.container.children.push(
-        E.new(e, {
+        S.new(e, {
           layout: e.verticalLayout,
-          innerRadius: m(50)
+          innerRadius: l(50)
         })
       );
       e.interfaceColors.setAll({
-        text: u(a.palette.text.primary),
-        grid: u(a.palette.divider),
-        stroke: u(a.palette.divider)
+        text: s(a.palette.text.primary),
+        grid: s(a.palette.divider),
+        stroke: s(a.palette.divider),
+        // Drives the gap color between slices; tie it to the surface so the
+        // beveled edges read correctly in both light and dark mode.
+        background: s(a.palette.background.paper)
       });
       const r = h.series.push(
-        N.new(e, {
+        B.new(e, {
           valueField: o[0].dataFieldName,
           categoryField: t[0].value
         })
       );
-      r.set("colors", b(e, d));
+      r.set("colors", I(e, d));
       const g = "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value})";
-      r.slices.template.set("tooltipText", g), r.labels.template.set("text", g), t[0].type === "date" && i.forEach((v) => {
-        let c = "YYYY";
-        t[0].value.includes("month") ? c = "MMM YYYY" : t[0].value.includes("day") && (c = "DD MMM YYYY"), v[t[0].value] = F(v[t[0].value]).format(
-          c
+      r.slices.template.setAll({
+        tooltipText: g,
+        stroke: s(a.palette.background.paper),
+        strokeWidth: 2,
+        strokeOpacity: 1,
+        cornerRadius: 4
+      }), r.slices.template.states.create("hover", { scale: 1.04 }), r.set("radius", l(80)), r.labels.template.setAll({
+        text: g,
+        maxWidth: 140,
+        oversizedBehavior: "wrap"
+      }), t[0].type === "date" && n.forEach((Y) => {
+        let p = "YYYY";
+        t[0].value.includes("month") ? p = "MMM YYYY" : t[0].value.includes("day") && (p = "DD MMM YYYY"), Y[t[0].value] = b(Y[t[0].value]).format(
+          p
         );
-      }), r.data.setAll(i), h.children.push(
-        j.new(e, {
-          centerX: m(50),
-          x: m(50),
+      }), r.data.setAll(n), h.children.push(
+        E.new(e, {
+          centerX: l(50),
+          x: l(50),
           marginTop: 15,
           marginBottom: 15
         })
       ).data.setAll(r.dataItems), r.appear(1e3, 100);
     }, T), () => {
       var e;
-      l && clearTimeout(l), (e = n.current) == null || e.dispose(), n.current = null;
+      m && clearTimeout(m), (e = c.current) == null || e.dispose(), c.current = null;
     };
-  }, [i, t, o, a.palette.mode, d]);
-  const w = { ...p };
-  return { chartId: f, ownerState: w, sx: x, error: s, other: M };
+  }, [n, t, o, a.palette.mode, d]);
+  const k = { ...u };
+  return { chartId: f, ownerState: k, sx: x, error: i, other: M };
 };
 export {
-  K as useDonutChartLogic
+  G as useDonutChartLogic
 };