@acronis-platform/ui-react 4.0.0 → 5.0.0

package/dist/components/ui/chart/chart.js

@@ -1,314 +1,189 @@
-import { jsx as s, jsxs as p, Fragment as L } from "react/jsx-runtime";
-import * as b from "react";
-import * as j from "recharts";
-import { cn as x } from "../../../lib/utils.js";
-import { CHART_DEFAULT_PALETTE as $, resolveSeriesColor as C, CHART_STATUS_TOKENS as A } from "./chart-palette.js";
-function S(e, r) {
-  var h;
-  const t = Object.entries(e), n = (c) => {
-    var l;
-    return !!((l = c.tone) != null && l.sameAs);
-  };
-  let o = 0;
-  const i = {};
-  for (const [c, l] of t)
-    n(l) || (i[c] = {
-      ...l,
-      color: C(r, { index: o++, tone: l.tone })
-    });
-  const a = /* @__PURE__ */ new Map();
-  for (const [c, l] of t)
-    n(l) && a.set(c, l.tone.sameAs);
-  let f = !0;
-  for (; f && a.size > 0; ) {
-    f = !1;
-    for (const [c, l] of a) {
-      const v = (h = i[l]) == null ? void 0 : h.color;
-      v !== void 0 && (i[c] = { ...e[c], color: v }, a.delete(c), f = !0);
-    }
-  }
-  for (const [c, l] of a)
-    process.env.NODE_ENV !== "production" && console.warn(
-      `[ui-react] Chart series "${c}" aliases "${l}", which is not a palette-assigned series in this config. Falling back to neutral.`
-    ), i[c] = { ...e[c], color: A.neutral };
-  return Object.fromEntries(t.map(([c]) => [c, i[c]]));
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { CHART_DEFAULT_PALETTE as t, CHART_STATUS_TOKENS as n, resolveSeriesColor as r } from "./chart-palette.js";
+import * as i from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import * as c from "recharts";
+//#region src/components/ui/chart/chart.tsx
+function l(e, t) {
+	let i = Object.entries(e), a = (e) => !!e.tone?.sameAs, o = 0, s = {};
+	for (let [e, n] of i) a(n) || (s[e] = {
+		...n,
+		color: r(t, {
+			index: o++,
+			tone: n.tone
+		})
+	});
+	let c = /* @__PURE__ */ new Map();
+	for (let [e, t] of i) a(t) && c.set(e, t.tone.sameAs);
+	let l = !0;
+	for (; l && c.size > 0;) {
+		l = !1;
+		for (let [t, n] of c) {
+			let r = s[n]?.color;
+			r !== void 0 && (s[t] = {
+				...e[t],
+				color: r
+			}, c.delete(t), l = !0);
+		}
+	}
+	for (let [t, r] of c) process.env.NODE_ENV !== "production" && console.warn(`[ui-react] Chart series "${t}" aliases "${r}", which is not a palette-assigned series in this config. Falling back to neutral.`), s[t] = {
+		...e[t],
+		color: n.neutral
+	};
+	return Object.fromEntries(i.map(([e]) => [e, s[e]]));
 }
-const T = b.createContext(null);
-function y() {
-  const e = b.useContext(T);
-  if (!e)
-    throw new Error("useChart must be used within a <ChartContainer />");
-  return e;
+var u = i.createContext(null);
+function d() {
+	let e = i.useContext(u);
+	if (!e) throw Error("useChart must be used within a <ChartContainer />");
+	return e;
 }
-function H({
-  id: e,
-  className: r,
-  children: t,
-  config: n,
-  palette: o = $,
-  ...i
-}) {
-  const a = b.useId(), f = `chart-${e || a.replace(/:/g, "")}`, h = b.useMemo(
-    () => S(n, o),
-    [n, o]
-  );
-  return /* @__PURE__ */ s(T.Provider, { value: { config: h }, children: /* @__PURE__ */ p(
-    "div",
-    {
-      id: e,
-      "data-slot": "chart",
-      "data-chart": f,
-      className: x(
-        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_.recharts-trapezoid[stroke='#fff']]:stroke-transparent",
-        // A `<Brush>` traveller is the one `.recharts-layer` that is a real
-        // control (`role="slider"`, tabbable, arrow-key driven), so the blanket
-        // `outline-hidden` above would leave it with no focus indicator. Restore
-        // one — the `:focus-visible` pseudo-class outranks that rule, so this
-        // wins regardless of the order Tailwind emits them in. An `outline`
-        // rather than the usual `ring`: box-shadow doesn't paint on SVG children.
-        "[&_.recharts-brush-traveller:focus-visible]:[outline:3px_solid_var(--ui-focus-primary)] [&_.recharts-brush-traveller:focus-visible]:[outline-offset:1px]",
-        // recharts anchors its axis tick text with the *direction-relative*
-        // SVG keywords (`text-anchor: start|end`, see `getTickTextAnchor` in
-        // `CartesianAxis`), while placing every mark at a computed physical
-        // coordinate. Inheriting `direction: rtl` therefore flips only the
-        // text: an `end`-anchored Y tick mirrors about its anchor and lands
-        // inside the plot (measured: +24px to +39px), rotated ticks shift
-        // ~+15px, and a `ReferenceLine` label at the right edge overflows the
-        // surface. Pinning the surface keeps the plot's own coordinate system
-        // consistent with the geometry recharts computed for it. The chrome
-        // that *should* mirror — tooltip and legend — is HTML outside
-        // `.recharts-surface`, so it is unaffected.
-        //
-        // `Treemap` is the exception: its cell labels are HTML in a
-        // `<foreignObject>` *inside* the surface, put there precisely so they
-        // mirror with the page (see `treemap.tsx`). That is ordinary flow
-        // layout, not a computed SVG coordinate, so the pin has to stop at the
-        // `<foreignObject>` boundary and hand the page's direction back.
-        "[&_.recharts-surface]:[direction:ltr] rtl:[&_.recharts-surface_foreignObject]:[direction:rtl]",
-        r
-      ),
-      ...i,
-      children: [
-        /* @__PURE__ */ s(O, { id: f, config: h }),
-        /* @__PURE__ */ s(j.ResponsiveContainer, { children: t })
-      ]
-    }
-  ) });
+function f({ id: n, className: r, children: a, config: d, palette: f = t, ...m }) {
+	let h = i.useId(), g = `chart-${n || h.replace(/:/g, "")}`, _ = i.useMemo(() => l(d, f), [d, f]);
+	return /* @__PURE__ */ o(u.Provider, {
+		value: { config: _ },
+		children: /* @__PURE__ */ s("div", {
+			id: n,
+			"data-slot": "chart",
+			"data-chart": g,
+			className: e("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_.recharts-trapezoid[stroke='#fff']]:stroke-transparent", "[&_.recharts-brush-traveller:focus-visible]:[outline:3px_solid_var(--ui-focus-primary)] [&_.recharts-brush-traveller:focus-visible]:[outline-offset:1px]", "[&_.recharts-surface]:[direction:ltr] rtl:[&_.recharts-surface_foreignObject]:[direction:rtl]", r),
+			...m,
+			children: [/* @__PURE__ */ o(p, {
+				id: g,
+				config: _
+			}), /* @__PURE__ */ o(c.ResponsiveContainer, { children: a })]
+		})
+	});
 }
-const O = ({
-  id: e,
-  config: r
-}) => {
-  const t = Object.entries(r);
-  return t.length ? /* @__PURE__ */ s("style", { children: `[data-chart=${e}] {
-${t.map(([n, o]) => `  --color-${n}: ${o.color};`).join(`
-`)}
-}` }) : null;
-}, K = j.Tooltip;
-function P({
-  item: e,
-  index: r,
-  payload: t,
-  itemConfig: n,
-  indicatorColor: o,
-  hideIndicator: i,
-  formatter: a
-}) {
-  return /* @__PURE__ */ s("div", { className: "flex w-full flex-wrap items-center gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", children: a && (e == null ? void 0 : e.value) !== void 0 && e.name ? a(e.value, e.name, e, r, t) : /* @__PURE__ */ p(L, { children: [
-    n != null && n.icon ? /* @__PURE__ */ s(n.icon, {}) : !i && // A row is always dotted, whatever marker the legend
-    // gives that series.
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: "h-2.5 w-2.5 shrink-0 rounded-full",
-        style: { backgroundColor: o }
-      }
-    ),
-    /* @__PURE__ */ p("div", { className: "flex flex-1 items-center justify-between gap-4 leading-none", children: [
-      /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: (n == null ? void 0 : n.label) || e.name }),
-      e.value != null && /* @__PURE__ */ s("span", { className: "font-medium tabular-nums text-foreground", children: e.value.toLocaleString() })
-    ] })
-  ] }) });
+var p = ({ id: e, config: t }) => {
+	let n = Object.entries(t);
+	return n.length ? /* @__PURE__ */ o("style", { children: `[data-chart=${e}] {\n${n.map(([e, t]) => `  --color-${e}: ${t.color};`).join("\n")}\n}` }) : null;
+}, m = c.Tooltip;
+function h({ item: e, index: t, payload: n, itemConfig: r, indicatorColor: i, hideIndicator: c, formatter: l }) {
+	return /* @__PURE__ */ o("div", {
+		className: "flex w-full flex-wrap items-center gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+		children: l && e?.value !== void 0 && e.name ? l(e.value, e.name, e, t, n) : /* @__PURE__ */ s(a, { children: [r?.icon ? /* @__PURE__ */ o(r.icon, {}) : !c && /* @__PURE__ */ o("div", {
+			className: "h-2.5 w-2.5 shrink-0 rounded-full",
+			style: { backgroundColor: i }
+		}), /* @__PURE__ */ s("div", {
+			className: "flex flex-1 items-center justify-between gap-4 leading-none",
+			children: [/* @__PURE__ */ o("span", {
+				className: "text-muted-foreground",
+				children: r?.label || e.name
+			}), e.value != null && /* @__PURE__ */ o("span", {
+				className: "font-medium tabular-nums text-foreground",
+				children: e.value.toLocaleString()
+			})]
+		})] })
+	});
 }
