@acronis-platform/ui-react 4.0.0 → 4.1.0

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

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