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