-function U({
-  active: e,
-  payload: r,
-  label: t,
-  className: n,
-  hideLabel: o = !1,
-  hideIndicator: i = !1,
-  labelFormatter: a,
-  formatter: f,
-  labelClassName: h,
-  color: c,
-  nameKey: l,
-  labelKey: v
-}) {
-  const { config: u } = y(), _ = b.useMemo(() => {
-    if (o || !(r != null && r.length))
-      return null;
-    const [d] = r, k = `${v || (d == null ? void 0 : d.dataKey) || (d == null ? void 0 : d.name) || "value"}`, g = w(u, d, k), N = (() => {
-      var E;
-      const m = !v && typeof t == "string" ? ((E = u[t]) == null ? void 0 : E.label) ?? t : g == null ? void 0 : g.label;
-      return typeof m == "string" || typeof m == "number" ? m : void 0;
-    })();
-    return a ? /* @__PURE__ */ s("div", { className: x("font-medium", h), children: a(N, r) }) : N ? /* @__PURE__ */ s("div", { className: x("font-medium", h), children: N }) : null;
-  }, [
-    t,
-    a,
-    r,
-    o,
-    h,
-    u,
-    v
-  ]);
-  return !e || !(r != null && r.length) ? null : /* @__PURE__ */ p(
-    "div",
-    {
-      className: x(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md",
-        n
-      ),
-      children: [
-        _,
-        /* @__PURE__ */ s("div", { className: "grid gap-1.5", children: r.map((d, k) => {
-          const g = `${l || d.name || d.dataKey || "value"}`;
-          return /* @__PURE__ */ s(
-            P,
-            {
-              item: d,
-              index: k,
-              payload: r,
-              itemConfig: w(u, d, g),
-              indicatorColor: c || d.payload.fill || d.color,
-              hideIndicator: i,
-              formatter: f
-            },
-            g
-          );
-        }) })
-      ]
-    }
-  );
+function g({ active: t, payload: n, label: r, className: a, hideLabel: c = !1, hideIndicator: l = !1, labelFormatter: u, formatter: f, labelClassName: p, color: m, nameKey: g, labelKey: _ }) {
+	let { config: v } = d(), y = i.useMemo(() => {
+		if (c || !n?.length) return null;
+		let [t] = n, i = `${_ || t?.dataKey || t?.name || "value"}`, a = x(v, t, i), s = (() => {
+			let e = !_ && typeof r == "string" ? v[r]?.label ?? r : a?.label;
+			return typeof e == "string" || typeof e == "number" ? e : void 0;
+		})();
+		return u ? /* @__PURE__ */ o("div", {
+			className: e("font-medium", p),
+			children: u(s, n)
+		}) : s ? /* @__PURE__ */ o("div", {
+			className: e("font-medium", p),
+			children: s
+		}) : null;
+	}, [
+		r,
+		u,
+		n,
+		c,
+		p,
+		v,
+		_
+	]);
+	return !t || !n?.length ? null : /* @__PURE__ */ s("div", {
+		className: e("grid min-w-[8rem] items-start gap-1.5 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md", a),
+		children: [y, /* @__PURE__ */ o("div", {
+			className: "grid gap-1.5",
+			children: n.map((e, t) => {
+				let r = `${g || e.name || e.dataKey || "value"}`;
+				return /* @__PURE__ */ o(h, {
+					item: e,
+					index: t,
+					payload: n,
+					itemConfig: x(v, e, r),
+					indicatorColor: m || e.payload.fill || e.color,
+					hideIndicator: l,
+					formatter: f
+				}, r);
+			})
+		})]
+	});
 }
-const V = j.Legend;
-function R({
-  item: e,
-  itemConfig: r,
-  valueKey: t,
-  valueFormatter: n
-}) {
-  var a;
-  const o = t ? (a = e.payload) == null ? void 0 : a[t] : void 0, i = o != null ? n ? n(o) : String(o) : void 0;
-  return /* @__PURE__ */ p("div", { className: "flex w-full items-start gap-2 overflow-hidden", children: [
-    /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-      r != null && r.icon ? /* @__PURE__ */ s(r.icon, {}) : /* @__PURE__ */ s(
-        "div",
-        {
-          className: "h-2.5 w-2.5 shrink-0 rounded-full",
-          style: { backgroundColor: e.color }
-        }
-      ),
-      /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate text-xs text-foreground", children: (r == null ? void 0 : r.label) ?? e.value })
-    ] }),
-    i != null && /* @__PURE__ */ s("span", { className: "shrink-0 text-xs font-semibold text-[var(--ui-text-on-surface-link-idle)]", children: i })
-  ] });
+var _ = c.Legend;
+function v({ item: t, itemConfig: n, valueKey: r, valueFormatter: i, valueClassName: a }) {
+	let c = r ? t.payload?.[r] : void 0, l = c == null ? void 0 : i ? i(c) : String(c);
+	return /* @__PURE__ */ s("div", {
+		className: "flex w-full items-start gap-2 overflow-hidden",
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex min-w-0 flex-1 items-center gap-2",
+			children: [n?.icon ? /* @__PURE__ */ o(n.icon, {}) : /* @__PURE__ */ o("div", {
+				className: "h-2.5 w-2.5 shrink-0 rounded-full",
+				style: { backgroundColor: t.color }
+			}), /* @__PURE__ */ o("span", {
+				className: "min-w-0 flex-1 truncate text-xs text-foreground",
+				children: n?.label ?? t.value
+			})]
+		}), l != null && /* @__PURE__ */ o("span", {
+			className: e("shrink-0 text-xs font-semibold text-[var(--ui-text-on-surface-link-idle)]", a),
+			children: l
+		})]
+	});
 }
