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