@devgateway/dvz-ui-react 1.1.1 → 1.2.0

package/dist/esm/embeddable/big-number/index.js

@@ -1,129 +1,136 @@
-import { jsx as o, jsxs as T } from "react/jsx-runtime";
-import { useRef as E, useState as O } from "react";
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { useRef as V, useState as T, useEffect as O } from "react";
 import { Container as q } from "semantic-ui-react";
 import H from "../data/DataProvider.js";
 import J from "../data/DataConsumer.js";
 import "@devgateway/wp-react-lib";
 import { connect as $ } from "react-redux";
-const k = (l) => {
+import { useSpring as k, animated as B } from "@react-spring/web";
+const G = (l) => {
   const {
-    editing: a = !1,
+    editing: n = !1,
     unique: c,
-    intl: e,
-    childContent: n,
+    intl: t,
+    childContent: a,
     "data-csv": f = "",
-    "data-dvz-proxy-dataset-id": b,
-    "data-no-data-message": z = "No data matches your selection",
-    "data-view-mode": g = "info",
+    "data-dvz-proxy-dataset-id": g,
+    "data-no-data-message": P = "No data matches your selection",
+    "data-view-mode": y = "info",
     "data-height": m,
     "data-app": d,
-    "data-measures": h = "{}",
-    "data-format": u = "{}",
-    "data-group": i,
-    "data-filters": p = "[]",
-    "data-number-font-size": x = 20,
-    "data-label-font-size": y = 20,
-    "data-number-color": s = "#000000",
-    "data-label-color": F = "#000000",
-    "data-label": j = "",
-    "data-wait-for-filters": N = "false",
-    "data-no-data-text": M = "-"
-  } = l, w = e.locale, P = E(null), R = (t) => a ? t : decodeURIComponent(t), D = (t) => {
+    "data-measures": F = "{}",
+    "data-format": b = "{}",
+    "data-group": s,
+    "data-filters": u = "[]",
+    "data-number-font-size": r = 20,
+    "data-label-font-size": v = 20,
+    "data-number-color": D = "#000000",
+    "data-label-color": S = "#000000",
+    "data-label": C = "",
+    "data-wait-for-filters": z = "false",
+    "data-no-data-text": I = "-"
+  } = l, h = t.locale, x = V(null), p = (e) => n ? e : decodeURIComponent(e), N = (e) => {
     try {
-      return JSON.parse(R(t));
+      return JSON.parse(p(e));
     } catch {
-      console.error("error parsing value:" + t);
+      console.error("error parsing value:" + e);
     }
     return null;
-  }, r = D(u), U = r ? {
-    style: r.style === "compacted" ? "decimal" : r.style,
-    notation: r.style === "compacted" ? "compact" : "standard",
-    currency: r.currency,
-    minimumFractionDigits: parseInt(r.minimumFractionDigits),
-    maximumFractionDigits: parseInt(r.maximumFractionDigits)
+  }, i = N(b), U = i ? {
+    style: i.style === "compacted" ? "decimal" : i.style,
+    notation: i.style === "compacted" ? "compact" : "standard",
+    currency: i.currency,
+    minimumFractionDigits: parseInt(i.minimumFractionDigits),
+    maximumFractionDigits: parseInt(i.maximumFractionDigits)
   } : {
     notation: "standard",
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
-  }, [L, Q] = O(g), A = a ? m - 80 : m - 40, v = {}, S = D(p) || {};
-  S && S.forEach && S.forEach((t) => {
-    t.value != null && t.value.filter((C) => C != null && C.toString().trim() != "").length > 0 && (v[t.param] = t.value);
-  }), b && (v.dvzProxyDatasetId = b);
-  const I = [];
-  return /* @__PURE__ */ o("div", { ref: P, children: /* @__PURE__ */ o(q, { className: "chart container big-number-container", style: { height: m + "px" }, fluid: !0, children: /* @__PURE__ */ o(
+  }, [W, X] = T(y), A = n ? m - 80 : m - 40, j = {}, w = N(u) || {};
+  w && w.forEach && w.forEach((e) => {
+    e.value != null && e.value.filter((M) => M != null && M.toString().trim() != "").length > 0 && (j[e.param] = e.value);
+  }), g && (j.dvzProxyDatasetId = g);
+  const R = [];
+  return /* @__PURE__ */ o("div", { ref: x, children: /* @__PURE__ */ o(q, { className: "chart container big-number-container", style: { height: m + "px" }, fluid: !0, children: /* @__PURE__ */ o(
     H,
     {
       style: { height: `${A}px` },
-      params: v,
+      params: j,
       app: d,
-      group: i,
+      group: s,
       csv: f,
-      editing: a,
-      waitForFilters: N === "true",
-      store: [d, c, ...I],
-      source: I.join("/"),
+      editing: n,
+      waitForFilters: z === "true",
+      store: [d, c, ...R],
+      source: R.join("/"),
       children: /* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(
-        B,
+        K,
         {
-          locale: w,
-          intl: e,
+          locale: h,
+          intl: t,
           app: d,
           format: U,
-          measure: D(h)[0] || null,
-          label: j,
-          numberFontSize: x,
-          numberColor: s,
-          labelFontSize: y,
-          labelColor: F,
-          noDataText: M
+          measure: N(F)[0] || null,
+          label: C,
+          numberFontSize: r,
+          numberColor: D,
+          labelFontSize: v,
+          labelColor: S,
+          noDataText: I
         }
       ) })
     }
   ) }) });
-}, B = (l) => {
+}, K = (l) => {
+  var h, x;
   const {
-    app: a,
+    app: n,
     measure: c,
-    data: e,
-    format: n,
+    data: t,
+    format: a,
     label: f,
-    numberColor: b,
-    numberFontSize: z,
-    labelColor: g,
+    numberColor: g,
+    numberFontSize: P,
+    labelColor: y,
     labelFontSize: m,
-    noDataText: d,
-    intl: h
+    noDataText: d = "-",
+    intl: F
   } = l;
-  let u = c, i = e;
-  if (a == "csv") {
-    const { data: s, meta: { fields: F } } = e;
-    u = F[0], i = e.data[0];
-  }
-  let p = "";
-  if (i) {
-    let s = i[u] ? i[u] : 0;
-    s ? p = h.formatNumber(n.style === "percent" ? s / 100 : s, { ...n }) : p = d;
-  }
-  const x = {
-    color: decodeURIComponent(b),
-    fontSize: z + "px",
-    textAlign: "center"
-  }, y = {
+  let b = c, s = t;
+  n === "csv" && ((h = t == null ? void 0 : t.meta) != null && h.fields) && ((x = t == null ? void 0 : t.data) != null && x.length) && (b = t.meta.fields[0], s = t.data[0]);
+  const u = (s == null ? void 0 : s[b]) ?? null, r = u ? (a == null ? void 0 : a.style) === "percent" ? u / 100 : u : null, [v, D] = T(r);
+  O(() => {
+    r != null && D(r);
+  }, [r]);
+  const { number: S } = k({
+    from: { number: 0 },
+    to: { number: v ?? 0 },
+    // reset: true,
+    config: {
+      mass: 1,
+      tension: 120,
+      friction: 30
+    }
+  }), C = {
     color: decodeURIComponent(g),
+    fontSize: P + "px",
+    textAlign: "center"
+  }, z = {
+    color: decodeURIComponent(y),
     fontSize: m + "px",
     textAlign: "center"
-  };
-  return /* @__PURE__ */ T("div", { children: [
-    /* @__PURE__ */ o("div", { style: x, className: "big-number", children: p }),
-    f && /* @__PURE__ */ o("div", { style: y, className: "big-number-label", children: f })
+  }, I = (p) => F.formatNumber(p, { ...a });
+  return /* @__PURE__ */ E("div", { children: [
+    /* @__PURE__ */ o("div", { style: C, className: "big-number", children: r === null ? d : /* @__PURE__ */ o(B.span, { children: S.to((p) => I(p)) }) }),
+    f && /* @__PURE__ */ o("div", { style: z, className: "big-number-label", children: f })
   ] });
-}, G = (l, a) => {
-  const { "data-app": c, "data-group": e } = a, n = l.getIn(["data", "measures", c, e]);
-  return n ? {
-    injectedMeasures: n
+}, L = (l, n) => {
+  const { "data-app": c, "data-group": t } = n, a = l.getIn(["data", "measures", c, t]);
+  return a ? {
+    injectedMeasures: a
   } : {};
-}, K = {}, et = $(G, K)(k);
+}, Q = {}, nt = $(L, Q)(G);
 export {
-  et as default
+  nt as default
 };