@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
140 lines (139 loc) • 3.89 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 W, Sankey as I } from "@progress/kendo-charts";
import { validatePackage as K, useRtl as M, useDocument as V, canUseDOM as A, WatermarkOverlay as F } from "@progress/kendo-react-common";
import { packageMetadata as U } from "../package-metadata.mjs";
import { sankeyPropTypes as $ } from "./propTypes.mjs";
import { NodeTooltipContent as j, LinkTooltipContent as q, TooltipComponent as z } from "./SankeyTooltip.mjs";
const P = 12, f = {
offset: P,
visible: !0
}, B = ["nodeEnter", "nodeLeave", "linkEnter", "linkLeave", "nodeClick", "linkClick"], G = (n, u) => {
n && (n.unbind(), B.forEach((s) => {
u[s] && n.bind(s, u[s]);
}));
}, w = e.forwardRef((n, u) => {
const s = !K(U, { component: "Sankey" }), l = e.useRef(null), o = e.useRef(null), c = M(l, n.dir, [n.dir, l.current]), k = e.useRef(null), m = V(l), {
data: y,
links: v,
nodes: E,
labels: b,
title: C,
legend: g,
tooltip: d = f,
disableAutoLayout: T,
disableKeyboardNavigation: L
} = n, R = e.useRef();
R.current = n;
const [h, N] = e.useState(null), S = e.useCallback(
(r) => {
const {
visible: i,
appendTo: t = m().body,
offset: p = P,
nodeComponent: x = j,
linkComponent: D = q
} = { ...f, ...d };
if (i) {
const H = {
appendTo: t,
event: r,
offset: p,
dir: c,
Content: r.targetType === "node" ? x : D
};
N(H);
}
},
[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: E,
labels: b,
title: C,
legend: g,
disableAutoLayout: T,
disableKeyboardNavigation: L,
rtl: c === "rtl",
tooltip: { ...f, ...d }
};
if (o.current)
o.current.setOptions(r);
else if (A && l.current) {
const i = W(l.current);
o.current = new I(l.current, r, i), G(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,
E,
b,
C,
g,
T,
L,
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(z, { ...h }), s && /* @__PURE__ */ e.createElement(F, null));
});
w.propTypes = $;
w.displayName = "KendoReactSankey";
export {
w as Sankey
};