@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.
107 lines (106 loc) • 3.99 kB
JavaScript
import { jsx as i, jsxs as A } from "react/jsx-runtime";
import { useRef as O, useState as R } from "react";
import { Container as N } from "semantic-ui-react";
import U from "../data/DataProvider.js";
import $ from "../data/DataConsumer.js";
import { PostContent as q } from "@devgateway/wp-react-lib";
import { connect as H } from "react-redux";
const J = (p) => {
const {
editing: r = !1,
unique: n,
intl: a,
childContent: e,
"data-csv": c = "",
"data-no-data-message": l = "No data matches your selection",
"data-view-mode": t = "info",
"data-height": o,
"data-dimension1": d,
"data-app": u,
"data-measures": D = {},
"data-format": F = "{}",
"data-group": M,
"data-filters": C = [],
"data-value-type": j
} = p, S = a.locale, I = O(null), P = (s) => r ? s : decodeURIComponent(s), h = (s) => {
try {
return JSON.parse(P(s));
} catch {
console.error("error parsing value:" + s);
}
return null;
}, m = h(F), w = m ? {
style: m.style === "compacted" ? "decimal" : m.style,
notation: m.style === "compacted" ? "compact" : "standard",
currency: m.currency,
minimumFractionDigits: parseInt(m.minimumFractionDigits),
maximumFractionDigits: parseInt(m.maximumFractionDigits)
} : {
notation: "standard",
currency: "USD",
minimumFractionDigits: 2,
maximumFractionDigits: 2
}, [E, B] = R(t), T = r ? t : E, g = r ? o - 80 : o - 40, v = {}, y = h(C) || {};
y && y.forEach && y.forEach((s) => {
s.value != null && s.value.filter((b) => b != null && b.toString().trim() != "").length > 0 && (v[s.param] = s.value);
});
let x = !1;
const f = [];
return d != "none" && f.push(d), u != "csv" && (!f.length || !h(D)[0]) && (x = !0), /* @__PURE__ */ i("div", { ref: I, children: /* @__PURE__ */ A(N, { className: "chart container data-label", style: { height: o + "px" }, fluid: !0, children: [
/* @__PURE__ */ i(
U,
{
style: { height: `${g}px` },
params: v,
app: u,
group: M,
csv: c,
editing: r,
store: [u, n, ...f],
source: f.join("/"),
children: /* @__PURE__ */ i(N, { style: { height: `${g}px` }, className: "body data-label-body", fluid: !0, children: !x && /* @__PURE__ */ i($, { children: /* @__PURE__ */ i(
L,
{
locale: S,
dimensions: [...f],
valueType: j,
intl: a,
app: u,
format: w,
measure: h(D)[0] || null
}
) }) })
}
),
/* @__PURE__ */ i("br", {}),
e && T == "info" && /* @__PURE__ */ i(N, { fluid: !0, style: { height: g + "px" }, className: "body data-label-body", children: /* @__PURE__ */ i(q, { post: { content: { rendered: e } } }) })
] }) });
}, L = (p) => {
const { valueType: r, measure: n, data: a, format: e, intl: c } = p;
let l = "N/A";
if (r === "first") {
const t = a.children[0][n];
l = c.formatNumber(e.style === "percent" ? t / 100 : t, { ...e });
} else if (r === "total") {
const t = a[n];
l = c.formatNumber(e.style === "percent" ? t / 100 : t, { ...e });
} else if (r === "min" && !isNaN(a[n])) {
const t = Math.min(...a.children.map((o) => o[n]));
l = c.formatNumber(e.style === "percent" ? t / 100 : t, { ...e });
} else if (r === "max" && !isNaN(a[n])) {
const t = Math.max(...a.children.map((o) => o[n]));
l = c.formatNumber(e.style === "percent" ? t / 100 : t, { ...e });
} else if (r === "avg" && !isNaN(a[n])) {
const t = a.children.map((d) => d[n]), o = t.reduce((d, u) => d + u, 0) / t.length;
l = c.formatNumber(e.style === "percent" ? o / 100 : o, { ...e });
}
return /* @__PURE__ */ i("div", { children: l });
}, k = (p, r) => {
const { "data-app": n, "data-group": a } = r, e = p.getIn(["data", "measures", n, a]);
return e ? {
injectedMeasures: e
} : {};
}, z = {}, Z = H(k, z)(J);
export {
Z as default
};