@devgateway/dvz-ui-react 1.9.4 → 1.9.5

package/dist/esm/embeddable/chart/Tooltip.js

@@ -1,60 +1,92 @@
-import { jsx as i } from "react/jsx-runtime";
-import "react";
-import h from "react-markdown";
-import v from "remark-gfm";
-import x from "rehype-raw";
-import f from "string-template";
-const N = /(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi, F = /(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi, _ = /(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi, u = (o, e, n, a, r, d) => {
-  if (!r || !r.formatNumber)
-    return e;
-  let t, m = e;
-  for (; (t = o.exec(e)) !== null; ) {
-    const l = t[2], c = t[1], g = ((p, y = 2) => r.formatNumber(a ? p / 100 : p, {
-      maximumFractionDigits: y,
+import { jsx as u } from "react/jsx-runtime";
+import { useRef as E, useLayoutEffect as A } from "react";
+import F from "react-markdown";
+import R from "remark-gfm";
+import T from "rehype-raw";
+import w from "string-template";
+const _ = /(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi, x = /(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi, L = /(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi, f = 8, h = (r, t, n, i = 0) => r < f ? f - r : t > n - f ? n - f - t - i : 0, y = (r) => {
+  if (!r || typeof window > "u")
+    return;
+  r.style.transform = "";
+  const t = r.getBoundingClientRect(), { innerWidth: n, innerHeight: i } = window, e = n < 768 ? 12 : 40, s = h(t.left, t.right, n, e), l = h(t.top, t.bottom, i);
+  (s || l) && (r.style.transform = `translate(${Math.round(s)}px, ${Math.round(l)}px)`);
+}, N = 6, M = 60, I = (r = []) => {
+  const t = E(null);
+  return A(() => {
+    const n = t.current;
+    if (!n || typeof window > "u" || !window.requestAnimationFrame) {
+      y(n);
+      return;
+    }
+    let i = null;
+    const e = () => {
+      i != null && window.cancelAnimationFrame(i);
+      let l = null, o = 0;
+      const c = (a) => {
+        y(n), o = n.style.transform === l ? o + 1 : 0, l = n.style.transform, i = o >= N || a >= M ? null : window.requestAnimationFrame(() => c(a + 1));
+      };
+      c(0);
+    };
+    e();
+    const s = typeof ResizeObserver < "u" ? new ResizeObserver(e) : null;
+    return s == null || s.observe(n), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      i != null && window.cancelAnimationFrame(i), s == null || s.disconnect(), window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, r), t;
+}, p = (r, t, n, i, e, s) => {
+  if (!e || !e.formatNumber)
+    return t;
+  let l, o = t;
+  for (; (l = r.exec(t)) !== null; ) {
+    const c = l[2], a = l[1], g = ((d, v = 2) => e.formatNumber(i ? d / 100 : d, {
+      maximumFractionDigits: v,
       ...n,
-      signDisplay: c && c.startsWith("+") ? "never" : "auto"
-    })).apply(void 0, l.split(","));
-    m = m.replaceAll(t[0], g);
+      signDisplay: a && a.startsWith("+") ? "never" : "auto"
+    })).apply(void 0, c.split(","));
+    o = o.replaceAll(l[0], g);
   }
-  return m;
-}, A = (o, e, n, a) => {
-  if (!o || !e)
+  return o;
+}, S = (r, t, n, i) => {
+  if (!r || !t)
     return "";
-  e.field && e[`_${e.field}`] && (e._value = e[`_${e.field}`]), !e.field && e.category && (e.field = e.category);
-  let r = a ? f(o, e) : f(o, e).replace(/(?:\r\n|\r|\n)/g, "<br>");
-  return r = u(N, r, { style: "percent" }, !0, n), r = u(F, r, { style: "decimal" }, !1, n), r = u(
-    _,
-    r,
+  t.field && t[`_${t.field}`] && (t._value = t[`_${t.field}`]), !t.field && t.category && (t.field = t.category);
+  let e = i ? w(r, t) : w(r, t).replace(/(?:\r\n|\r|\n)/g, "<br>");
+  return e = p(_, e, { style: "percent" }, !0, n), e = p(x, e, { style: "decimal" }, !1, n), e = p(
+    L,
+    e,
     { notation: "compact" },
     !1,
     n
-  ), r;
-}, D = ({ tooltip: o, d: e, intl: n, tooltipEnableMarkdown: a }) => {
-  if (!e || !o)
-    return /* @__PURE__ */ i("div", {});
-  const r = e.datum || e.point || e, { color: d, data: t } = r || {}, m = e.value || (e.datum ? e.datum.value : null) || (e.point ? e.point.data.y : null);
-  if (t) {
-    let l;
-    t.variables ? l = typeof t.variables[e.id] == "object" ? t.variables[e.id] : t.variables : l = t;
-    const c = {
-      field: e.point ? e.point.serieId : e.id || "",
-      ...l,
-      value: m
-    };
-    t.measureFieldName && t.variables && (c.populationValue = t.variables[t.measureFieldName + "Population"]);
-    const s = A(o, c, n, a);
-    return s ? a ? /* @__PURE__ */ i("div", { className: "chart tooltip", children: /* @__PURE__ */ i(
-      h,
-      {
-        children: s,
-        remarkPlugins: [v],
-        rehypePlugins: [x]
-      }
-    ) }) : /* @__PURE__ */ i("div", { className: "chart tooltip", children: /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: { __html: s } }) }) : /* @__PURE__ */ i("div", {});
-  } else
-    return /* @__PURE__ */ i("div", {});
+  ), e;
+}, B = ({ tooltip: r, d: t, intl: n, tooltipEnableMarkdown: i }) => {
+  let e = "";
+  if (t && r) {
+    const l = t.datum || t.point || t, { data: o } = l || {};
+    if (o) {
+      const c = t.value || (t.datum ? t.datum.value : null) || (t.point ? t.point.data.y : null);
+      let a;
+      o.variables ? a = typeof o.variables[t.id] == "object" ? o.variables[t.id] : o.variables : a = o;
+      const m = {
+        field: t.point ? t.point.serieId : t.id || "",
+        ...a,
+        value: c
+      };
+      o.measureFieldName && o.variables && (m.populationValue = o.variables[o.measureFieldName + "Population"]), e = S(r, m, n, i);
+    }
+  }
+  const s = I([e, i]);
+  return e ? i ? /* @__PURE__ */ u("div", { ref: s, className: "chart tooltip", children: /* @__PURE__ */ u(
+    F,
+    {
+      children: e,
+      remarkPlugins: [R],
+      rehypePlugins: [T]
+    }
+  ) }) : /* @__PURE__ */ u("div", { ref: s, className: "chart tooltip", children: /* @__PURE__ */ u("div", { dangerouslySetInnerHTML: { __html: e } }) }) : /* @__PURE__ */ u("div", {});
 };
 export {
-  D as default,
-  A as formatContent
+  y as clampTooltipToViewport,
+  B as default,
+  S as formatContent,
+  I as useClampTooltipToViewport
 };

package/dist/esm/embeddable/common/ChartTooltip.js

@@ -1,34 +1,35 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import "react";
-import h from "react-markdown";
-import g from "remark-gfm";
-import y from "rehype-raw";
-import f from "string-template";
-const x = /(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi, F = /(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi, N = /(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi, p = (o, t, a, n, e, r) => {
-  let i, s = t;
-  for (; (i = o.exec(t)) !== null; ) {
-    const c = i[2], l = i[1], v = ((u, d = 2) => e.formatNumber(n ? u / 100 : u, {
-      maximumFractionDigits: d,
+import g from "react-markdown";
+import y from "remark-gfm";
+import x from "rehype-raw";
+import v from "string-template";
+import { useClampTooltipToViewport as F } from "../chart/Tooltip.js";
+const N = /(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi, A = /(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi, C = /(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi, u = (n, t, a, i, e, r) => {
+  let s, o = t;
+  for (; (s = n.exec(t)) !== null; ) {
+    const m = s[2], p = s[1], d = ((f, h = 2) => e.formatNumber(i ? f / 100 : f, {
+      maximumFractionDigits: h,
       ...a,
-      signDisplay: l && l.startsWith("+") ? "never" : "auto"
-    })).apply(void 0, c.split(","));
-    s = s.replaceAll(i[0], v);
+      signDisplay: p && p.startsWith("+") ? "never" : "auto"
+    })).apply(void 0, m.split(","));
+    o = o.replaceAll(s[0], d);
   }
-  return s;
-}, b = (o, t, a, n) => {
-  let e = n ? f(o, t) : f(o, t).replace(/(?:\r\n|\r|\n)/g, "<br>");
-  return e = p(x, e, { style: "percent" }, !0, a), e = p(F, e, { style: "decimal" }, !1, a), e = p(N, e, { notation: "compact" }, !1, a), e;
-}, E = ({ tooltip: o, d: t, intl: a, tooltipEnableMarkdown: n }) => {
-  const { color: e, data: r } = t.datum || t.point || t, i = t.value || (t.datum ? t.datum.value : null) || (t.point ? t.point.data.y : null);
+  return o;
+}, T = (n, t, a, i) => {
+  let e = i ? v(n, t) : v(n, t).replace(/(?:\r\n|\r|\n)/g, "<br>");
+  return e = u(N, e, { style: "percent" }, !0, a), e = u(A, e, { style: "decimal" }, !1, a), e = u(C, e, { notation: "compact" }, !1, a), e;
+}, V = ({ tooltip: n, d: t, intl: a, tooltipEnableMarkdown: i }) => {
+  const { color: e, data: r } = t.datum || t.point || t, s = t.value || (t.datum ? t.datum.value : null) || (t.point ? t.point.data.y : null);
+  let o = "";
   if (r) {
-    const s = r.variables ? r.variables[t.id] || r.variables : r, c = { field: t.point ? t.point.serieId : t.id, ...s, value: i };
-    r.measureFieldName && (c.populationValue = r.variables[r.measureFieldName + "Population"]);
-    const l = b(o, c, a, n);
-    return n ? /* @__PURE__ */ m("div", { className: "chart tooltip", children: /* @__PURE__ */ m(h, { children: l, remarkPlugins: [g], rehypePlugins: [y] }) }) : /* @__PURE__ */ m("div", { className: "chart tooltip", children: /* @__PURE__ */ m("div", { dangerouslySetInnerHTML: { __html: l } }) });
-  } else
-    return /* @__PURE__ */ m("div", {});
+    const p = r.variables ? r.variables[t.id] || r.variables : r, c = { field: t.point ? t.point.serieId : t.id, ...p, value: s };
+    r.measureFieldName && (c.populationValue = r.variables[r.measureFieldName + "Population"]), o = T(n, c, a, i);
+  }
+  const m = F([o, i]);
+  return r ? i ? /* @__PURE__ */ l("div", { ref: m, className: "chart tooltip", children: /* @__PURE__ */ l(g, { children: o, remarkPlugins: [y], rehypePlugins: [x] }) }) : /* @__PURE__ */ l("div", { ref: m, className: "chart tooltip", children: /* @__PURE__ */ l("div", { dangerouslySetInnerHTML: { __html: o } }) }) : /* @__PURE__ */ l("div", {});
 };
 export {
-  E as default,
-  b as formatContent
+  V as default,
+  T as formatContent
 };