@devgateway/dvz-ui-react 1.8.7 → 1.9.0

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

@@ -1,190 +1,60 @@
-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) => {
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import "react";
+import { Popup as z } from "semantic-ui-react";
+import l from "string-template";
+import D from "./BigNumberTrendContainer.js";
+import F from "./useBigNumberTrendData.js";
+const U = (e) => {
   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" })
+    app: m,
+    measure: d,
+    dimension1: s,
+    data: u,
+    format: g,
+    percentChangeFormat: b,
+    label: p,
+    textColor: C,
+    bigNumberFontSize: h,
+    percentFontSize: N,
+    labelFontSize: f,
+    showPercentageChange: x,
+    intl: S,
+    noDataText: v
+  } = e, {
+    percentChange: n,
+    percentChangeFormatted: o,
+    formattedNumber: w,
+    templateContext: a
+  } = F({ data: u, app: m, measure: d, dimension1: s, format: g, percentChangeFormat: b, intl: S, noDataText: v }), y = { color: decodeURIComponent(e.numberColor), fontSize: h + "px" }, r = { color: decodeURIComponent(e.percentColor), fontSize: N + "px" }, T = { color: decodeURIComponent(C), fontSize: f + "px" }, i = e.showTooltip && e.tooltipText ? l(e.tooltipText, a) : void 0;
+  return /* @__PURE__ */ c("div", { className: "trend", children: [
+    /* @__PURE__ */ t("div", { className: "label", style: T, children: l(p, a) }),
+    /* @__PURE__ */ c("div", { className: "number-and-icon", children: [
+      /* @__PURE__ */ t("span", { className: "number", style: y, children: w }),
+      n > 0 && e.iconUp != "" && /* @__PURE__ */ t("img", { src: e.iconUp }),
+      n < 0 && e.iconDown != "" && /* @__PURE__ */ t("img", { src: e.iconDown }),
+      n > 0 && e.iconUp == "" && /* @__PURE__ */ t("div", { className: "icon trend arrow up" }),
+      n < 0 && e.iconDown == "" && /* @__PURE__ */ t("div", { className: "icon trend arrow down" })
     ] }),
-    P && m && (t.showTooltip && T ? /* @__PURE__ */ a(
-      W,
+    x && n && (e.showTooltip && i ? /* @__PURE__ */ t(
+      z,
       {
-        content: T,
+        content: i,
         position: "top center",
-        inverted: t.tooltipStyle === "dark",
+        inverted: e.tooltipStyle === "dark",
         size: "small",
-        trigger: /* @__PURE__ */ a("div", { className: "percentage", style: D, children: f })
+        trigger: /* @__PURE__ */ t("div", { className: "percentage", style: r, children: o })
       }
-    ) : /* @__PURE__ */ a("div", { className: "percentage", style: D, children: f }))
+    ) : /* @__PURE__ */ t("div", { className: "percentage", style: r, children: o }))
   ] });
-}, 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);
+}, q = (e) => /* @__PURE__ */ t(
+  D,
+  {
+    DataFrameComponent: U,
+    containerClassName: "chart container big-number-trend-container",
+    defaultBackgroundColor: "none",
+    ...e
+  }
+);
 export {
-  be as default
+  q as default
 };

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

@@ -1,15 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
-import r from "./Classic.js";
-import s from "./Alternative.js";
+import e from "./Classic.js";
+import m from "./Alternative.js";
 import "react-redux";
-const f = (t) => {
+const d = (t) => {
   const {
-    editing: e = !1,
-    "data-style-option": o = "classic"
+    editing: o = !1,
+    "data-style-option": i = "classic"
   } = t;
-  return o == "classic" ? /* @__PURE__ */ i(r, { ...t }) : /* @__PURE__ */ i(s, { ...t });
+  return i == "classic" ? /* @__PURE__ */ r(e, { ...t }) : /* @__PURE__ */ r(m, { ...t });
 };
 export {
-  f as default
+  d as default
 };

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

@@ -0,0 +1,49 @@
+import { alphaSort as C } from "../utils/common.js";
+const $ = ({ data: s, app: f, measure: b, dimension1: d, format: o, percentChangeFormat: F, intl: c, noDataText: N }) => {
+  let e = [], t, n;
+  if (f === "csv") {
+    const { meta: { fields: l } } = s;
+    t = l[0], n = l[1], e = s.data.map((a) => ({
+      value: a[t],
+      [n]: a[n],
+      [t]: a[t]
+    }));
+  } else if (n = b, t = d, t == null || t === "none") {
+    const l = {};
+    l[n] = s[n], e = [l];
+  } else
+    e = !s.children || s.children.length === 0 ? [] : s.children, e = e.map((l) => ({
+      value: l.value,
+      [n]: l[n],
+      [t]: l.value
+    }));
+  let r = null, u = null, m, i, p;
+  if (e.length > 0 && (e = e.sort((l, a) => C(!1, c.locale, l.value, a.value)), r = e[e.length - 1][n], e.length > 1 && (u = e[e.length - 2][n]), p = c.formatNumber(o.style === "percent" ? r / 100 : r, { ...o }), u)) {
+    m = (r - u) / u;
+    const { prefix: l = "", suffix: a = "", ...V } = F;
+    i = `${l}${c.formatNumber(m, V)}${a}`;
+  }
+  r == null && (p = N);
+  const h = e.length > 0 ? e[e.length - 1] : {}, g = e.length > 0 ? h[t] : null, v = e.length > 1 ? e[e.length - 2][t] : null, y = r != null ? c.formatNumber(o.style === "percent" ? r / 100 : r, { ...o }) : null, _ = u != null ? c.formatNumber(o.style === "percent" ? u / 100 : u, { ...o }) : null, x = {
+    ...h,
+    current_year: g,
+    previous_year: v,
+    current_value: y,
+    previous_value: _,
+    percent_change: i
+  };
+  return {
+    dataItems: e,
+    currentValue: r,
+    previousValue: u,
+    percentChange: m,
+    percentChangeFormatted: i,
+    formattedNumber: p,
+    currentYear: g,
+    previousYear: v,
+    templateContext: x
+  };
+};
+export {
+  $ as default
+};