@epam/ai-dial-ui-kit 0.16.0-dev.46 → 0.16.0-dev.47

package/dist/components/New/Analytics/Bar/Bar.js

@@ -0,0 +1,104 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as h } from "../../../../constants/public-class-names.js";
+import { Badge as S } from "../../Badge/Badge.js";
+import { BadgeColor as _, BadgeVariant as R } from "../../../../types/badge.js";
+import { Spinner as T } from "../../../Spinner/Spinner.js";
+import { mergeClasses as r } from "../../../../utils/merge-classes.js";
+import { getAnalyticsBarColor as j, DEFAULT_ANALYTICS_BAR_COLOR_MAP as k, getAnalyticsBarRatio as F } from "../../../Analytics/Bar/utils.js";
+const K = ({
+  value: e,
+  maxValue: c = 1,
+  error: l,
+  isLoading: t,
+  title: i,
+  valueLabel: u,
+  colorMap: w = k,
+  className: m,
+  titleClassName: y,
+  valueClassName: v,
+  inline: o,
+  ariaLabel: g
+}) => {
+  const n = e == null, N = !!(l || t || !n), d = F(n ? 0 : e, c), b = j(d, w), A = u ?? (n ? "—" : e), B = g ?? (typeof i == "string" ? i : void 0), C = l || t, f = l ? /* @__PURE__ */ a(
+    S,
+    {
+      label: "Error",
+      variant: R.Filled,
+      color: _.Red,
+      textClassName: "dial-tiny-semi-text"
+    }
+  ) : t ? /* @__PURE__ */ a(T, { size: 18, fullWidth: !1 }) : /* @__PURE__ */ a(
+    "span",
+    {
+      className: r(
+        "shrink-0 tabular-nums text-end",
+        o ? "dial-small-text min-w-[5ch] text-primary" : "dial-small-semi-text text-primary",
+        v
+      ),
+      children: A
+    }
+  ), x = N ? /* @__PURE__ */ a(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": l || t || typeof e != "number" ? void 0 : e,
+      "aria-valuemin": 0,
+      "aria-valuemax": c,
+      "aria-label": B,
+      className: r(
+        "w-full overflow-hidden rounded-xs",
+        o ? "h-1" : "h-2",
+        l ? "bg-error" : "bg-layer-1"
+      ),
+      children: !C && /* @__PURE__ */ a(
+        "div",
+        {
+          className: "h-full rounded-xs transition-[width] duration-300",
+          style: { width: `${d * 100}%`, backgroundColor: b }
+        }
+      )
+    }
+  ) : null, p = /* @__PURE__ */ a(
+    "span",
+    {
+      className: r("dial-small-text text-primary", y),
+      children: i
+    }
+  );
+  return o ? /* @__PURE__ */ s(
+    "div",
+    {
+      className: r(
+        "flex flex-row items-center gap-2",
+        m,
+        h.analyticsBar
+      ),
+      children: [
+        /* @__PURE__ */ a("div", { className: "w-1/2 min-w-0", children: p }),
+        /* @__PURE__ */ s("div", { className: "flex w-1/2 flex-row items-center gap-2", children: [
+          /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: x }),
+          f
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      className: r(
+        "flex flex-col gap-1",
+        m,
+        h.analyticsBar
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex flex-row items-center justify-between gap-2", children: [
+          p,
+          f
+        ] }),
+        x
+      ]
+    }
+  );
+};
+export {
+  K as AnalyticsBar
+};

package/dist/components/New/Analytics/BarGroup/BarGroup.js

