@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
140 lines (139 loc) • 3.94 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import { sankeyTheme as I, Sankey as K } from "@progress/kendo-charts";
import { validatePackage as V, getLicenseMessage as A, useRtl as F, useDocument as U, canUseDOM as $, WatermarkOverlay as j } from "@progress/kendo-react-common";
import { packageMetadata as P } from "../package-metadata.mjs";
import { sankeyPropTypes as q } from "./propTypes.mjs";
import { NodeTooltipContent as z, LinkTooltipContent as B, TooltipComponent as G } from "./SankeyTooltip.mjs";
const w = 12, f = {
offset: w,
visible: !0
}, J = ["nodeEnter", "nodeLeave", "linkEnter", "linkLeave", "nodeClick", "linkClick"], Q = (n, u) => {
n && (n.unbind(), J.forEach((s) => {
u[s] && n.bind(s, u[s]);
}));
}, x = e.forwardRef((n, u) => {
const s = !V(P, { component: "Sankey" }), D = A(P), l = e.useRef(null), o = e.useRef(null), c = F(l, n.dir, [n.dir, l.current]), k = e.useRef(null), m = U(l), {
data: y,
links: v,
nodes: g,
labels: E,
title: b,
legend: C,
tooltip: d = f,
disableAutoLayout: L,
disableKeyboardNavigation: T
} = n, R = e.useRef(void 0);
R.current = n;
const [h, N] = e.useState(null), S = e.useCallback(
(r) => {
const {
visible: i,
appendTo: t = m().body,
offset: p = w,
nodeComponent: M = z,
linkComponent: H = B
} = { ...f, ...d };
if (i) {
const W = {
appendTo: t,
event: r,
offset: p,
dir: c,
Content: r.targetType === "node" ? M : H
};
N(W);
}
},
[d, c, m]
), O = e.useCallback(() => {
N(null);
}, []), a = e.useCallback((r, i) => {
const t = R.current[r];
if (t) {
const p = {
...i,
nativeEvent: i.originalEvent,
target: k.current
};
t.call(void 0, p);
}
}, []);
return e.useEffect(() => {
const r = {
data: y,
links: v,
nodes: g,
labels: E,
title: b,
legend: C,
disableAutoLayout: L,
disableKeyboardNavigation: T,
rtl: c === "rtl",
tooltip: { ...f, ...d }
};
if (o.current)
o.current.setOptions(r);
else if ($ && l.current) {
const i = I(l.current);
o.current = new K(l.current, r, i), Q(o.current, {
nodeEnter: (t) => {
a("onNodeEnter", t);
},
nodeLeave: (t) => {
a("onNodeLeave", t);
},
linkEnter: (t) => {
a("onLinkEnter", t);
},
linkLeave: (t) => {
a("onLinkLeave", t);
},
nodeClick: (t) => {
a("onNodeClick", t);
},
linkClick: (t) => {
a("onLinkClick", t);
}
}), o.current.bind("tooltipShow", S), o.current.bind("tooltipHide", O);
}
return () => {
o.current && (o.current.destroy(), o.current = null);
};
}, [
y,
v,
g,
E,
b,
C,
L,
T,
c,
d,
O,
S,
a
]), e.useImperativeHandle(
k,
() => ({
get element() {
return l.current;
},
exportVisual: (r) => o.current.exportVisual(r),
props: n
}),
[]
), e.useImperativeHandle(u, () => k.current), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { ref: l, className: n.className, style: n.style, dir: c }), h && /* @__PURE__ */ e.createElement(G, { ...h }), s && /* @__PURE__ */ e.createElement(j, { message: D }));
});
x.propTypes = q;
x.displayName = "KendoReactSankey";
export {
x as Sankey
};