@acronis-platform/ui-react 3.0.0 → 4.0.0

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

@@ -1,180 +1,187 @@
-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) {
+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(w))
+    (o) => !(typeof o.dataKey == "string" && o.dataKey.startsWith(I))
   );
 }
-function We(t, o) {
+function Ye(t, o) {
   return t == null ? void 0 : t.filter(
-    (n) => typeof n.dataKey == "string" && o.includes(n.dataKey)
+    (a) => typeof a.dataKey == "string" && o.includes(a.dataKey)
   );
 }
-function Ye(t) {
-  return function(n) {
+function Ge(t) {
+  return function(a) {
     const l = {
-      ...n,
-      payload: I(n.payload)
+      ...a,
+      payload: P(a.payload)
     };
-    return typeof t == "function" ? m.createElement(
+    return typeof t == "function" ? v.createElement(
       t,
       l
-    ) : m.cloneElement(t, l);
+    ) : v.cloneElement(t, l);
   };
 }
-function Ge(t, o, n) {
-  return t.filter((l) => o.some(({ forecastKey: c }) => typeof l[c] == "number")).map((l) => l[n]);
+function Ze(t, o, a) {
+  return t.filter(
+    (l) => o.some(({ forecastKey: c }) => typeof l[c] == "number")
+  ).map((l) => l[a]);
 }
-function Ze(t, o, n) {
+function qe(t, o, a) {
   return function({
     payload: c,
-    index: v,
+    index: f,
     ...y
   }) {
-    const f = c == null ? void 0 : c.value;
+    const s = c == null ? void 0 : c.value;
     return /* @__PURE__ */ r(
-      Re,
+      Le,
       {
         ...y,
-        style: f != null && t.has(f) ? { fontStyle: "italic", fill: o } : void 0,
-        children: n && f != null ? n(f, v) : f
+        style: s != null && t.has(s) ? { fontStyle: "italic", fill: o } : void 0,
+        children: a && s != null ? a(s, f) : s
       }
     );
   };
 }
-const qe = m.forwardRef(
+const Je = v.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,
+    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: W = !1,
+    styleForecastTicks: Y = !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,
+    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: V,
-    yAxisTickCount: ee,
-    yAxisDomain: te,
-    gridDashed: re,
+    xAxisInterval: ee,
+    yAxisTickCount: te,
+    yAxisDomain: re,
+    gridDashed: ne,
     gridHorizontal: oe,
-    gridVertical: ne,
+    gridVertical: ae,
     tooltipContent: T,
-    animate: ae,
-    animationDuration: le,
+    animate: le,
+    animationDuration: ie,
     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,
+    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: ie
-    }), L = m.useMemo(
-      () => T ? Ye(T) : void 0,
+      animationEasing: se
+    }), N = v.useMemo(
+      () => T ? Ge(T) : void 0,
       [T]
-    ), fe = Ee($), de = ze(D), me = He(te), ve = m.useMemo(() => {
+    ), de = Be(D), me = He(F), ve = je(re), ye = v.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 }
+      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, 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;
+    }, [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 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: [
+      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(
-        Le,
+        Ne,
         {
-          dataKey: l,
+          dataKey: c,
           type: "category",
-          hide: !J,
+          hide: !Q,
           tickLine: !1,
           axisLine: !1,
           tickMargin: 8,
-          tickFormatter: R,
-          tick: W ? he : void 0,
+          tickFormatter: L,
+          tick: Y ? ke : void 0,
           angle: g,
-          interval: V,
-          textAnchor: _e(g),
-          height: ye,
-          label: fe
+          interval: ee,
+          textAnchor: Se(g),
+          height: pe,
+          label: de
         }
       ),
       /* @__PURE__ */ r(
-        Ne,
+        Me,
         {
           type: "number",
-          hide: !Q,
+          hide: !U,
           tickLine: !1,
           axisLine: !1,
-          unit: P,
-          tickFormatter: U,
-          tickCount: ee,
-          domain: me,
-          width: D ? 72 : void 0,
-          label: de
+          unit: W,
+          tickFormatter: V,
+          tickCount: te,
+          domain: ve,
+          width: F ? 72 : void 0,
+          label: me
         }
       )
-    ] }), Te = () => /* @__PURE__ */ x(E, { children: [
-      k != null && M != null && /* @__PURE__ */ r(
-        Me,
+    ] }), be = () => /* @__PURE__ */ A(B, { children: [
+      k != null && O != null && /* @__PURE__ */ r(
+        Oe,
         {
           x1: k,
-          x2: M,
+          x2: O,
           fill: "var(--ui-background-surface-secondary)",
           fillOpacity: 0.5,
           ifOverflow: "extendDomain"
         }
       ),
       k != null && /* @__PURE__ */ r(
-        B,
+        z,
         {
           x: k,
           stroke: "var(--ui-border-on-surface-border)",
           strokeDasharray: "4 4"
         }
       )
-    ] }), be = (e, a) => /* @__PURE__ */ r(
-      B,
+    ] }), Ae = (e, n) => /* @__PURE__ */ r(
+      z,
       {
         y: e.value,
         stroke: "var(--ui-text-on-surface-secondary)",
@@ -184,49 +191,49 @@ const qe = m.forwardRef(
           value: e.label,
           position: "insideTopRight",
           fill: "var(--ui-text-on-surface-secondary)",
-          fontSize: Se
+          fontSize: Ee
         } : void 0
       },
-      `${e.label ?? "threshold"}-${a}`
-    ), xe = () => L ? (
+      `${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(j, { content: L })
+      /* @__PURE__ */ r(w, { content: N })
     ) : /* @__PURE__ */ r(
-      j,
+      w,
       {
         content: (e) => /* @__PURE__ */ r(
-          we,
+          Ie,
           {
             active: e.active,
             label: e.label,
-            payload: I(e.payload)
+            payload: P(e.payload)
           }
         )
       }
-    ), Ae = () => /* @__PURE__ */ r(
-      Ie,
+    ), Ce = () => /* @__PURE__ */ r(
+      Pe,
       {
         content: (e) => /* @__PURE__ */ r(
-          Pe,
+          We,
           {
             verticalAlign: e.verticalAlign,
-            payload: We(
+            payload: Ye(
               e.payload,
-              s.map((a) => a.actualKey)
+              u.map((n) => n.actualKey)
             )
           }
         )
       }
-    ), Ce = ({
+    ), $e = ({
       actualKey: e,
-      lowerKey: a,
+      lowerKey: n,
       upperKey: i
-    }) => a && i ? /* @__PURE__ */ r(
-      z,
+    }) => n && i ? /* @__PURE__ */ r(
+      H,
       {
         "data-slot": "confidence-cone-band",
-        dataKey: A(e),
+        dataKey: x(e),
         type: "monotone",
         stroke: "none",
         fill: `var(--color-${e})`,
@@ -238,9 +245,9 @@ const qe = m.forwardRef(
         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 ? {
+      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,
@@ -248,14 +255,14 @@ const qe = m.forwardRef(
         strokeWidth: 2
       } : !1;
       return /* @__PURE__ */ r(
-        a,
+        n,
         {
           dataKey: e,
           type: "monotone",
           stroke: `var(--color-${e})`,
-          strokeWidth: K,
+          strokeWidth: R,
           ...i,
-          dot: u,
+          dot: d,
           activeDot: p ? { r: 5 } : !1,
           connectNulls: !0,
           ...b,
@@ -263,9 +270,9 @@ const qe = m.forwardRef(
         },
         e
       );
-    }, De = ({
+    }, Fe = ({
       actualKey: e,
-      forecastKey: a
+      forecastKey: n
     }) => {
       const i = p ? {
         r: 3,
@@ -275,55 +282,56 @@ const qe = m.forwardRef(
         strokeDasharray: "none"
       } : !1;
       return /* @__PURE__ */ r(
-        H,
+        j,
         {
-          dataKey: a,
+          dataKey: n,
           type: "monotone",
           stroke: `var(--color-${e})`,
-          strokeWidth: K,
+          strokeWidth: R,
           strokeDasharray: "5 5",
           dot: i,
           activeDot: p ? { r: 5 } : !1,
           connectNulls: !0,
           ...b
         },
-        a
+        n
       );
     };
-    return /* @__PURE__ */ r("div", { ref: ue, className: Oe(t), ...se, children: /* @__PURE__ */ r(
-      je,
+    return /* @__PURE__ */ r("div", { ref: fe, className: Xe(t), ...ue, children: /* @__PURE__ */ r(
+      we,
       {
-        config: ve,
+        config: ye,
+        palette: a,
         className: "size-full [&_.recharts-label]:fill-foreground",
-        children: /* @__PURE__ */ x(Fe, { data: pe, children: [
-          G && /* @__PURE__ */ r(
-            Ke,
+        children: /* @__PURE__ */ A(Ke, { data: he, children: [
+          Z && /* @__PURE__ */ r(
+            Re,
             {
               horizontal: oe ?? !0,
-              vertical: ne ?? !1,
-              strokeDasharray: re ? "3 3" : void 0
+              vertical: ae ?? !1,
+              strokeDasharray: ne ? "3 3" : void 0
             }
           ),
-          ge(),
           Te(),
-          ke.map(be),
-          Z && xe(),
-          q && Ae(),
-          s.map(Ce),
-          s.map($e),
-          s.map(De)
+          be(),
+          ge.map(Ae),
+          q && xe(),
+          J && Ce(),
+          u.map($e),
+          u.map(De),
+          u.map(Fe)
         ] })
       }
     ) });
   }
 );
-qe.displayName = "ConfidenceCone";
+Je.displayName = "ConfidenceCone";
 export {
-  qe as ConfidenceCone,
-  Ye as createConeTooltip,
-  Ze as createForecastTick,
-  I as dropConeBand,
-  Ge as forecastPeriodX,
-  We as keepMetricSeries
+  Je as ConfidenceCone,
+  Ge as createConeTooltip,
+  qe as createForecastTick,
+  P as dropConeBand,
+  Ze as forecastPeriodX,
+  Ye as keepMetricSeries
 };
 //# sourceMappingURL=confidence-cone.js.map