@@ -0,0 +1,143 @@
+import { jsx as e, jsxs as f, Fragment as H } from "react/jsx-runtime";
+import { Fragment as J } from "react";
+import { Accordion as Q } from "../../Accordion/Accordion.js";
+import { AnalyticsBar as b } from "../Bar/Bar.js";
+import { DIAL_KIT_CLASS as R } from "../../../../constants/public-class-names.js";
+import { Spinner as U } from "../../../Spinner/Spinner.js";
+import { Tooltip as x } from "../../Tooltip/Tooltip.js";
+import { mergeClasses as o } from "../../../../utils/merge-classes.js";
+const et = ({
+  title: g,
+  titleTooltip: h,
+  description: G,
+  data: i,
+  compareData: r,
+  compareLabels: m,
+  maxValue: p,
+  colorMap: u,
+  defaultExpanded: I = !0,
+  nonCollapsible: K,
+  isLoading: T,
+  onBarClick: c,
+  inline: a,
+  barTitleClassName: N,
+  barValueClassName: _,
+  barClassName: v,
+  barDescriptions: C,
+  className: z
+}) => {
+  const E = Object.entries(i), P = a ? o("text-secondary", N) : N, j = m ? "dial-tiny-text text-secondary" : void 0, W = h ? /* @__PURE__ */ e(x, { tooltip: h, children: g }) : g, q = r ? [.../* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])] : [], y = "cursor-pointer rounded-xs text-left focus-visible:outline focus-visible:outline-focus", A = "group flex flex-col gap-1.5", B = o(
+    "flex flex-col gap-1.5 pl-2",
+    c && "group-hover:bg-accent-primary-alpha group-focus-visible:bg-accent-primary-alpha",
+    v
+  );
+  return /* @__PURE__ */ e(
+    Q,
+    {
+      title: W,
+      description: G,
+      defaultExpanded: I,
+      nonCollapsible: K,
+      className: o(z, R.analyticsBarGroup),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: o(
+            "flex flex-col",
+            r ? "gap-4" : a ? "gap-2" : "gap-3"
+          ),
+          children: T ? /* @__PURE__ */ e(U, { size: 18, fullWidth: !1, className: "self-center" }) : r ? q.map((t) => {
+            const l = t in i ? i[t] : null, n = t in r ? r[t] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, F = s != null && s !== 0, L = F && s > 0, S = F ? L ? `+${s}` : String(s) : null, O = C?.[t], $ = /* @__PURE__ */ e("span", { className: "dial-small-text text-secondary", children: t }), w = /* @__PURE__ */ f(H, { children: [
+              /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+                O ? /* @__PURE__ */ e(x, { tooltip: O, children: $ }) : $,
+                S != null && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: o(
+                      "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
+                      L ? "bg-success text-success" : "bg-error text-error"
+                    ),
+                    children: S
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ f("div", { className: B, children: [
+                /* @__PURE__ */ e(
+                  b,
+                  {
+                    title: m?.[0],
+                    value: l,
+                    maxValue: p,
+                    colorMap: u,
+                    inline: a,
+                    titleClassName: j,
+                    ariaLabel: t
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  b,
+                  {
+                    title: m?.[1],
+                    value: n,
+                    maxValue: p,
+                    colorMap: u,
+                    inline: a,
+                    titleClassName: j,
+                    ariaLabel: `${t} compare`
+                  }
+                )
+              ] })
+            ] });
+            return c ? /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => c(t, l),
+                className: o(
+                  A,
+                  y
+                ),
+                children: w
+              },
+              t
+            ) : /* @__PURE__ */ e("div", { className: A, children: w }, t);
+          }) : E.map(([t, l]) => {
+            const n = /* @__PURE__ */ e(
+              b,
+              {
+                title: t,
+                value: l,
+                maxValue: p,
+                colorMap: u,
+                inline: a,
+                titleClassName: P,
+                valueClassName: _,
+                className: v
+              }
+            ), d = c ? /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => c(t, l),
+                className: y,
+                children: n
+              }
+            ) : n, s = C?.[t];
+            return s ? /* @__PURE__ */ e(
+              x,
+              {
+                tooltip: s,
+                triggerClassName: "flex flex-col",
+                children: d
+              },
+              t
+            ) : /* @__PURE__ */ e(J, { children: d }, t);
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  et as AnalyticsBarGroup
+};

package/dist/components/New/Analytics/Card/Card.js

@@ -0,0 +1,99 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as g } from "../../../../constants/public-class-names.js";
+import { Badge as u } from "../../Badge/Badge.js";
+import { BadgeColor as b, BadgeVariant as C } from "../../../../types/badge.js";
+import { EllipsisTooltip as m } from "../../EllipsisTooltip/EllipsisTooltip.js";
+import { Spinner as D } from "../../../Spinner/Spinner.js";
+import { AnalyticsCardVariant as c } from "../../../../types/analytics.js";
+import { mergeClasses as x } from "../../../../utils/merge-classes.js";
+const w = {
+  [c.Default]: {
+    container: "bg-layer-3",
+    title: "dial-small-text text-secondary",
+    value: "dial-display2-text text-primary",
+    showDescription: !0
+  },
+  [c.Compact]: {
+    container: "bg-layer-2",
+    title: "dial-tiny-text text-secondary",
+    value: "dial-body-semi-text text-primary",
+    showDescription: !1
+  }
+}, _ = ({
+  title: o,
+  value: p,
+  description: i,
+  variant: f = c.Default,
+  error: r,
+  isLoading: n,
+  className: y,
+  delta: a,
+  deltaPositive: d,
+  deltaUnit: h,
+  compareValues: l
+}) => {
+  const t = w[f], v = d !== void 0 ? d : (a ?? 0) >= 0, N = a === void 0 ? null : `${a >= 0 ? `+${a}` : String(a)}${h ?? ""}`;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: x(
+        "flex flex-col rounded-lg border border-secondary p-4",
+        r || n ? "gap-2" : "gap-1",
+        t.container,
+        y,
+        g.analyticsCard
+      ),
+      children: [
+        a !== void 0 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: t.title, children: o }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: x(
+                "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
+                v ? "bg-success text-success" : "bg-error text-error"
+              ),
+              children: N
+            }
+          )
+        ] }) : /* @__PURE__ */ e("span", { className: t.title, children: o }),
+        r ? /* @__PURE__ */ e(
+          u,
+          {
+            label: "Error",
+            variant: C.Filled,
+            color: b.Red,
+            textClassName: "dial-tiny-semi-text",
+            className: "self-start"
+          }
+        ) : n ? /* @__PURE__ */ e(D, { size: 18, fullWidth: !1, className: "self-start" }) : l ? /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                text: l[0].title,
+                className: "dial-tiny-text text-secondary"
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: t.value, children: l[0].value })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-4 w-px flex-shrink-0 bg-controls-disable-accent" }),
+          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                text: l[1].title,
+                className: "dial-tiny-text text-secondary"
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: t.value, children: l[1].value })
+          ] })
+        ] }) : /* @__PURE__ */ e("span", { className: t.value, children: p }),
+        !r && !n && t.showDescription && i != null && i !== !1 && /* @__PURE__ */ e("span", { className: "dial-tiny-text text-secondary", children: i })
+      ]
+    }
+  );
+};
+export {
+  _ as AnalyticsCard
+};

