@devgateway/dvz-ui-react/dist/esm/embeddable/big-number-trend/index.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

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