@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.
239 lines (238 loc) • 8.16 kB
JavaScript
import { jsx as c, jsxs as F } from "react/jsx-runtime";
import z, { useRef as Pe, useState as Ee } from "react";
import { Container as R } from "semantic-ui-react";
import Ie from "../data/DataProvider.js";
import Oe from "../data/DataConsumer.js";
import { PostContent as we } from "@devgateway/wp-react-lib";
import Fe from "../common/colors/ColorProvider.js";
import K from "../common/Messages.js";
import { connect as Re } from "react-redux";
import je from "./Sankey.js";
import He from "papaparse";
const Se = (h) => {
const {
parent: B,
editing: u = !1,
unique: C,
childContent: o,
categories: x,
injectedMeasures: r,
"data-csv": i = "",
"data-no-data-message": d = "No data matches your selection",
"data-view-mode": t = "info",
"data-height": n,
"data-source": m,
"data-dimension1": e,
"data-dimension2": s,
"data-dimension3": a,
"data-scheme": v = "nivo",
"data-margin-left": f,
"data-margin-top": k,
"data-margin-right": Q,
"data-margin-bottom": X,
"data-show-legends": j,
"data-legend-position": Y,
"data-app": p,
"data-measures": L = {},
"data-format": Z = "{}",
"data-tooltip-html": E,
"data-layout": _,
"data-group": H,
"data-filters": ee = [],
"data-no-data-message": $e,
"data-legend-label": ae,
"data-tooltip-enabled": S,
"data-use-label-background": T,
"data-use-check-box-background": N,
"data-legend-label-color": te,
"data-tooltip-enable-markdown": D,
"data-reverse-legend": U,
"data-sort": $,
"data-node-thickness": oe,
"data-node-opacity": ne,
"data-node-hover-opacity": re,
"data-node-inner-padding": ie,
"data-node-spacing": de,
"data-node-hover-others-opacity": se,
"data-node-border-width": le,
"data-node-border-radius": ce,
"data-link-opacity": ue,
"data-link-hover-opacity": me,
"data-link-hover-others-opacity": pe,
"data-link-contract": ge,
"data-enable-link-gradient": G,
"data-enable-labels": V,
"data-label-position": he,
"data-label-padding": fe,
"data-use-custom-label-color": q,
"data-label-text-color": be,
"data-label-orientation": ye,
"data-manual-colors": ve = "{}"
} = h, A = h.intl.locale, ke = Pe(null), I = (l) => u ? l : decodeURIComponent(l), b = (l) => {
try {
return JSON.parse(I(l));
} catch {
console.error("error parsing value:" + l);
}
return null;
}, Ce = () => b(ve)[p], y = b(Z), xe = y ? {
style: y.style === "compacted" ? "decimal" : y.style,
notation: y.style === "compacted" ? "compact" : "standard",
currency: y.currency,
minimumFractionDigits: parseInt(y.minimumFractionDigits),
maximumFractionDigits: parseInt(y.maximumFractionDigits)
} : {
notation: "standard",
currency: "USD",
minimumFractionDigits: 2,
maximumFractionDigits: 2
}, [Le, Ge] = Ee(t), Be = u ? t : Le, De = {
scheme: v
}, M = u ? n - 80 : n - 40, Me = {}, J = {
app: p,
layout: _,
showLegends: j == !0 || j == "true",
legendLabel: ae,
marginLeft: parseInt(f),
marginTop: parseInt(k),
marginRight: parseInt(Q),
marginBottom: parseInt(X),
height: `${M}px`,
legendPosition: Y,
legends: Me,
tooltip: E ? D === !0 || D === "true" ? I(E) : I(E).replace(/\r\n/g, "<hr/>").replace(/[\r\n]/g, "<hr/>") : "",
colors: De,
format: xe,
categories: x,
legendLabelColor: decodeURIComponent(te),
tooltipEnabled: S == !0 || S == "true",
tooltipEnableMarkdown: D == !0 || D == "true",
reverseLegend: U == !0 || U == "true",
sort: $,
nodeThickness: oe,
nodeOpacity: ne,
nodeHoverOpacity: re,
nodeInnerPadding: ie,
nodeSpacing: de,
nodeHoverOthersOpacity: se,
nodeBorderWidth: le,
nodeBorderRadius: parseInt(ce),
linkOpacity: ue,
linkHoverOpacity: me,
linkContract: ge,
enableLinkGradient: G == !0 || G == "true",
linkHoverOthersOpacity: pe,
enableLabels: V == !0 || V == "true",
labelPosition: he,
labelPadding: fe,
useCustomLabelColor: q == !0 || q == "true",
labelTextColor: be,
labelOrientation: ye,
useLabelBackground: T == !0 || T == "true",
useCheckBoxBackground: N == !0 || N == "true"
}, W = {}, O = b(ee) || {};
O && O.forEach && O.forEach((l) => {
l.value != null && l.value.filter((w) => w != null && w.toString().trim() != "").length > 0 && (W[l.param] = l.value);
});
let P = !1;
const g = [];
return e != "none" && g.push(e), s != "none" && g.push(s), a != "none" && g.push(a), p != "csv" ? (!g.length || !L || !b(L) || !b(L)[0]) && (P = !0) : i.length == 0 && (P = !0), /* @__PURE__ */ c("div", { ref: ke, children: /* @__PURE__ */ F(R, { className: "chart container", style: { minHeight: n + "px" }, fluid: !0, children: [
/* @__PURE__ */ c(
Ie,
{
style: { height: `${M}px` },
params: W,
app: p,
group: H,
csv: i,
editing: u,
store: [p, C, ...g],
source: g.join("/"),
children: /* @__PURE__ */ F(R, { style: { height: `${M}px` }, className: "body", fluid: !0, children: [
P && /* @__PURE__ */ c(K, { editing: u }),
!P && /* @__PURE__ */ F(Oe, { children: [
/* @__PURE__ */ c(K, { app: p, group: H, noDataMsg: d, children: " " }),
/* @__PURE__ */ c(
Te,
{
locale: A,
colorBy: "id",
dimensions: [...g],
sort: $,
csv: i,
app: p,
measure: b(L)[0] || null,
children: /* @__PURE__ */ c(
Fe,
{
app: p,
locale: A,
manualColors: Ce(),
colorBy: "id",
scheme: v,
barColor: J.barColor,
children: /* @__PURE__ */ c(je, { ...J, dimensions: g, measure: b(L)[0] || null })
}
)
}
)
] })
] })
}
),
/* @__PURE__ */ c("br", {}),
o && Be == "info" && /* @__PURE__ */ c(R, { fluid: !0, style: { height: M + "px" }, className: "body", children: /* @__PURE__ */ c(we, { post: { content: { rendered: o } } }) })
] }) });
}, Te = (h) => {
const { children: B, csv: u, app: C } = h;
let o = { nodes: [], links: [] }, x = {
indexBy: "",
keys: o.nodes.map((r) => r.id),
data: o
};
if (C != "csv") {
const r = (d) => {
const { data: t, dimensions: n, measure: m } = d, e = [], s = [], a = {};
return a[t.type] = t.value, i(t.children, e, s, null, m, a), { nodes: e, links: s };
}, i = (d = [], t, n, m, e, s) => {
d.forEach((a) => {
const v = {};
if (v[a.type] = a.value, t.find((f) => f.id === a.value) || t.push({ id: a.value }), m) {
const f = n.find((k) => k.source === m && k.target === a.value);
if (f)
f.value = f.value + a[e];
else {
const k = { ...a, ...v, ...s };
n.push({ source: m, target: a.value, value: a[e], data: k });
}
}
a.children && a.children.length > 0 && i(a.children, t, n, a.value, e, v);
});
};
o = r(h), x = {
indexBy: "",
keys: o.nodes.map((d) => d.id),
data: o
};
} else {
const r = He.parse(u, { header: !0, dynamicTyping: !0 }), i = r.meta.fields, d = i.shift(), t = r.data.map((e) => e[d]), n = [...i.map((e) => ({ id: e })), ...t.map((e) => ({ id: e }))], m = [];
r.data.forEach((e) => {
i.forEach((s) => {
m.push({ source: s, target: e[d], value: e[s] });
});
}), x = {
indexBy: "",
keys: n.map((e) => e.id),
data: { nodes: n, links: m }
};
}
return z.Children.map(B, (r) => z.cloneElement(r, { options: x }));
}, Ne = (h, B) => {
const { "data-app": u, "data-group": C } = B, o = h.getIn(["data", "measures", u, C]);
return o ? {
injectedMeasures: o
} : {};
}, Ue = {}, _e = Re(Ne, Ue)(Se);
export {
_e as default
};