-function I({
-  item: e,
-  itemConfig: r,
-  hideIcon: t
-}) {
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      className: x(
-        "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-      ),
-      children: [
-        r != null && r.icon && !t ? /* @__PURE__ */ s(r.icon, {}) : /* @__PURE__ */ s(
-          "div",
-          {
-            className: "h-2.5 w-2.5 shrink-0 rounded-full",
-            style: { backgroundColor: e.color }
-          }
-        ),
-        (r == null ? void 0 : r.label) ?? e.value
-      ]
-    }
-  );
+function y({ item: t, itemConfig: n, hideIcon: r }) {
+	return /* @__PURE__ */ s("div", {
+		className: e("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+		children: [n?.icon && !r ? /* @__PURE__ */ o(n.icon, {}) : /* @__PURE__ */ o("div", {
+			className: "h-2.5 w-2.5 shrink-0 rounded-full",
+			style: { backgroundColor: t.color }
+		}), n?.label ?? t.value]
+	});
 }
-function q({
-  className: e,
-  hideIcon: r = !1,
-  payload: t,
-  verticalAlign: n = "bottom",
-  nameKey: o,
-  config: i,
-  variant: a = "default",
-  valueKey: f,
-  valueFormatter: h
-}) {
-  var v;
-  const c = (v = b.useContext(T)) == null ? void 0 : v.config, l = i ?? c;
-  if (!l)
-    throw new Error(
-      "ChartLegendContent must be used within a <ChartContainer /> or given a `config` prop"
-    );
-  return t != null && t.length ? a === "list" ? /* @__PURE__ */ s("div", { className: x("flex flex-col", e), children: t.map((u) => {
-    const _ = `${o || u.dataKey || "value"}`;
-    return /* @__PURE__ */ s(
-      R,
-      {
-        item: u,
-        itemConfig: w(l, u, _),
-        valueKey: f,
-        valueFormatter: h
-      },
-      u.value
-    );
-  }) }) : /* @__PURE__ */ s(
-    "div",
-    {
-      className: x(
-        // Wraps rather than overflowing: a legend with many entries (a treemap's
-        // one-per-tile, a pie's one-per-slice) is wider than the chart on a narrow
-        // surface, and a row that can't wrap paints past the chart's edge. The
-        // column gap is unchanged, so a legend that already fits on one row keeps
-        // its exact layout.
-        "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
-        n === "top" ? "pb-3" : "pt-3",
-        e
-      ),
-      children: t.map((u) => {
-        const _ = `${o || u.dataKey || "value"}`;
-        return /* @__PURE__ */ s(
-          I,
-          {
-            item: u,
-            itemConfig: w(l, u, _),
-            hideIcon: r
-          },
-          u.value
-        );
-      })
-    }
-  ) : null;
+function b({ className: t, hideIcon: n = !1, payload: r, verticalAlign: a = "bottom", nameKey: s, config: c, variant: l = "default", valueKey: d, valueFormatter: f, valueClassName: p }) {
+	let m = i.useContext(u)?.config, h = c ?? m;
+	if (!h) throw Error("ChartLegendContent must be used within a <ChartContainer /> or given a `config` prop");
+	return r?.length ? l === "list" ? /* @__PURE__ */ o("div", {
+		"data-slot": "chart-legend",
+		className: e("flex flex-col", t),
+		children: r.map((e) => {
+			let t = `${s || e.dataKey || "value"}`;
+			return /* @__PURE__ */ o(v, {
+				item: e,
+				itemConfig: x(h, e, t),
+				valueKey: d,
+				valueFormatter: f,
+				valueClassName: p
+			}, e.value);
+		})
+	}) : /* @__PURE__ */ o("div", {
+		"data-slot": "chart-legend",
+		className: e("flex flex-wrap items-center justify-center gap-x-6 gap-y-2", a === "top" ? "pb-3" : "pt-3", t),
+		children: r.map((e) => {
+			let t = `${s || e.dataKey || "value"}`;
+			return /* @__PURE__ */ o(y, {
+				item: e,
+				itemConfig: x(h, e, t),
+				hideIcon: n
+			}, e.value);
+		})
+	}) : null;
 }
-function w(e, r, t) {
-  if (typeof r != "object" || r === null)
-    return;
-  const n = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
-  let o = t;
-  return t in r && typeof r[t] == "string" ? o = r[t] : n && t in n && typeof n[t] == "string" && (o = n[t]), o in e ? e[o] : e[t];
+function x(e, t, n) {
+	if (typeof t != "object" || !t) return;
+	let r = "payload" in t && typeof t.payload == "object" && t.payload !== null ? t.payload : void 0, i = n;
+	return n in t && typeof t[n] == "string" ? i = t[n] : r && n in r && typeof r[n] == "string" && (i = r[n]), i in e ? e[i] : e[n];
 }
-export {
-  H as ChartContainer,
-  V as ChartLegend,
-  q as ChartLegendContent,
-  O as ChartStyle,
-  K as ChartTooltip,
-  U as ChartTooltipContent,
-  S as resolveChartColors
-};
-//# sourceMappingURL=chart.js.map
+//#endregion
+export { f as ChartContainer, _ as ChartLegend, b as ChartLegendContent, p as ChartStyle, m as ChartTooltip, g as ChartTooltipContent, l as resolveChartColors };
+
+//# sourceMappingURL=chart.js.map