@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.
206 lines (205 loc) • 6.22 kB
JavaScript
import { jsx as o, jsxs as g, Fragment as h } from "react/jsx-runtime";
import { useState as ae } from "react";
import { ResponsiveSankey as se } from "@nivo/sankey";
import { injectIntl as de } from "react-intl";
import ce from "../common/ChartTooltip.js";
const me = (i) => {
var O, v, x, N, L;
const {
marginLeft: B,
marginTop: T,
marginRight: H,
marginBottom: j,
options: ge,
intl: w,
format: E,
colors: he,
height: P,
showLegends: f,
tickColor: ke,
colorGenerator: S,
legendLabel: u,
legendCheckBack: fe,
legendLabelBack: ue,
legendLabelColor: b,
reverseLegend: z,
measures: be,
dimension1: pe,
dimension2: ye,
dimension3: Ce,
mode: Oe,
app: ve,
tooltipHTML: xe,
tooltip: k,
filters: Ne,
layout: F,
group: Le,
noDataMessage: Be,
tooltipEnabled: I,
tooltipEnableMarkdown: M,
sort: R,
nodeThickness: $,
nodeOpacity: D,
nodeHoverOpacity: G,
nodeInnerPadding: W,
nodeSpacing: q,
nodeHoverOthersOpacity: A,
nodeBorderWidth: J,
nodeBorderRadius: K,
linkOpacity: Q,
linkHoverOpacity: U,
linkHoverOthersOpacity: V,
linkContract: X,
enableLinkGradient: Y,
enableLabels: Z,
labelPosition: _,
labelPadding: ee,
useCustomLabelColor: oe,
labelTextColor: ne,
labelOrientation: te,
legendPosition: a,
useLabelBackground: p,
useCheckBoxBackground: d
} = i, [s, ie] = ae([]), le = (n) => {
const t = s.slice();
if (t.indexOf(n) > -1) {
const r = t.indexOf(n);
t.splice(r, 1);
} else
t.push(n);
ie(t);
}, re = { top: T, right: H, bottom: j, left: B }, y = () => /* @__PURE__ */ o(h, { children: f && u && /* @__PURE__ */ o("div", { className: "legend item", children: /* @__PURE__ */ o("label", { className: "legend-title", children: u }) }) }), C = () => {
var t, r, m;
const n = (m = (r = (t = i == null ? void 0 : i.options) == null ? void 0 : t.data) == null ? void 0 : r.nodes) == null ? void 0 : m.slice();
return z && n.reverse(), /* @__PURE__ */ o(h, { children: f && (n == null ? void 0 : n.map((e) => {
const l = s.indexOf(e.id) == -1;
return /* @__PURE__ */ g("div", { className: `legend item ${l ? "" : "ignore"}`, onClick: () => le(e.id), children: [
d && /* @__PURE__ */ o(
"input",
{
className: l ? "" : "ignore",
type: "checkbox",
checked: l,
readOnly: !0,
style: {
backgroundColor: e.color,
color: "#000"
}
}
),
!d && /* @__PURE__ */ o(
"input",
{
type: "checkbox",
checked: l,
readOnly: !0,
style: {
color: "#000"
}
}
),
d && /* @__PURE__ */ o(
"span",
{
className: "checkmark-with-bg",
style: { backgroundColor: e.color }
}
),
!d && /* @__PURE__ */ o("span", { className: "checkmark" }),
p && /* @__PURE__ */ o(
"label",
{
className: l ? "" : "ignore",
style: {
backgroundColor: e.color,
color: b
},
children: e.id
}
),
!p && /* @__PURE__ */ o(
"label",
{
className: l ? "" : "ignore",
style: {
color: b
},
children: e.id
}
)
] });
})) });
};
let c = { nodes: [], links: [] };
if (console.log("sankey props ===>", i), (O = i.options) != null && O.data && ((x = (v = i.options) == null ? void 0 : v.data) != null && x.nodes) && ((L = (N = i.options) == null ? void 0 : N.data) != null && L.nodes.length)) {
const { links: n, nodes: t } = i.options.data;
t.forEach((e) => {
e.color = S.getColor(e.id);
});
const r = n.filter((e) => s.indexOf(e.source) == -1 && s.indexOf(e.target) == -1) || [], m = t.filter((e) => s.indexOf(e.id) == -1 && r.find((l) => l.source == e.id || l.target == e.id));
c = {
links: r,
nodes: m
};
}
return /* @__PURE__ */ o("div", { style: { height: P }, children: /* @__PURE__ */ g(h, { children: [
c.nodes.length && c.links.length ? /* @__PURE__ */ o(
se,
{
data: c,
margin: re,
layout: F,
align: "justify",
sort: R,
colors: { datum: "color" },
nodeOpacity: D,
nodeHoverOthersOpacity: A,
nodeThickness: $,
nodeSpacing: q,
nodeBorderWidth: J,
nodeBorderColor: {
from: "color",
modifiers: [
[
"darker",
0.8
]
]
},
linkTooltip: (n) => I && k && k.trim().length > 0 ? /* @__PURE__ */ o(ce, { intl: w, format: E, d: n, tooltip: k, tooltipEnableMarkdown: M }) : null,
enableLabels: Z,
linkHoverOpacity: U,
nodeHoverOpacity: G,
nodeInnerPadding: W,
nodeBorderRadius: K,
linkOpacity: Q,
linkHoverOthersOpacity: V,
linkContract: X,
enableLinkGradient: Y,
labelPosition: _,
labelOrientation: te,
labelPadding: ee,
labelTextColor: oe ? ne : {
from: "color",
modifiers: [
[
"darker",
1
]
]
}
}
) : /* @__PURE__ */ o(h, {}),
(a == "top" || a == "bottom") && /* @__PURE__ */ o("div", { className: `legends container has-standard-12-font-size ${a}`, children: /* @__PURE__ */ g("div", { className: "legend-sections", children: [
/* @__PURE__ */ o("div", { className: "title-section", children: y() }),
/* @__PURE__ */ o("div", { className: "legends container has-standard-12-font-size items-section", children: C() })
] }) }),
(a == "right" || a == "left") && /* @__PURE__ */ g("div", { className: `legends container has-standard-12-font-size ${a}`, children: [
y(),
C()
] })
] }) });
}, Pe = de(me);
export {
Pe as default
};