@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/confidence-cone/confidence-cone.js

@@ -1,329 +1,219 @@
-import { jsx as r, jsxs as x, Fragment as E } from "react/jsx-runtime";
-import * as m from "react";
-import { ComposedChart as Fe, CartesianGrid as Ke, Text as Re, XAxis as Le, YAxis as Ne, ReferenceArea as Me, ReferenceLine as B, Area as z, Line as H } from "recharts";
-import { cn as Oe } from "../../../lib/utils.js";
-import { resolveAnimation as Xe, resolveRotatedTickAnchor as _e, CHART_LABEL_FONT_SIZE as Se, resolveXAxisTitle as Ee, resolveXAxisHeight as Be, resolveYAxisTitle as ze, resolveAxisDomain as He } from "../chart/chart-format.js";
-import { ChartContainer as je, ChartTooltip as j, ChartTooltipContent as we, ChartLegend as Ie, ChartLegendContent as Pe } from "../chart/chart.js";
-const w = "__cone", A = (t) => `${w}:${t}`;
-function I(t) {
-  return t == null ? void 0 : t.filter(
-    (o) => !(typeof o.dataKey == "string" && o.dataKey.startsWith(w))
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { ChartContainer as t, ChartLegend as n, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a } from "../chart/chart.js";
+import { resolveAnimation as o, resolveAxisDomain as ee, resolveRotatedTickAnchor as te, resolveXAxisHeight as ne, resolveXAxisTitle as s, resolveYAxisTitle as c } from "../chart/chart-format.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Area as p, CartesianGrid as re, ComposedChart as ie, Line as m, ReferenceArea as ae, ReferenceLine as h, Text as g, XAxis as oe, YAxis as se } from "recharts";
+//#region src/components/ui/confidence-cone/confidence-cone.tsx
+var _ = "__cone", v = (e) => `${_}:${e}`;
+function y(e) {
+	return e?.filter((e) => !(typeof e.dataKey == "string" && e.dataKey.startsWith(_)));
 }
-function We(t, o) {
-  return t == null ? void 0 : t.filter(
-    (n) => typeof n.dataKey == "string" && o.includes(n.dataKey)
-  );
+function b(e, t) {
+	return e?.filter((e) => typeof e.dataKey == "string" && t.includes(e.dataKey));
 }
-function Ye(t) {
-  return function(n) {
-    const l = {
-      ...n,
-      payload: I(n.payload)
-    };
-    return typeof t == "function" ? m.createElement(
-      t,
-      l
-    ) : m.cloneElement(t, l);
-  };
+function x(e) {
+	return function(t) {
+		let n = {
+			...t,
+			payload: y(t.payload)
+		};
+		return typeof e == "function" ? l.createElement(e, n) : l.cloneElement(e, n);
+	};
 }
-function Ge(t, o, n) {
-  return t.filter((l) => o.some(({ forecastKey: c }) => typeof l[c] == "number")).map((l) => l[n]);
+function S(e, t, n) {
+	return e.filter((e) => t.some(({ forecastKey: t }) => typeof e[t] == "number")).map((e) => e[n]);
 }
-function Ze(t, o, n) {
-  return function({
-    payload: c,
-    index: v,
-    ...y
-  }) {
-    const f = c == null ? void 0 : c.value;
-    return /* @__PURE__ */ r(
-      Re,
-      {
-        ...y,
-        style: f != null && t.has(f) ? { fontStyle: "italic", fill: o } : void 0,
-        children: n && f != null ? n(f, v) : f
-      }
-    );
-  };
+function C(e, t, n) {
+	return function({ payload: r, index: i, ...a }) {
+		let o = r?.value;
+		return /* @__PURE__ */ d(g, {
+			...a,
+			style: o != null && e.has(o) ? {
+				fontStyle: "italic",
+				fill: t
+			} : void 0,
+			children: n && o != null ? n(o, i) : o
+		});
+	};
 }
-const qe = m.forwardRef(
-  ({
-    className: t,
-    config: o,
-    data: n,
-    xKey: l,
-    series: c,
-    actualKey: v,
-    forecastKey: y,
-    lowerKey: f,
-    upperKey: C,
-    xAxisLabel: $,
-    yAxisLabel: D,
-    yUnit: P,
-    actualType: F = "area",
-    strokeWidth: K = 2,
-    showDots: p = !1,
-    styleForecastTicks: W = !1,
-    referenceLine: h,
-    showForecastRegion: Y = !0,
-    showGrid: G = !0,
-    showTooltip: Z = !0,
-    showLegend: q = !0,
-    showXAxis: J = !0,
-    showYAxis: Q = !0,
-    xTickFormatter: R,
-    yTickFormatter: U,
-    xAxisAngle: g,
-    xAxisInterval: V,
-    yAxisTickCount: ee,
-    yAxisDomain: te,
-    gridDashed: re,
-    gridHorizontal: oe,
-    gridVertical: ne,
-    tooltipContent: T,
-    animate: ae,
-    animationDuration: le,
-    animationBegin: ce,
-    animationEasing: ie,
-    ...se
-  }, ue) => {
-    var O, X;
-    const s = m.useMemo(() => c != null && c.length ? c : !v || !y ? [] : [{ actualKey: v, forecastKey: y, lowerKey: f, upperKey: C }], [c, v, y, f, C]), b = Xe({
-      animate: ae,
-      animationDuration: le,
-      animationBegin: ce,
-      animationEasing: ie
-    }), L = m.useMemo(
-      () => T ? Ye(T) : void 0,
-      [T]
-    ), fe = Ee($), de = ze(D), me = He(te), ve = m.useMemo(() => {
-      let e;
-      for (const { actualKey: a, forecastKey: i } of s) {
-        const u = o[a], d = o[i];
-        !u || !d || (e ?? (e = { ...o }), e[i] = {
-          label: d.label,
-          icon: d.icon,
-          ...u.theme ? { theme: u.theme } : { color: u.color }
-        });
-      }
-      return e ?? o;
-    }, [o, s]), ye = Be($, g), pe = n.map((e) => {
-      const a = { ...e };
-      for (const { actualKey: i, lowerKey: u, upperKey: d } of s) {
-        if (!u || !d) continue;
-        const _ = e[u], S = e[d];
-        a[A(i)] = typeof _ == "number" && typeof S == "number" ? [_, S] : void 0;
-      }
-      return a;
-    }), N = Ge(n, s, l), k = Y ? N[0] : void 0, M = (O = n[n.length - 1]) == null ? void 0 : O[l], he = Ze(
-      new Set(N),
-      `var(--color-${(X = s[0]) == null ? void 0 : X.actualKey})`,
-      R
-    ), ke = h ? Array.isArray(h) ? h : [h] : [], ge = () => /* @__PURE__ */ x(E, { children: [
-      /* @__PURE__ */ r(
-        Le,
-        {
-          dataKey: l,
-          type: "category",
-          hide: !J,
-          tickLine: !1,
-          axisLine: !1,
-          tickMargin: 8,
-          tickFormatter: R,
-          tick: W ? he : void 0,
-          angle: g,
-          interval: V,
-          textAnchor: _e(g),
-          height: ye,
-          label: fe
-        }
-      ),
-      /* @__PURE__ */ r(
-        Ne,
-        {
-          type: "number",
-          hide: !Q,
-          tickLine: !1,
-          axisLine: !1,
-          unit: P,
-          tickFormatter: U,
-          tickCount: ee,
-          domain: me,
-          width: D ? 72 : void 0,
-          label: de
-        }
-      )
-    ] }), Te = () => /* @__PURE__ */ x(E, { children: [
-      k != null && M != null && /* @__PURE__ */ r(
-        Me,
-        {
-          x1: k,
-          x2: M,
-          fill: "var(--ui-background-surface-secondary)",
-          fillOpacity: 0.5,
-          ifOverflow: "extendDomain"
-        }
-      ),
-      k != null && /* @__PURE__ */ r(
-        B,
-        {
-          x: k,
-          stroke: "var(--ui-border-on-surface-border)",
-          strokeDasharray: "4 4"
-        }
-      )
-    ] }), be = (e, a) => /* @__PURE__ */ r(
-      B,
-      {
-        y: e.value,
-        stroke: "var(--ui-text-on-surface-secondary)",
-        strokeDasharray: "4 4",
-        ifOverflow: "extendDomain",
-        label: e.label ? {
-          value: e.label,
-          position: "insideTopRight",
-          fill: "var(--ui-text-on-surface-secondary)",
-          fontSize: Se
-        } : void 0
-      },
-      `${e.label ?? "threshold"}-${a}`
-    ), xe = () => L ? (
-      // Strips the synthetic band before the caller's tooltip sees it — the
-      // `__cone` series feeds the Area, not the tooltip.
-      /* @__PURE__ */ r(j, { content: L })
-    ) : /* @__PURE__ */ r(
-      j,
-      {
-        content: (e) => /* @__PURE__ */ r(
-          we,
-          {
-            active: e.active,
-            label: e.label,
-            payload: I(e.payload)
-          }
-        )
-      }
-    ), Ae = () => /* @__PURE__ */ r(
-      Ie,
-      {
-        content: (e) => /* @__PURE__ */ r(
-          Pe,
-          {
-            verticalAlign: e.verticalAlign,
-            payload: We(
-              e.payload,
-              s.map((a) => a.actualKey)
-            )
-          }
-        )
-      }
-    ), Ce = ({
-      actualKey: e,
-      lowerKey: a,
-      upperKey: i
-    }) => a && i ? /* @__PURE__ */ r(
-      z,
-      {
-        "data-slot": "confidence-cone-band",
-        dataKey: A(e),
-        type: "monotone",
-        stroke: "none",
-        fill: `var(--color-${e})`,
-        fillOpacity: 0.15,
-        connectNulls: !1,
-        dot: !1,
-        activeDot: !1,
-        ...b,
-        legendType: "none",
-        tooltipType: "none"
-      },
-      A(e)
-    ) : null, $e = ({ actualKey: e }) => {
-      const a = F === "line" ? H : z, i = F === "line" ? void 0 : { fill: `var(--color-${e})`, fillOpacity: 0.15 }, u = p ? {
-        r: 3,
-        fill: `var(--color-${e})`,
-        fillOpacity: 1,
-        stroke: `var(--color-${e})`,
-        strokeWidth: 2
-      } : !1;
-      return /* @__PURE__ */ r(
-        a,
-        {
-          dataKey: e,
-          type: "monotone",
-          stroke: `var(--color-${e})`,
-          strokeWidth: K,
-          ...i,
-          dot: u,
-          activeDot: p ? { r: 5 } : !1,
-          connectNulls: !0,
-          ...b,
-          legendType: "rect"
-        },
-        e
-      );
-    }, De = ({
-      actualKey: e,
-      forecastKey: a
-    }) => {
-      const i = p ? {
-        r: 3,
-        fill: "var(--ui-background-surface-primary)",
-        stroke: `var(--color-${e})`,
-        strokeWidth: 2,
-        strokeDasharray: "none"
-      } : !1;
-      return /* @__PURE__ */ r(
-        H,
-        {
-          dataKey: a,
-          type: "monotone",
-          stroke: `var(--color-${e})`,
-          strokeWidth: K,
-          strokeDasharray: "5 5",
-          dot: i,
-          activeDot: p ? { r: 5 } : !1,
-          connectNulls: !0,
-          ...b
-        },
-        a
-      );
-    };
-    return /* @__PURE__ */ r("div", { ref: ue, className: Oe(t), ...se, children: /* @__PURE__ */ r(
-      je,
-      {
-        config: ve,
-        className: "size-full [&_.recharts-label]:fill-foreground",
-        children: /* @__PURE__ */ x(Fe, { data: pe, children: [
-          G && /* @__PURE__ */ r(
-            Ke,
-            {
-              horizontal: oe ?? !0,
-              vertical: ne ?? !1,
-              strokeDasharray: re ? "3 3" : void 0
-            }
-          ),
-          ge(),
-          Te(),
-          ke.map(be),
-          Z && xe(),
-          q && Ae(),
-          s.map(Ce),
-          s.map($e),
-          s.map(De)
-        ] })
-      }
-    ) });
-  }
-);
-qe.displayName = "ConfidenceCone";
-export {
-  qe as ConfidenceCone,
-  Ye as createConeTooltip,
-  Ze as createForecastTick,
-  I as dropConeBand,
-  Ge as forecastPeriodX,
-  We as keepMetricSeries
-};
-//# sourceMappingURL=confidence-cone.js.map
+var w = l.forwardRef(({ className: g, config: _, palette: w, data: T, xKey: E, series: D, actualKey: O, forecastKey: k, lowerKey: A, upperKey: j, xAxisLabel: M, yAxisLabel: N, yUnit: ce, actualType: P = "area", strokeWidth: F = 2, showDots: I = !1, styleForecastTicks: le = !1, referenceLine: L, showForecastRegion: R = !0, showGrid: z = !0, showTooltip: B = !0, showLegend: V = !0, showXAxis: H = !0, showYAxis: U = !0, xTickFormatter: W, yTickFormatter: ue, xAxisAngle: G, xAxisInterval: de, yAxisTickCount: fe, yAxisDomain: pe, gridDashed: me, gridHorizontal: he, gridVertical: ge, tooltipContent: K, animate: _e, animationDuration: ve, animationBegin: ye, animationEasing: be, ...xe }, Se) => {
+	let q = l.useMemo(() => D?.length ? D : !O || !k ? [] : [{
+		actualKey: O,
+		forecastKey: k,
+		lowerKey: A,
+		upperKey: j
+	}], [
+		D,
+		O,
+		k,
+		A,
+		j
+	]), J = o({
+		animate: _e,
+		animationDuration: ve,
+		animationBegin: ye,
+		animationEasing: be
+	}), Y = l.useMemo(() => K ? x(K) : void 0, [K]), Ce = s(M), we = c(N), Te = ee(pe), Ee = l.useMemo(() => {
+		let e;
+		for (let { actualKey: t, forecastKey: n } of q) {
+			let r = _[t], i = _[n];
+			!r || !i || (e ??= { ..._ }, e[n] = {
+				label: i.label,
+				icon: i.icon,
+				tone: { sameAs: t }
+			});
+		}
+		return e ?? _;
+	}, [_, q]), De = ne(M, G), Oe = T.map((e) => {
+		let t = { ...e };
+		for (let { actualKey: n, lowerKey: r, upperKey: i } of q) {
+			if (!r || !i) continue;
+			let a = e[r], o = e[i];
+			t[v(n)] = typeof a == "number" && typeof o == "number" ? [a, o] : void 0;
+		}
+		return t;
+	}), X = S(T, q, E), Z = R ? X[0] : void 0, Q = T[T.length - 1]?.[E], ke = C(new Set(X), `var(--color-${q[0]?.actualKey})`, W), Ae = L ? Array.isArray(L) ? L : [L] : [], $ = () => /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(oe, {
+		dataKey: E,
+		type: "category",
+		hide: !H,
+		tickLine: !1,
+		axisLine: !1,
+		tickMargin: 8,
+		tickFormatter: W,
+		tick: le ? ke : void 0,
+		angle: G,
+		interval: de,
+		textAnchor: te(G),
+		height: De,
+		label: Ce
+	}), /* @__PURE__ */ d(se, {
+		type: "number",
+		hide: !U,
+		tickLine: !1,
+		axisLine: !1,
+		unit: ce,
+		tickFormatter: ue,
+		tickCount: fe,
+		domain: Te,
+		width: N ? 72 : void 0,
+		label: we
+	})] }), je = () => /* @__PURE__ */ f(u, { children: [Z != null && Q != null && /* @__PURE__ */ d(ae, {
+		x1: Z,
+		x2: Q,
+		fill: "var(--ui-background-surface-secondary)",
+		fillOpacity: .5,
+		ifOverflow: "extendDomain"
+	}), Z != null && /* @__PURE__ */ d(h, {
+		x: Z,
+		stroke: "var(--ui-border-on-surface-border)",
+		strokeDasharray: "4 4"
+	})] }), Me = (e, t) => /* @__PURE__ */ d(h, {
+		y: e.value,
+		stroke: "var(--ui-text-on-surface-secondary)",
+		strokeDasharray: "4 4",
+		ifOverflow: "extendDomain",
+		label: e.label ? {
+			value: e.label,
+			position: "insideTopRight",
+			fill: "var(--ui-text-on-surface-secondary)",
+			fontSize: 12
+		} : void 0
+	}, `${e.label ?? "threshold"}-${t}`), Ne = () => Y ? /* @__PURE__ */ d(i, { content: Y }) : /* @__PURE__ */ d(i, { content: (e) => /* @__PURE__ */ d(a, {
+		active: e.active,
+		label: e.label,
+		payload: y(e.payload)
+	}) }), Pe = () => /* @__PURE__ */ d(n, { content: (e) => /* @__PURE__ */ d(r, {
+		verticalAlign: e.verticalAlign,
+		payload: b(e.payload, q.map((e) => e.actualKey))
+	}) }), Fe = ({ actualKey: e, lowerKey: t, upperKey: n }) => t && n ? /* @__PURE__ */ d(p, {
+		"data-slot": "confidence-cone-band",
+		dataKey: v(e),
+		type: "monotone",
+		stroke: "none",
+		fill: `var(--color-${e})`,
+		fillOpacity: .15,
+		connectNulls: !1,
+		dot: !1,
+		activeDot: !1,
+		...J,
+		legendType: "none",
+		tooltipType: "none"
+	}, v(e)) : null, Ie = ({ actualKey: e }) => {
+		let t = P === "line" ? m : p, n = P === "line" ? void 0 : {
+			fill: `var(--color-${e})`,
+			fillOpacity: .15
+		}, r = I ? {
+			r: 3,
+			fill: `var(--color-${e})`,
+			fillOpacity: 1,
+			stroke: `var(--color-${e})`,
+			strokeWidth: 2
+		} : !1;
+		return /* @__PURE__ */ d(t, {
+			dataKey: e,
+			type: "monotone",
+			stroke: `var(--color-${e})`,
+			strokeWidth: F,
+			...n,
+			dot: r,
+			activeDot: I ? { r: 5 } : !1,
+			connectNulls: !0,
+			...J,
+			legendType: "rect"
+		}, e);
+	}, Le = ({ actualKey: e, forecastKey: t }) => {
+		let n = I ? {
+			r: 3,
+			fill: "var(--ui-background-surface-primary)",
+			stroke: `var(--color-${e})`,
+			strokeWidth: 2,
+			strokeDasharray: "none"
+		} : !1;
+		return /* @__PURE__ */ d(m, {
+			dataKey: t,
+			type: "monotone",
+			stroke: `var(--color-${e})`,
+			strokeWidth: F,
+			strokeDasharray: "5 5",
+			dot: n,
+			activeDot: I ? { r: 5 } : !1,
+			connectNulls: !0,
+			...J
+		}, t);
+	};
+	return /* @__PURE__ */ d("div", {
+		ref: Se,
+		className: e(g),
+		...xe,
+		children: /* @__PURE__ */ d(t, {
+			config: Ee,
+			palette: w,
+			className: "size-full [&_.recharts-label]:fill-foreground",
+			children: /* @__PURE__ */ f(ie, {
+				data: Oe,
+				children: [
+					z && /* @__PURE__ */ d(re, {
+						horizontal: he ?? !0,
+						vertical: ge ?? !1,
+						strokeDasharray: me ? "3 3" : void 0
+					}),
+					$(),
+					je(),
+					Ae.map(Me),
+					B && Ne(),
+					V && Pe(),
+					q.map(Fe),
+					q.map(Ie),
+					q.map(Le)
+				]
+			})
+		})
+	});
+});
+w.displayName = "ConfidenceCone";
+//#endregion
+export { w as ConfidenceCone, x as createConeTooltip, C as createForecastTick, y as dropConeBand, S as forecastPeriodX, b as keepMetricSeries };
+
+//# sourceMappingURL=confidence-cone.js.map