@devgateway/dvz-ui-react 1.6.20 → 1.7.1

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
+};

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

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

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

@@ -1,150 +1,15 @@
-import { jsx as o, jsxs as A } from "react/jsx-runtime";
-import { useRef as V, useState as q } from "react";
-import { Container as H } from "semantic-ui-react";
-import J from "../data/DataProvider.js";
-import $ from "../data/DataConsumer.js";
-import "@devgateway/wp-react-lib";
-import { connect as k } from "react-redux";
-import { alphaSort as B } from "../utils/common.js";
-import G from "string-template";
-const K = (f) => {
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import r from "./Classic.js";
+import s from "./Alternative.js";
+import "react-redux";
+const f = (t) => {
   const {
-    editing: c = !1,
-    unique: g,
-    intl: u,
-    childContent: h,
-    "data-csv": m = "",
-    "data-dvz-proxy-dataset-id": b,
-    "data-no-data-message": T = "No data matches your selection",
-    "data-view-mode": v = "info",
-    "data-height": F,
-    "data-app": x,
-    "data-measures": C = "{}",
-    "data-format": z = "{}",
-    "data-group": y,
-    "data-filters": N = "[]",
-    "data-text-color": e = "#000000",
-    "data-big-number-font-size": i = 20,
-    "data-label-font-size": a = 20,
-    "data-percent-font-size": d = 20,
-    "data-label": p = "",
-    "data-dimension1": r,
-    "data-show-percentage-change": S = "false",
-    "data-wait-for-filters": D = "false",
-    "data-no-data-text": w = "-"
-  } = f, I = u.locale, j = V(null), s = (n) => c ? n : decodeURIComponent(n), l = (n) => {
-    try {
-      return JSON.parse(s(n));
-    } catch {
-      console.error("error parsing value:" + n);
-    }
-    return null;
-  }, t = l(z), E = t ? {
-    style: t.style === "compacted" ? "decimal" : t.style,
-    notation: t.style === "compacted" ? "compact" : "standard",
-    currency: t.currency,
-    minimumFractionDigits: parseInt(t.minimumFractionDigits),
-    maximumFractionDigits: parseInt(t.maximumFractionDigits)
-  } : {
-    notation: "standard",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }, [X, Y] = q(v), O = c ? F - 80 : F - 40, P = {}, M = l(N) || {};
-  M && M.forEach && M.forEach((n) => {
-    n.value != null && n.value.filter((U) => U != null && U.toString().trim() != "").length > 0 && (P[n.param] = n.value);
-  }), b && (P.dvzProxyDatasetId = b);
-  const R = [];
-  return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height: F + "px" }, fluid: !0, children: /* @__PURE__ */ o(
-    J,
-    {
-      style: { height: `${O}px` },
-      params: P,
-      app: x,
-      group: y,
-      csv: m,
-      editing: c,
-      waitForFilters: D === "true",
-      store: [x, g, ...R],
-      source: R.join("/"),
-      children: /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(
-        L,
-        {
-          editing: c,
-          locale: I,
-          intl: u,
-          app: x,
-          format: E,
-          dimension1: r,
-          measure: l(C)[0] || null,
-          label: p,
-          bigNumberFontSize: i,
-          textColor: e,
-          labelFontSize: a,
-          percentFontSize: d,
-          showPercentageChange: S == "true" || S == !0,
-          noDataText: w
-        }
-      ) })
-    }
-  ) }) });
-}, L = (f) => {
-  const {
-    editing: c,
-    app: g,
-    measure: u,
-    dimension1: h,
-    data: m,
-    format: b,
-    label: T,
-    textColor: v,
-    bigNumberFontSize: F,
-    percentFontSize: x,
-    labelFontSize: C,
-    showPercentageChange: z,
-    intl: y,
-    noDataText: N
-  } = f;
-  let e = [], i, a;
-  if (g == "csv") {
-    const { data: s, meta: { fields: l } } = m;
-    i = l[0], a = l[1], e = m.data.map((t) => ({
-      value: t[i],
-      [a]: t[a],
-      [i]: t[i]
-    }));
-  } else
-    e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i = h, e = e.map((s) => ({
-      value: s.value,
-      [a]: s[a],
-      [i]: s.value
-    }));
-  let d = null, p = null, r, S, D;
-  e.length > 0 && (e = e.sort((s, l) => B(!1, y.locale, s.value, l.value)), d = e[e.length - 1][a], e.length > 1 && (p = e[e.length - 2][a]), D = y.formatNumber(b.style === "percent" ? d / 100 : d, { ...b }), p && (r = (d - p) / p, S = y.formatNumber(r, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }))), d == null && (D = N);
-  const w = {
-    color: decodeURIComponent(v),
-    fontSize: F + "px"
-  }, I = {
-    color: decodeURIComponent(v),
-    fontSize: x + "px"
-  }, j = {
-    color: decodeURIComponent(v),
-    fontSize: C + "px"
-  };
-  return /* @__PURE__ */ A("div", { className: "trend", children: [
-    /* @__PURE__ */ o("div", { className: "label", style: j, children: G(T, e[e.length - 1]) }),
-    /* @__PURE__ */ A("div", { className: "number-and-icon", children: [
-      /* @__PURE__ */ o("span", { className: "number", style: w, children: D }),
-      r && /* @__PURE__ */ o("img", { src: r > 0 ? "/trend-up.svg" : "/trend-down.svg", alt: "Arrow", className: "icon" })
-    ] }),
-    z && r && /* @__PURE__ */ o("div", { className: "percentage", style: I, children: S })
-  ] });
-}, Q = (f, c) => {
-  const { "data-app": g, "data-group": u } = c, h = f.getIn(["data", "measures", g, u]);
-  return h ? {
-    injectedMeasures: h
-  } : {};
-}, W = {}, se = k(Q, W)(K);
+    editing: e = !1,
+    "data-style-option": o = "classic"
+  } = t;
+  return o == "classic" ? /* @__PURE__ */ i(r, { ...t }) : /* @__PURE__ */ i(s, { ...t });
+};
 export {
-  se as default
+  f as default
 };