@acronis-platform/ui-react 0.58.0 → 0.61.0

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

@@ -1,107 +1,432 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import * as K from "react";
-import { ComposedChart as L, CartesianGrid as T, XAxis as N, YAxis as j, Bar as w, Area as B, Line as $ } from "recharts";
-import { cn as z } from "../../../lib/utils.js";
-import { ChartContainer as G, ChartTooltip as M, ChartTooltipContent as W, ChartLegend as X, ChartLegendContent as Y } from "../chart/chart.js";
-const _ = K.forwardRef(
+import { jsx as o, jsxs as T, Fragment as pe } from "react/jsx-runtime";
+import * as kt from "react";
+import { cva as gt } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ComposedChart as At, CartesianGrid as Ct, Brush as bt, XAxis as B, YAxis as z, LabelList as Rt, Bar as Lt, Area as Dt, Line as It, ReferenceArea as xt, ReferenceLine as Et } from "recharts";
+import { cn as _t } from "../../../lib/utils.js";
+import { resolveAnimation as St, resolveCategoryRange as he, resolveChartReferenceValue as Nt, CHART_LABEL_MARGIN as Tt, resolveBrushProps as Bt, resolveRotatedTickAnchor as ve, resolveCartesianLabelPosition as zt, CHART_LABEL_FONT_SIZE as Ot, resolveLabelFillClass as wt, toLabelFormatter as Ft, resolveReferenceLineProps as Vt, resolveXAxisTitle as ue, resolveXAxisHeight as $t, resolveAxisDomain as me, resolveYAxisTitle as ke } from "../chart/chart-format.js";
+import { ChartLegendContent as ge, ChartContainer as Mt, ChartTooltip as Ht, ChartTooltipContent as Wt, ChartLegend as Kt } from "../chart/chart.js";
+const Xt = gt("", {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), Pt = 100, Gt = 50, O = "secondary", Zt = { top: 5, right: 5, bottom: 5, left: 5 }, jt = 0.85, Ut = { top: 16 }, qt = kt.forwardRef(
   ({
-    className: l,
-    config: s,
-    data: d,
-    series: f,
-    xKey: m,
-    xAxisLabel: o,
-    yAxisLabel: r,
-    yUnit: c,
-    curve: n = "monotone",
-    barRadius: a = 4,
-    fillOpacity: p = 0.3,
-    showGrid: y = !0,
-    showTooltip: h = !0,
-    showLegend: C = !0,
-    tooltipContent: k,
-    ...v
-  }, u) => {
-    const A = o ? { value: o, position: "insideBottom", offset: 0 } : void 0, g = r ? {
-      value: r,
-      angle: -90,
-      position: "insideLeft",
-      style: { textAnchor: "middle" }
-    } : void 0;
-    return /* @__PURE__ */ e("div", { ref: u, className: z(l), ...v, children: /* @__PURE__ */ e(
-      G,
+    className: Ae,
+    config: Ce,
+    data: y,
+    series: c,
+    xKey: d,
+    referenceLine: h,
+    referenceArea: v,
+    orientation: g = "vertical",
+    xAxisLabel: w,
+    yAxisLabel: A,
+    xUnit: be,
+    yUnit: Re,
+    curve: F = "monotone",
+    barRadius: Le = 4,
+    barSize: De,
+    barGap: Ie,
+    barCategoryGap: xe,
+    showBackground: Ee = !1,
+    backgroundFill: _e = "var(--ui-background-surface-secondary)",
+    showActiveBar: Se = !1,
+    fillOpacity: Ne = 0.3,
+    strokeWidth: V,
+    showDots: Te = !1,
+    showActiveDots: Be,
+    connectNulls: ze = !1,
+    margin: C,
+    showGrid: Oe = !0,
+    showTooltip: we = !0,
+    tooltipCursor: Fe = !0,
+    showLegend: Ve = !0,
+    legendPosition: b = "bottom",
+    showXAxis: $ = !0,
+    showYAxis: M = !0,
+    xTickFormatter: R,
+    yTickFormatter: L,
+    xAxisAngle: f,
+    xAxisInterval: H,
+    yAxisTickCount: W,
+    yAxisDomain: $e,
+    yAxisOrientation: D,
+    showSecondaryYAxis: K = !0,
+    secondaryYAxisLabel: I,
+    secondaryYUnit: X,
+    secondaryYTickFormatter: P,
+    secondaryYAxisTickCount: G,
+    secondaryYAxisDomain: Me,
+    gridDashed: He,
+    gridHorizontal: We,
+    gridVertical: Ke,
+    tooltipContent: Xe,
+    animate: Pe,
+    animationDuration: Ge,
+    animationBegin: Ze,
+    animationEasing: je,
+    showLabels: Z = !1,
+    labelPosition: Ue,
+    labelFormatter: qe,
+    showBrush: Je = !1,
+    brushHeight: Qe,
+    brushAriaLabel: Ye,
+    ...et
+  }, tt) => {
+    const x = St({
+      animate: Pe,
+      animationDuration: Ge,
+      animationBegin: Ze,
+      animationEasing: je
+    }), r = g === "horizontal", j = ue(w), u = c.some((e) => e.yAxis === "secondary"), ot = c.some((e) => e.yAxis !== "secondary"), m = u && !ot, U = D ?? "left", q = U === "left" ? "right" : "left", J = ke(
+      A,
+      r ? "left" : U
+    ), at = ke(
+      I,
+      q
+    ), rt = ue(
+      I,
+      "insideTop"
+    ), Q = me($e), Y = me(Me), E = (e) => {
+      const t = e === "secondary" ? O : void 0;
+      return r ? { xAxisId: t } : { yAxisId: t };
+    }, ee = m ? E("secondary") : {}, te = $t(w, f), it = h ? Array.isArray(h) ? h : [h] : [], nt = (v ? Array.isArray(v) ? v : [v] : []).map((e) => ({ area: e, range: he(e, y, d) })).filter(
+      (e) => e.range !== void 0
+    ), oe = m ? "secondary" : "primary", ae = (e) => e.yAxis ?? "primary", st = new Map(c.map((e) => [e.key, ae(e)])), lt = (e) => c.filter((t) => ae(t) === e).map((t) => t.key), re = new Set(
+      c.filter((e) => e.legendType === "none").map((e) => e.key)
+    ), p = (e) => {
+      var t;
+      return ((t = y[e]) == null ? void 0 : t[d]) ?? void 0;
+    }, ie = it.map((e) => {
+      const t = e.category !== void 0 ? he(
+        { from: e.category, to: e.category },
+        y,
+        d
+      ) : void 0, a = e.yAxis ?? (typeof e.average == "string" ? st.get(e.average) ?? oe : oe), i = Nt(e, y, lt(a)), n = t ? p(t[0]) : void 0;
+      return { line: e, lineAxis: a, position: i !== void 0 ? r ? { x: i } : { y: i } : n !== void 0 ? r ? { y: n } : { x: n } : void 0, isVerticalRule: i !== void 0 === r };
+    }).filter(
+      (e) => e.position !== void 0
+    ), ne = Z ? Tt : void 0, se = ie.some(
+      (e) => e.line.label && e.isVerticalRule
+    ) ? Ut : void 0, ct = C || ne || se ? {
+      ...C ? Zt : {},
+      ...se,
+      ...ne,
+      ...C
+    } : void 0, le = /* @__PURE__ */ new Map();
+    c.forEach((e, t) => {
+      e.stackId && e.type !== "line" && le.set(`${e.type}-${e.stackId}`, t);
+    });
+    const dt = () => /* @__PURE__ */ T(pe, { children: [
+      /* @__PURE__ */ o(
+        B,
+        {
+          type: "number",
+          hide: !$ || m,
+          tickLine: !1,
+          axisLine: !1,
+          unit: be,
+          tickFormatter: R,
+          angle: f,
+          interval: H,
+          textAnchor: ve(f),
+          tickCount: W,
+          domain: Q,
+          height: te,
+          label: j
+        }
+      ),
+      /* @__PURE__ */ o(
+        z,
+        {
+          dataKey: d,
+          type: "category",
+          hide: !M,
+          tickLine: !1,
+          axisLine: !1,
+          tickFormatter: L,
+          width: A ? 96 : 80,
+          label: J
+        }
+      ),
+      u && /* @__PURE__ */ o(
+        B,
+        {
+          xAxisId: O,
+          type: "number",
+          hide: !K,
+          orientation: "top",
+          tickLine: !1,
+          axisLine: !1,
+          unit: X,
+          tickFormatter: P,
+          tickCount: G,
+          domain: Y,
+          label: rt
+        }
+      )
+    ] }), yt = () => /* @__PURE__ */ T(pe, { children: [
+      /* @__PURE__ */ o(
+        B,
+        {
+          dataKey: d,
+          type: "category",
+          hide: !$,
+          tickLine: !1,
+          axisLine: !1,
+          tickMargin: 8,
+          tickFormatter: R,
+          angle: f,
+          interval: H,
+          textAnchor: ve(f),
+          height: te,
+          label: j
+        }
+      ),
+      /* @__PURE__ */ o(
+        z,
+        {
+          type: "number",
+          hide: !M || m,
+          ...D ? { orientation: D } : {},
+          tickLine: !1,
+          axisLine: !1,
+          unit: Re,
+          tickFormatter: L,
+          tickCount: W,
+          domain: Q,
+          width: A ? 72 : void 0,
+          label: J
+        }
+      ),
+      u && /* @__PURE__ */ o(
+        z,
+        {
+          yAxisId: O,
+          type: "number",
+          hide: !K,
+          orientation: q,
+          tickLine: !1,
+          axisLine: !1,
+          unit: X,
+          tickFormatter: P,
+          tickCount: G,
+          domain: Y,
+          width: I ? 72 : void 0,
+          label: at
+        }
+      )
+    ] }), ft = re.size > 0 ? (e) => {
+      var t;
+      return /* @__PURE__ */ o(
+        ge,
+        {
+          verticalAlign: b,
+          payload: (t = e.payload) == null ? void 0 : t.filter(
+            (a) => !re.has(String(a.dataKey))
+          )
+        }
+      );
+    } : /* @__PURE__ */ o(ge, { verticalAlign: b }), pt = (e, t) => {
+      const a = e.color ?? `var(--color-${e.key})`, i = Pt + t, n = E(e.yAxis), s = e.stackId && e.type !== "line" ? `${e.type}-${e.stackId}` : void 0, ce = e.fillOpacity ?? Ne, de = e.connectNulls ?? ze, ye = e.showDots ?? Te, k = e.showActiveDots ?? Be, _ = e.legendType ? { legendType: e.legendType } : {}, fe = zt({
+        labelPosition: Ue,
+        isStacked: s !== void 0,
+        growingEnd: r ? "right" : "top"
+      }), S = Z ? /* @__PURE__ */ o(
+        Rt,
+        {
+          dataKey: e.key,
+          position: fe,
+          formatter: Ft(qe),
+          className: wt(fe, {
+            translucentSeries: e.type === "area"
+          }),
+          fontSize: Ot
+        }
+      ) : null;
+      if (e.type === "bar") {
+        const l = e.barRadius ?? Le, N = s === void 0 || le.get(s) === t, ut = e.showBackground ?? Ee, mt = e.showActiveBar ?? Se;
+        return /* @__PURE__ */ o(
+          Lt,
+          {
+            dataKey: e.key,
+            ...n,
+            fill: a,
+            radius: l > 0 && N ? r ? [0, l, l, 0] : [l, l, 0, 0] : void 0,
+            zIndex: i,
+            ...s ? { stackId: s } : {},
+            ...e.barSize !== void 0 ? { barSize: e.barSize } : {},
+            ...e.fillOpacity !== void 0 ? { fillOpacity: e.fillOpacity } : {},
+            ...e.strokeDasharray !== void 0 ? {
+              stroke: a,
+              strokeDasharray: e.strokeDasharray,
+              ...e.strokeWidth !== void 0 ? { strokeWidth: e.strokeWidth } : {}
+            } : {},
+            ...ut ? { background: { fill: _e } } : {},
+            ...mt ? { activeBar: { fillOpacity: jt } } : {},
+            ..._,
+            ...x,
+            children: S
+          },
+          e.key
+        );
+      }
+      if (e.type === "area") {
+        const l = e.strokeWidth ?? V, N = l !== void 0 ? { strokeWidth: l } : {};
+        return /* @__PURE__ */ o(
+          Dt,
+          {
+            type: e.curve ?? F,
+            dataKey: e.key,
+            ...n,
+            stroke: a,
+            fill: a,
+            fillOpacity: ce,
+            zIndex: i,
+            ...s ? { stackId: s } : {},
+            ...N,
+            ...e.strokeDasharray !== void 0 ? { strokeDasharray: e.strokeDasharray } : {},
+            dot: ye ? { r: 3 } : !1,
+            ...k !== void 0 ? { activeDot: k ? { r: 5 } : !1 } : {},
+            connectNulls: de,
+            ..._,
+            ...x,
+            children: S
+          },
+          e.key
+        );
+      }
+      return /* @__PURE__ */ o(
+        It,
+        {
+          type: e.curve ?? F,
+          dataKey: e.key,
+          ...n,
+          stroke: a,
+          strokeWidth: e.strokeWidth ?? V ?? 2,
+          dot: ye ? { r: 3 } : !1,
+          zIndex: i,
+          ...e.strokeDasharray !== void 0 ? { strokeDasharray: e.strokeDasharray } : {},
+          ...k !== void 0 ? { activeDot: k ? { r: 5 } : !1 } : {},
+          connectNulls: de,
+          ..._,
+          ...x,
+          children: S
+        },
+        e.key
+      );
+    }, ht = ({ area: e, range: t }, a) => {
+      const [i, n] = t;
+      return /* @__PURE__ */ o(
+        xt,
+        {
+          ...ee,
+          ...r ? { y1: p(i), y2: p(n) } : { x1: p(i), x2: p(n) },
+          fill: "var(--ui-background-surface-secondary)",
+          fillOpacity: 0.6,
+          zIndex: Gt,
+          ifOverflow: "extendDomain",
+          label: e.label ? {
+            value: e.label,
+            position: "insideTop",
+            fill: "var(--ui-text-on-surface-secondary)",
+            fontSize: 12
+          } : void 0
+        },
+        `${e.label ?? "area"}-${a}`
+      );
+    }, vt = ({
+      line: e,
+      lineAxis: t,
+      position: a,
+      isVerticalRule: i
+    }, n) => /* @__PURE__ */ o(
+      Et,
       {
-        config: s,
-        className: "size-full [&_.recharts-label]:fill-foreground",
-        children: /* @__PURE__ */ x(L, { data: d, children: [
-          y && /* @__PURE__ */ e(T, { vertical: !1 }),
-          /* @__PURE__ */ e(
-            N,
-            {
-              dataKey: m,
-              type: "category",
-              tickLine: !1,
-              axisLine: !1,
-              tickMargin: 8,
-              height: o ? 48 : void 0,
-              label: A
-            }
-          ),
-          /* @__PURE__ */ e(
-            j,
-            {
-              type: "number",
-              tickLine: !1,
-              axisLine: !1,
-              unit: c,
-              width: r ? 72 : void 0,
-              label: g
-            }
-          ),
-          h && /* @__PURE__ */ e(M, { content: k ?? /* @__PURE__ */ e(W, {}) }),
-          C && /* @__PURE__ */ e(X, { content: /* @__PURE__ */ e(Y, {}) }),
-          f.map((t) => {
-            const i = `var(--color-${t.key})`;
-            return t.type === "bar" ? /* @__PURE__ */ e(
-              w,
-              {
-                dataKey: t.key,
-                fill: i,
-                radius: a > 0 ? [a, a, 0, 0] : void 0,
-                isAnimationActive: !1
-              },
-              t.key
-            ) : t.type === "area" ? /* @__PURE__ */ e(
-              B,
-              {
-                type: n,
-                dataKey: t.key,
-                stroke: i,
-                fill: i,
-                fillOpacity: p,
-                isAnimationActive: !1
-              },
-              t.key
-            ) : /* @__PURE__ */ e(
-              $,
+        ...t === "secondary" && u ? E("secondary") : {},
+        ...a,
+        ...Vt(
+          e.label,
+          e.labelPosition ?? (i ? "top" : "insideTopRight")
+        )
+      },
+      `${e.label ?? "ref"}-${n}`
+    );
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: tt,
+        "data-orientation": g,
+        className: _t(Xt({ orientation: g }), Ae),
+        ...et,
+        children: /* @__PURE__ */ o(
+          Mt,
+          {
+            config: Ce,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ T(
+              At,
               {
-                type: n,
-                dataKey: t.key,
-                stroke: i,
-                strokeWidth: 2,
-                dot: !1,
-                isAnimationActive: !1
-              },
-              t.key
-            );
-          })
-        ] })
+                data: y,
+                layout: r ? "vertical" : "horizontal",
+                barSize: De,
+                barGap: Ie,
+                barCategoryGap: xe,
+                margin: ct,
+                children: [
+                  Oe && /* @__PURE__ */ o(
+                    Ct,
+                    {
+                      ...ee,
+                      horizontal: We ?? !r,
+                      vertical: Ke ?? r,
+                      strokeDasharray: He ? "3 3" : void 0
+                    }
+                  ),
+                  r ? dt() : yt(),
+                  we && /* @__PURE__ */ o(
+                    Ht,
+                    {
+                      ...Fe ? {} : { cursor: !1 },
+                      content: Xe ?? /* @__PURE__ */ o(Wt, {})
+                    }
+                  ),
+                  Ve && /* @__PURE__ */ o(
+                    Kt,
+                    {
+                      verticalAlign: b,
+                      content: ft
+                    }
+                  ),
+                  c.map(pt),
+                  nt.map(ht),
+                  ie.map(vt),
+                  Je && /* @__PURE__ */ o(
+                    bt,
+                    {
+                      dataKey: d,
+                      tickFormatter: r ? L : R,
+                      ...Bt({ brushHeight: Qe, brushAriaLabel: Ye })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       }
-    ) });
+    );
   }
 );
-_.displayName = "ComposedChart";
+qt.displayName = "ComposedChart";
 export {
-  _ as ComposedChart
+  qt as ComposedChart,
+  Xt as composedChartVariants
 };
 //# sourceMappingURL=composed-chart.js.map