@devgateway/dvz-ui-react 1.6.19 → 1.7.0

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

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

package/dist/esm/embeddable/big-number-trend/Alternative.js

@@ -0,0 +1,227 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { useRef as L, useState as Q } from "react";
+import { Container as W, Grid as g, Popup as X } from "semantic-ui-react";
+import Z from "../data/DataProvider.js";
+import ee from "../data/DataConsumer.js";
+import "@devgateway/wp-react-lib";
+import { connect as te } from "react-redux";
+import { alphaSort as ne } from "../utils/common.js";
+import B from "string-template";
+const oe = (t) => {
+  const {
+    editing: u = !1,
+    unique: C,
+    intl: v,
+    childContent: F,
+    "data-csv": p = "",
+    "data-dvz-proxy-dataset-id": d,
+    "data-no-data-message": q = "No data matches your selection",
+    "data-view-mode": U = "info",
+    "data-height": w,
+    "data-app": b,
+    "data-measures": Y = "{}",
+    "data-format": k = "{}",
+    "data-group": f,
+    "data-filters": M = "[]",
+    "data-text-color": e = "#5a5d68",
+    "data-number-color": o = "#5a5d68",
+    "data-percent-color": a = "#5a5d68",
+    "data-back-ground-color": i = "#5a5d68",
+    "data-big-number-font-size": m = 20,
+    "data-label-font-size": l = 20,
+    "data-percent-font-size": x = 20,
+    "data-label": S = "",
+    "data-dimension1": D,
+    "data-show-percentage-change": N = "false",
+    "data-wait-for-filters": z = "false",
+    "data-no-data-text": I = "-",
+    "data-icon-image": _ = "",
+    "data-icon-up": T = "",
+    "data-icon-down": V = "",
+    "data-show-tooltip": R = "false",
+    "data-tooltip-text": $ = "",
+    "data-tooltip-style": A = "light"
+  } = t, j = v.locale, P = L(null), r = (s) => u ? s : decodeURIComponent(s), h = (s) => {
+    try {
+      return JSON.parse(r(s));
+    } catch {
+      console.error("error parsing value:" + s);
+    }
+    return null;
+  }, c = h(k), J = c ? {
+    style: c.style === "compacted" ? "decimal" : c.style,
+    notation: c.style === "compacted" ? "compact" : "standard",
+    currency: c.currency,
+    minimumFractionDigits: parseInt(c.minimumFractionDigits),
+    maximumFractionDigits: parseInt(c.maximumFractionDigits)
+  } : {
+    notation: "standard",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }, [le, ce] = Q(U), K = u ? w - 80 : w - 40, E = {}, G = h(M) || {};
+  G && G.forEach && G.forEach((s) => {
+    s.value != null && s.value.filter((O) => O != null && O.toString().trim() != "").length > 0 && (E[s.param] = s.value);
+  }), d && (E.dvzProxyDatasetId = d);
+  const H = [];
+  return D != "none" && H.push(D), /* @__PURE__ */ n("div", { ref: P, children: /* @__PURE__ */ n(
+    W,
+    {
+      className: `alternative big number container ${u ? "editing" : ""}`,
+      style: { height: w + "px", backgroundColor: i },
+      fluid: !0,
+      children: /* @__PURE__ */ n(
+        Z,
+        {
+          style: { height: `${K}px` },
+          params: E,
+          app: b,
+          group: f,
+          csv: p,
+          editing: u,
+          waitForFilters: z === "true",
+          store: [b, C, ...H],
+          source: H.join("/"),
+          children: /* @__PURE__ */ n(ee, { children: /* @__PURE__ */ n(
+            ae,
+            {
+              iconImage: _,
+              iconUp: T,
+              iconDown: V,
+              editing: u,
+              locale: j,
+              intl: v,
+              app: b,
+              format: J,
+              dimension1: D,
+              measure: h(Y)[0] || null,
+              label: S,
+              bigNumberFontSize: m,
+              textColor: e,
+              numberColor: o,
+              percentColor: a,
+              backGroundColor: i,
+              labelFontSize: l,
+              percentFontSize: x,
+              showPercentageChange: N == "true" || N == !0,
+              noDataText: I,
+              showTooltip: R == "true" || R === !0,
+              tooltipText: r($),
+              tooltipStyle: A
+            }
+          ) })
+        }
+      )
+    }
+  ) });
+}, ae = (t) => {
+  const {
+    editing: u,
+    app: C,
+    measure: v,
+    dimension1: F,
+    data: p,
+    format: d,
+    label: q,
+    textColor: U,
+    bigNumberFontSize: w,
+    percentFontSize: b,
+    labelFontSize: Y,
+    showPercentageChange: k,
+    intl: f,
+    noDataText: M
+  } = t;
+  let e = [], o, a;
+  if (C == "csv") {
+    const { data: r, meta: { fields: h } } = p;
+    o = h[0], a = h[1], e = p.data.map((c) => ({
+      value: c[o],
+      [a]: c[a],
+      [o]: c[o]
+    }));
+  } else if (a = v, o = F, o == null || o == "none") {
+    let r = {};
+    r[a] = p[a], e = [r];
+  } else
+    e = !p.children || p.children.length == 0 ? [] : p.children, e = e.map((r) => ({
+      value: r.value,
+      [a]: r[a],
+      [o]: r.value
+    }));
+  let i = null, m = null, l, x, S;
+  e.length > 0 && (e = e.sort((r, h) => ne(!1, f.locale, r.value, h.value)), i = e[e.length - 1][a], e.length > 1 && (m = e[e.length - 2][a]), S = f.formatNumber(d.style === "percent" ? i / 100 : i, { ...d }), m && (l = (i - m) / m, x = f.formatNumber(l, {
+    style: "percent",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }))), i == null && (S = M);
+  const D = {
+    color: decodeURIComponent(t.numberColor),
+    fontSize: w + "px"
+  }, N = {
+    color: decodeURIComponent(t.percentColor),
+    fontSize: b + "px"
+  }, z = {
+    color: decodeURIComponent(t.percentColor),
+    fontSize: b + "px",
+    lineHeight: 1.1
+  }, I = {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center"
+  }, _ = {
+    color: decodeURIComponent(U),
+    fontSize: Y + "px"
+  }, T = e.length > 0 ? e[e.length - 1] : {}, V = e.length > 0 ? T[o] : null, R = e.length > 1 ? e[e.length - 2][o] : null, $ = i != null ? f.formatNumber(d.style === "percent" ? i / 100 : i, { ...d }) : null, A = m != null ? f.formatNumber(d.style === "percent" ? m / 100 : m, { ...d }) : null, j = {
+    ...T,
+    current_year: V,
+    previous_year: R,
+    current_value: $,
+    previous_value: A,
+    percent_change: x
+  }, P = t.showTooltip && t.tooltipText ? B(t.tooltipText, j) : void 0;
+  return /* @__PURE__ */ y(g, { padded: !0, children: [
+    /* @__PURE__ */ y(g.Row, { children: [
+      /* @__PURE__ */ n(g.Column, { width: 4, children: t.iconImage && t.iconImage != "" && /* @__PURE__ */ n("img", { className: "icon main", src: t.iconImage }) }),
+      /* @__PURE__ */ y(g.Column, { textAlign: "right", width: 12, children: [
+        /* @__PURE__ */ n("img", { className: `icon up ${l > 0 ? "visible" : "hidden"}`, src: t.iconUp }),
+        /* @__PURE__ */ n("img", { className: `icon up ${l < 0 ? "visible" : "hidden"}`, s: !0, src: t.iconDown }),
+        k && l != null && (t.showTooltip && P ? /* @__PURE__ */ n(
+          X,
+          {
+            content: P,
+            position: "top center",
+            inverted: t.tooltipStyle === "dark",
+            size: "small",
+            trigger: /* @__PURE__ */ y("div", { style: I, children: [
+              /* @__PURE__ */ y("div", { className: "percentage", style: N, children: [
+                " ",
+                l > 0 ? "+" : "",
+                l == 0 ? "=" : "",
+                x
+              ] }),
+              /* @__PURE__ */ n("div", { className: "percentage-yoy", style: z, children: "YoY" })
+            ] })
+          }
+        ) : /* @__PURE__ */ y("div", { style: I, children: [
+          /* @__PURE__ */ y("div", { className: "percentage", style: N, children: [
+            " ",
+            l > 0 ? "+" : "",
+            l == 0 ? "=" : "",
+            x
+          ] }),
+          /* @__PURE__ */ n("div", { className: "percentage-yoy", style: z, children: "YoY" })
+        ] }))
+      ] })
+    ] }),
+    /* @__PURE__ */ n(g.Row, { children: /* @__PURE__ */ n(g.Column, { width: 16, children: /* @__PURE__ */ n("span", { className: "number", style: D, children: S }) }) }),
+    /* @__PURE__ */ n(g.Row, { children: /* @__PURE__ */ n(g.Column, { children: /* @__PURE__ */ n("div", { className: "label", style: _, children: B(q, j) }) }) })
+  ] });
+}, re = (t, u) => {
+  const { "data-app": C, "data-group": v } = u, F = t.getIn(["data", "measures", C, v]);
+  return F ? {
+    injectedMeasures: F
+  } : {};
+}, ie = {}, ve = te(re, ie)(oe);
+export {
+  ve as default
+};