@devgateway/dvz-ui-react/dist/esm/embeddable/big-number/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 V, useState as T, useEffect as O } 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 $ } from "react-redux";
import { useSpring as k, animated as B } from "@react-spring/web";
const G = (l) => {
  const {
    editing: n = !1,
    unique: c,
    intl: t,
    childContent: a,
    "data-csv": f = "",
    "data-dvz-proxy-dataset-id": g,
    "data-no-data-message": P = "No data matches your selection",
    "data-view-mode": y = "info",
    "data-height": m,
    "data-app": d,
    "data-measures": F = "{}",
    "data-format": b = "{}",
    "data-group": s,
    "data-filters": u = "[]",
    "data-number-font-size": r = 20,
    "data-label-font-size": v = 20,
    "data-number-color": D = "#000000",
    "data-label-color": S = "#000000",
    "data-label": C = "",
    "data-wait-for-filters": z = "false",
    "data-no-data-text": I = "-"
  } = l, h = t.locale, x = V(null), p = (e) => n ? e : decodeURIComponent(e), N = (e) => {
    try {
      return JSON.parse(p(e));
    } catch {
      console.error("error parsing value:" + e);
    }
    return null;
  }, i = N(b), U = i ? {
    style: i.style === "compacted" ? "decimal" : i.style,
    notation: i.style === "compacted" ? "compact" : "standard",
    currency: i.currency,
    minimumFractionDigits: parseInt(i.minimumFractionDigits),
    maximumFractionDigits: parseInt(i.maximumFractionDigits)
  } : {
    notation: "standard",
    currency: "USD",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }, [W, X] = T(y), A = n ? m - 80 : m - 40, j = {}, w = N(u) || {};
  w && w.forEach && w.forEach((e) => {
    e.value != null && e.value.filter((M) => M != null && M.toString().trim() != "").length > 0 && (j[e.param] = e.value);
  }), g && (j.dvzProxyDatasetId = g);
  const R = [];
  return /* @__PURE__ */ o("div", { ref: x, children: /* @__PURE__ */ o(q, { className: "chart container big-number-container", style: { height: m + "px" }, fluid: !0, children: /* @__PURE__ */ o(
    H,
    {
      style: { height: `${A}px` },
      params: j,
      app: d,
      group: s,
      csv: f,
      editing: n,
      waitForFilters: z === "true",
      store: [d, c, ...R],
      source: R.join("/"),
      children: /* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(
        K,
        {
          locale: h,
          intl: t,
          app: d,
          format: U,
          measure: N(F)[0] || null,
          label: C,
          numberFontSize: r,
          numberColor: D,
          labelFontSize: v,
          labelColor: S,
          noDataText: I
        }
      ) })
    }
  ) }) });
}, K = (l) => {
  var h, x;
  const {
    app: n,
    measure: c,
    data: t,
    format: a,
    label: f,
    numberColor: g,
    numberFontSize: P,
    labelColor: y,
    labelFontSize: m,
    noDataText: d = "-",
    intl: F
  } = l;
  let b = c, s = t;
  n === "csv" && ((h = t == null ? void 0 : t.meta) != null && h.fields) && ((x = t == null ? void 0 : t.data) != null && x.length) && (b = t.meta.fields[0], s = t.data[0]);
  const u = (s == null ? void 0 : s[b]) ?? null, r = u ? (a == null ? void 0 : a.style) === "percent" ? u / 100 : u : null, [v, D] = T(r);
  O(() => {
    r != null && D(r);
  }, [r]);
  const { number: S } = k({
    from: { number: 0 },
    to: { number: v ?? 0 },
    // reset: true,
    config: {
      mass: 1,
      tension: 120,
      friction: 30
    }
  }), C = {
    color: decodeURIComponent(g),
    fontSize: P + "px",
    textAlign: "center"
  }, z = {
    color: decodeURIComponent(y),
    fontSize: m + "px",
    textAlign: "center"
  }, I = (p) => F.formatNumber(p, { ...a });
  return /* @__PURE__ */ E("div", { children: [
    /* @__PURE__ */ o("div", { style: C, className: "big-number", children: r === null ? d : /* @__PURE__ */ o(B.span, { children: S.to((p) => I(p)) }) }),
    f && /* @__PURE__ */ o("div", { style: z, className: "big-number-label", children: f })
  ] });
}, L = (l, n) => {
  const { "data-app": c, "data-group": t } = n, a = l.getIn(["data", "measures", c, t]);
  return a ? {
    injectedMeasures: a
  } : {};
}, Q = {}, nt = $(L, Q)(G);
export {
  nt as default
};