@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 o, jsxs as E } from "react/jsx-runtime";
import { useRef as q, useState as A } 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) => {
  const {
    editing: c = !1,
    unique: h,
    intl: u,
    childContent: g,
    "data-csv": m = "",
    "data-dvz-proxy-dataset-id": b,
    "data-no-data-message": T = "No data matches your selection",
    "data-view-mode": F = "info",
    "data-height": v,
    "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": I = "-"
  } = f, w = u.locale, j = q(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), O = 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] = A(F), V = c ? v - 80 : v - 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: v + "px" }, fluid: !0, children: /* @__PURE__ */ o(
    J,
    {
      style: { height: `${V}px` },
      params: P,
      app: x,
      group: y,
      csv: m,
      editing: c,
      waitForFilters: D === "true",
      store: [x, h, ...R],
      source: R.join("/"),
      children: /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(
        L,
        {
          editing: c,
          locale: w,
          intl: u,
          app: x,
          format: O,
          dimension1: r,
          measure: l(C)[0] || null,
          label: p,
          bigNumberFontSize: i,
          textColor: e,
          labelFontSize: a,
          percentFontSize: d,
          showPercentageChange: S == "true" || S == !0,
          noDataText: I
        }
      ) })
    }
  ) }) });
}, L = (f) => {
  const {
    editing: c,
    app: h,
    measure: u,
    dimension1: g,
    data: m,
    format: b,
    label: T,
    textColor: F,
    bigNumberFontSize: v,
    percentFontSize: x,
    labelFontSize: C,
    showPercentageChange: z,
    intl: y,
    noDataText: N
  } = f;
  let e = [], i, a;
  if (h == "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 = g, 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 I = {
    color: decodeURIComponent(F),
    fontSize: v + "px"
  }, w = {
    color: decodeURIComponent(F),
    fontSize: x + "px"
  }, j = {
    color: decodeURIComponent(F),
    fontSize: C + "px"
  };
  return /* @__PURE__ */ E("div", { className: "trend", children: [
    /* @__PURE__ */ o("div", { className: "label", style: j, children: G(T, e[e.length - 1]) }),
    /* @__PURE__ */ E("div", { className: "number-and-icon", children: [
      /* @__PURE__ */ o("span", { className: "number", style: I, children: D }),
      r && /* @__PURE__ */ o("div", { className: r > 0 ? "icon trend up" : "icon trend down" })
    ] }),
    z && r && /* @__PURE__ */ o("div", { className: "percentage", style: w, children: S })
  ] });
}, Q = (f, c) => {
  const { "data-app": h, "data-group": u } = c, g = f.getIn(["data", "measures", h, u]);
  return g ? {
    injectedMeasures: g
  } : {};
}, W = {}, se = k(Q, W)(K);
export {
  se as default
};