@devgateway/dvz-ui-react 1.0.0

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

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

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

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