@devgateway/dvz-ui-react 1.8.8 → 1.9.0

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

@@ -1,227 +1,78 @@
-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) => {
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { Grid as n, Popup as R } from "semantic-ui-react";
+import h from "string-template";
+import D from "./BigNumberTrendContainer.js";
+import B from "./useBigNumberTrendData.js";
+const U = (e) => {
   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,
+    app: g,
+    measure: u,
+    dimension1: p,
+    data: y,
+    format: C,
+    percentChangeFormat: b,
+    label: f,
+    textColor: x,
+    bigNumberFontSize: N,
+    percentFontSize: l,
+    labelFontSize: S,
+    showPercentageChange: v,
+    intl: w,
+    noDataText: T
+  } = e, {
+    percentChange: o,
+    percentChangeFormatted: r,
+    formattedNumber: z,
+    templateContext: c
+  } = B({ data: y, app: g, measure: u, dimension1: p, format: C, percentChangeFormat: b, intl: w, noDataText: T }), I = { color: decodeURIComponent(e.numberColor), fontSize: N + "px" }, a = { color: decodeURIComponent(e.percentColor), fontSize: l + "px" }, d = { color: decodeURIComponent(e.percentColor), fontSize: l + "px", lineHeight: 1.1 }, m = { display: "inline-flex", flexDirection: "column", alignItems: "center" }, F = { color: decodeURIComponent(x), fontSize: S + "px" }, s = e.showTooltip && e.tooltipText ? h(e.tooltipText, c) : void 0;
+  return /* @__PURE__ */ i(n, { padded: !0, children: [
+    /* @__PURE__ */ i(n.Row, { children: [
+      /* @__PURE__ */ t(n.Column, { width: 4, children: e.iconImage && e.iconImage != "" && /* @__PURE__ */ t("img", { className: "icon main", src: e.iconImage }) }),
+      /* @__PURE__ */ i(n.Column, { textAlign: "right", width: 12, children: [
+        /* @__PURE__ */ t("img", { className: `icon up ${o > 0 ? "visible" : "hidden"}`, src: e.iconUp }),
+        /* @__PURE__ */ t("img", { className: `icon up ${o < 0 ? "visible" : "hidden"}`, s: !0, src: e.iconDown }),
+        v && o != null && (e.showTooltip && s ? /* @__PURE__ */ t(
+          R,
           {
-            content: P,
+            content: s,
             position: "top center",
-            inverted: t.tooltipStyle === "dark",
+            inverted: e.tooltipStyle === "dark",
             size: "small",
-            trigger: /* @__PURE__ */ y("div", { style: I, children: [
-              /* @__PURE__ */ y("div", { className: "percentage", style: N, children: [
+            trigger: /* @__PURE__ */ i("div", { style: m, children: [
+              /* @__PURE__ */ i("div", { className: "percentage", style: a, children: [
                 " ",
-                l > 0 ? "+" : "",
-                l == 0 ? "=" : "",
-                x
+                o > 0 ? "+" : "",
+                o == 0 ? "=" : "",
+                r
               ] }),
-              /* @__PURE__ */ n("div", { className: "percentage-yoy", style: z, children: "YoY" })
+              /* @__PURE__ */ t("div", { className: "percentage-yoy", style: d, children: "YoY" })
             ] })
           }
-        ) : /* @__PURE__ */ y("div", { style: I, children: [
-          /* @__PURE__ */ y("div", { className: "percentage", style: N, children: [
+        ) : /* @__PURE__ */ i("div", { style: m, children: [
+          /* @__PURE__ */ i("div", { className: "percentage", style: a, children: [
             " ",
-            l > 0 ? "+" : "",
-            l == 0 ? "=" : "",
-            x
+            o > 0 ? "+" : "",
+            o == 0 ? "=" : "",
+            r
           ] }),
-          /* @__PURE__ */ n("div", { className: "percentage-yoy", style: z, children: "YoY" })
+          /* @__PURE__ */ t("div", { className: "percentage-yoy", style: d, 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) }) }) })
+    /* @__PURE__ */ t(n.Row, { children: /* @__PURE__ */ t(n.Column, { width: 16, children: /* @__PURE__ */ t("span", { className: "number", style: I, children: z }) }) }),
+    /* @__PURE__ */ t(n.Row, { children: /* @__PURE__ */ t(n.Column, { children: /* @__PURE__ */ t("div", { className: "label", style: F, children: h(f, c) }) }) })
   ] });
-}, 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);
+}, G = (e) => /* @__PURE__ */ t(
+  D,
+  {
+    DataFrameComponent: U,
+    containerClassName: "alternative big number container",
+    defaultBackgroundColor: "#5a5d68",
+    decodeTooltip: !0,
+    ...e
+  }
+);
 export {
-  ve as default
+  G as default
 };

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

@@ -0,0 +1,125 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as Y, useState as Z } from "react";
+import { Container as _ } from "semantic-ui-react";
+import tt from "../data/DataProvider.js";
+import et from "../data/DataConsumer.js";
+import { connect as at } from "react-redux";
+const ot = (r) => {
+  const {
+    DataFrameComponent: s,
+    containerClassName: c,
+    defaultBackgroundColor: d = "none",
+    decodeTooltip: n = !1,
+    editing: a = !1,
+    unique: v,
+    intl: b,
+    "data-csv": z = "",
+    "data-dvz-proxy-dataset-id": x,
+    "data-view-mode": S = "info",
+    "data-height": l,
+    "data-app": m,
+    "data-measures": I = "{}",
+    "data-format": j = "{}",
+    "data-group": N,
+    "data-filters": P = "[]",
+    "data-text-color": k = "#5a5d68",
+    "data-number-color": O = "#5a5d68",
+    "data-percent-color": $ = "#5a5d68",
+    "data-big-number-font-size": B = 20,
+    "data-label-font-size": M = 20,
+    "data-percent-font-size": R = 20,
+    "data-label": U = "",
+    "data-dimension1": u,
+    "data-show-percentage-change": C = "false",
+    "data-wait-for-filters": E = "false",
+    "data-no-data-text": q = "-",
+    "data-icon-image": G = "",
+    "data-icon-up": H = "",
+    "data-icon-down": J = "",
+    "data-show-tooltip": y = "false",
+    "data-tooltip-text": D = "",
+    "data-tooltip-style": A = "light",
+    "data-percent-change-format": K = "{}"
+  } = r, w = r["data-back-ground-color"] || d, L = Y(null), T = (t) => a ? t : decodeURIComponent(t), i = (t) => {
+    try {
+      return JSON.parse(T(t));
+    } catch {
+      console.error("error parsing value:" + t);
+    }
+    return null;
+  }, p = i(K), Q = p && Object.keys(p).length > 0 ? p : { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }, e = i(j), V = e ? {
+    style: e.style === "compacted" ? "decimal" : e.style,
+    notation: e.style === "compacted" ? "compact" : "standard",
+    currency: e.currency,
+    minimumFractionDigits: parseInt(e.minimumFractionDigits),
+    maximumFractionDigits: parseInt(e.maximumFractionDigits)
+  } : {
+    notation: "standard",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }, [nt, it] = Z(S), W = a ? l - 80 : l - 40, g = {}, f = i(P) || {};
+  f && f.forEach && f.forEach((t) => {
+    t.value != null && t.value.filter((F) => F != null && F.toString().trim() != "").length > 0 && (g[t.param] = t.value);
+  }), x && (g.dvzProxyDatasetId = x);
+  const h = [];
+  u !== "none" && h.push(u);
+  const X = n ? T(D) : D;
+  return /* @__PURE__ */ o("div", { ref: L, children: /* @__PURE__ */ o(
+    _,
+    {
+      className: `${c} ${a ? "editing" : ""}`,
+      style: { height: l + "px", backgroundColor: w },
+      fluid: !0,
+      children: /* @__PURE__ */ o(
+        tt,
+        {
+          style: { height: `${W}px` },
+          params: g,
+          app: m,
+          group: N,
+          csv: z,
+          editing: a,
+          waitForFilters: E === "true",
+          store: [m, v, ...h],
+          source: h.join("/"),
+          children: /* @__PURE__ */ o(et, { children: /* @__PURE__ */ o(
+            s,
+            {
+              iconImage: G,
+              iconUp: H,
+              iconDown: J,
+              editing: a,
+              locale: b.locale,
+              intl: b,
+              app: m,
+              format: V,
+              dimension1: u,
+              measure: i(I)[0] || null,
+              label: U,
+              bigNumberFontSize: B,
+              textColor: k,
+              numberColor: O,
+              percentColor: $,
+              backGroundColor: w,
+              labelFontSize: M,
+              percentFontSize: R,
+              showPercentageChange: C == "true" || C == !0,
+              noDataText: q,
+              showTooltip: y == "true" || y === !0,
+              tooltipText: X,
+              tooltipStyle: A,
+              percentChangeFormat: Q
+            }
+          ) })
+        }
+      )
+    }
+  ) });
+}, rt = (r, s) => {
+  const { "data-app": c, "data-group": d } = s, n = r.getIn(["data", "measures", c, d]);
+  return n ? { injectedMeasures: n } : {};
+}, pt = at(rt, {})(ot);
+export {
+  pt as default
+};

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