package/dist/components/New/Analytics/Histogram/Histogram.js

@@ -0,0 +1,212 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as Y } from "../../../Analytics/Bar/utils.js";
+import { DIAL_KIT_CLASS as k } from "../../../../constants/public-class-names.js";
+import { Spinner as P } from "../../../Spinner/Spinner.js";
+import { TooltipPlacement as w } from "../../../../types/tooltip.js";
+import { Tooltip as A } from "../../Tooltip/Tooltip.js";
+import { mergeClasses as H } from "../../../../utils/merge-classes.js";
+import { buildHistogramColumns as T, formatHistogramColumnLabel as L, getHistogramYTicks as O, getHistogramYMax as R } from "../../../Analytics/Histogram/utils.js";
+const u = 128, D = (s, i) => {
+  const l = L(s, i);
+  return s === i ? `scored ${l}` : `scored between ${l}`;
+}, _ = (s, i, l, o, c) => /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+  s && /* @__PURE__ */ t("strong", { children: s }),
+  /* @__PURE__ */ n("span", { children: [
+    i,
+    " out of ",
+    l,
+    " ",
+    o
+  ] }),
+  /* @__PURE__ */ t("span", { children: D(c.from, c.to) })
+] }), q = ({
+  title: s,
+  values: i,
+  colorMap: l = Y,
+  valueTitle: o = "values",
+  showCount: c,
+  isLoading: S,
+  className: I,
+  compareValues: h,
+  valueSetLabel: j,
+  compareValueSetLabel: B
+}) => {
+  const M = T(i, l), y = h ? T(h, l) : void 0, d = i.length, p = h?.length ?? 0, N = Math.max(d, p), b = R(N), m = O(N), v = (e) => e.map((r) => ({
+    ...r,
+    ratio: b > 0 ? r.count / b : 0
+  })), f = v(M), $ = y ? v(y) : void 0, C = (e, r, a, x) => {
+    if (e.count === 0)
+      return /* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-end", "aria-hidden": "true", children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: "min-h-2 w-full rounded-xs",
+          style: { height: `${e.ratio * 100}%` }
+        }
+      ) });
+    const g = x ? {
+      backgroundImage: `repeating-linear-gradient(135deg, ${e.color} 0px, ${e.color} 1px, transparent 1px, transparent 4px)`,
+      borderColor: e.color
+    } : { backgroundColor: e.color };
+    return /* @__PURE__ */ t(
+      A,
+      {
+        placement: w.Bottom,
+        tooltip: r,
+        triggerClassName: "flex h-full flex-1 items-end",
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            role: "img",
+            "aria-label": a,
+            className: "flex min-h-2 w-full items-center justify-center rounded-xs border border-transparent",
+            style: { height: `${e.ratio * 100}%`, ...g },
+            children: c && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: H(
+        "flex flex-col gap-2",
+        I,
+        k.analyticsHistogram
+      ),
+      children: [
+        /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
+        S ? /* @__PURE__ */ t(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            style: { height: u },
+            children: /* @__PURE__ */ t(P, { size: 18, fullWidth: !1 })
+          }
+        ) : /* @__PURE__ */ n("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              "data-histogram-y-axis": !0,
+              "aria-hidden": "true",
+              className: "relative",
+              style: { height: u },
+              children: m.map((e, r) => /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "dial-tiny-text absolute right-0 whitespace-nowrap text-secondary",
+                  style: {
+                    top: `${r / (m.length - 1) * 100}%`,
+                    transform: "translateY(-50%)"
+                  },
+                  children: e
+                },
+                e
+              ))
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "relative min-w-0", children: [
+            m.map((e, r) => /* @__PURE__ */ t(
+              "div",
+              {
+                "data-histogram-grid": !0,
+                className: "pointer-events-none absolute inset-x-0 border-t border-primary",
+                style: { top: `${r / (m.length - 1) * 100}%` }
+              },
+              e
+            )),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "relative flex items-end gap-1",
+                style: { height: u },
+                children: $ ? f.map((e, r) => {
+                  const a = $[r], x = `${e.count} out of ${d} ${o}`, g = `${a.count} out of ${p} ${o}`;
+                  return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
+                    C(
+                      e,
+                      _(
+                        j,
+                        e.count,
+                        d,
+                        o,
+                        e
+                      ),
+                      x,
+                      !0
+                    ),
+                    C(
+                      a,
+                      _(
+                        B,
+                        a.count,
+                        p,
+                        o,
+                        a
+                      ),
+                      g,
+                      !1
+                    )
+                  ] }, r);
+                }) : f.map((e, r) => {
+                  const a = `${e.count} out of ${d} ${o}`;
+                  return e.count === 0 ? /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: "flex h-full flex-1 items-end",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: "min-h-2 w-full rounded-xs",
+                          style: { height: `${e.ratio * 100}%` }
+                        }
+                      )
+                    },
+                    r
+                  ) : /* @__PURE__ */ t(
+                    A,
+                    {
+                      placement: w.Bottom,
+                      tooltip: a,
+                      triggerClassName: "flex h-full flex-1 items-end",
+                      children: /* @__PURE__ */ t(
+                        "div",
+                        {
+                          role: "img",
+                          "aria-label": a,
+                          className: H(
+                            "flex min-h-2 w-full items-center justify-center rounded-xs border",
+                            "border-transparent"
+                          ),
+                          style: {
+                            height: `${e.ratio * 100}%`,
+                            backgroundColor: e.color
+                          },
+                          children: c && e.count > 0 && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+                        }
+                      )
+                    },
+                    r
+                  );
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", {}),
+          /* @__PURE__ */ t("div", { "data-histogram-x-axis": !0, className: "flex gap-1", children: f.map((e, r) => /* @__PURE__ */ t(
+            "span",
+            {
+              className: "dial-caption-text flex-1 text-center text-secondary",
+              children: L(e.from, e.to)
+            },
+            r
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  q as AnalyticsHistogram
+};