source: node_modules/recharts/es6/chart/Sankey.js

Last change on this file was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations
  • Property mode set to 100644
File size: 29.0 KB
Line 
1var _excluded = ["sourceX", "sourceY", "sourceControlX", "targetX", "targetY", "targetControlX", "linkWidth"],
2 _excluded2 = ["className", "style", "children", "id"];
3function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
4function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
5function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
6function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
9function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
10function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
11import * as React from 'react';
12import { useCallback, useMemo, useState } from 'react';
13import maxBy from 'es-toolkit/compat/maxBy';
14import sumBy from 'es-toolkit/compat/sumBy';
15import get from 'es-toolkit/compat/get';
16import { Surface } from '../container/Surface';
17import { Layer } from '../container/Layer';
18import { Rectangle } from '../shape/Rectangle';
19import { getValueByDataKey } from '../util/ChartUtils';
20import { ReportChartMargin, ReportChartSize, useChartHeight, useChartWidth } from '../context/chartLayoutContext';
21import { TooltipPortalContext } from '../context/tooltipPortalContext';
22import { RechartsWrapper } from './RechartsWrapper';
23import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
24import { useAppDispatch } from '../state/hooks';
25import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice';
26import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
27import { SetComputedData } from '../context/chartDataContext';
28import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
29import { resolveDefaultProps } from '../util/resolveDefaultProps';
30import { isPositiveNumber } from '../util/isWellBehavedNumber';
31import { isNotNil, noop } from '../util/DataUtils';
32import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
33var interpolationGenerator = (a, b) => {
34 var ka = +a;
35 var kb = b - ka;
36 return t => ka + kb * t;
37};
38var centerY = node => node.y + node.dy / 2;
39
40// TODO why is this not reading dataKey?
41var getValue = entry => entry && entry.value || 0;
42var getSumOfIds = (links, ids) => ids.reduce((result, id) => result + getValue(links[id]), 0);
43var getSumWithWeightedSource = (tree, links, ids) => ids.reduce((result, id) => {
44 var link = links[id];
45 if (link == null) {
46 return result;
47 }
48 var sourceNode = tree[link.source];
49 if (sourceNode == null) {
50 return result;
51 }
52 return result + centerY(sourceNode) * getValue(links[id]);
53}, 0);
54var getSumWithWeightedTarget = (tree, links, ids) => ids.reduce((result, id) => {
55 var link = links[id];
56 if (link == null) {
57 return result;
58 }
59 var targetNode = tree[link.target];
60 if (targetNode == null) {
61 return result;
62 }
63 return result + centerY(targetNode) * getValue(links[id]);
64}, 0);
65var ascendingY = (a, b) => a.y - b.y;
66var searchTargetsAndSources = (links, id) => {
67 var sourceNodes = [];
68 var sourceLinks = [];
69 var targetNodes = [];
70 var targetLinks = [];
71 for (var i = 0, len = links.length; i < len; i++) {
72 var link = links[i];
73 if ((link === null || link === void 0 ? void 0 : link.source) === id) {
74 targetNodes.push(link.target);
75 targetLinks.push(i);
76 }
77 if ((link === null || link === void 0 ? void 0 : link.target) === id) {
78 sourceNodes.push(link.source);
79 sourceLinks.push(i);
80 }
81 }
82 return {
83 sourceNodes,
84 sourceLinks,
85 targetLinks,
86 targetNodes
87 };
88};
89var updateDepthOfTargets = (tree, curNode) => {
90 var {
91 targetNodes
92 } = curNode;
93 for (var i = 0, len = targetNodes.length; i < len; i++) {
94 var targetNode = targetNodes[i];
95 if (targetNode == null) {
96 continue;
97 }
98 var target = tree[targetNode];
99 if (target) {
100 target.depth = Math.max(curNode.depth + 1, target.depth);
101 updateDepthOfTargets(tree, target);
102 }
103 }
104};
105var getNodesTree = (_ref, width, nodeWidth, align) => {
106 var _maxBy$depth, _maxBy;
107 var {
108 nodes,
109 links
110 } = _ref;
111 var tree = nodes.map((entry, index) => {
112 var result = searchTargetsAndSources(links, index);
113 return _objectSpread(_objectSpread(_objectSpread({}, entry), result), {}, {
114 value: Math.max(getSumOfIds(links, result.sourceLinks), getSumOfIds(links, result.targetLinks)),
115 depth: 0
116 });
117 });
118 for (var i = 0, len = tree.length; i < len; i++) {
119 var node = tree[i];
120 if (node != null && !node.sourceNodes.length) {
121 updateDepthOfTargets(tree, node);
122 }
123 }
124 var maxDepth = (_maxBy$depth = (_maxBy = maxBy(tree, entry => entry.depth)) === null || _maxBy === void 0 ? void 0 : _maxBy.depth) !== null && _maxBy$depth !== void 0 ? _maxBy$depth : 0;
125 if (maxDepth >= 1) {
126 var childWidth = (width - nodeWidth) / maxDepth;
127 for (var _i = 0, _len = tree.length; _i < _len; _i++) {
128 var _node = tree[_i];
129 if (_node == null) {
130 continue;
131 }
132 if (!_node.targetNodes.length) {
133 if (align === 'justify') {
134 _node.depth = maxDepth;
135 }
136 }
137 _node.x = _node.depth * childWidth;
138 _node.dx = nodeWidth;
139 }
140 }
141 return {
142 tree,
143 maxDepth
144 };
145};
146var getDepthTree = tree => {
147 var result = [];
148 for (var i = 0, len = tree.length; i < len; i++) {
149 var _result$node$depth;
150 var node = tree[i];
151 if (node == null) {
152 continue;
153 }
154 if (!result[node.depth]) {
155 result[node.depth] = [];
156 }
157 (_result$node$depth = result[node.depth]) === null || _result$node$depth === void 0 || _result$node$depth.push(node);
158 }
159 return result;
160};
161var updateYOfTree = (depthTree, height, nodePadding, links, verticalAlign) => {
162 var yRatio = Math.min(...depthTree.map(nodes => (height - (nodes.length - 1) * nodePadding) / sumBy(nodes, getValue)));
163 for (var d = 0, maxDepth = depthTree.length; d < maxDepth; d++) {
164 var nodes = depthTree[d];
165 if (nodes == null) {
166 continue;
167 }
168 if (verticalAlign === 'top') {
169 var currentY = 0;
170 for (var i = 0, len = nodes.length; i < len; i++) {
171 var node = nodes[i];
172 if (node == null) {
173 continue;
174 }
175 node.dy = node.value * yRatio;
176 node.y = currentY;
177 currentY += node.dy + nodePadding;
178 }
179 } else {
180 for (var _i2 = 0, _len2 = nodes.length; _i2 < _len2; _i2++) {
181 var _node2 = nodes[_i2];
182 if (_node2 == null) {
183 continue;
184 }
185 _node2.y = _i2;
186 _node2.dy = _node2.value * yRatio;
187 }
188 }
189 }
190 return links.map(link => _objectSpread(_objectSpread({}, link), {}, {
191 dy: getValue(link) * yRatio
192 }));
193};
194var resolveCollisions = function resolveCollisions(depthTree, height, nodePadding) {
195 var sort = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
196 for (var i = 0, len = depthTree.length; i < len; i++) {
197 var nodes = depthTree[i];
198 if (nodes == null) {
199 continue;
200 }
201 var n = nodes.length;
202
203 // Sort by the value of y
204 if (sort) {
205 nodes.sort(ascendingY);
206 }
207 var y0 = 0;
208 for (var j = 0; j < n; j++) {
209 var node = nodes[j];
210 if (node == null) {
211 continue;
212 }
213 var dy = y0 - node.y;
214 if (dy > 0) {
215 node.y += dy;
216 }
217 y0 = node.y + node.dy + nodePadding;
218 }
219 y0 = height + nodePadding;
220 for (var _j = n - 1; _j >= 0; _j--) {
221 var _node3 = nodes[_j];
222 if (_node3 == null) {
223 continue;
224 }
225 var _dy = _node3.y + _node3.dy + nodePadding - y0;
226 if (_dy > 0) {
227 _node3.y -= _dy;
228 y0 = _node3.y;
229 } else {
230 break;
231 }
232 }
233 }
234};
235var relaxLeftToRight = (tree, depthTree, links, alpha) => {
236 for (var i = 0, maxDepth = depthTree.length; i < maxDepth; i++) {
237 var nodes = depthTree[i];
238 if (nodes == null) {
239 continue;
240 }
241 for (var j = 0, len = nodes.length; j < len; j++) {
242 var node = nodes[j];
243 if (node == null) {
244 continue;
245 }
246 if (node.sourceLinks.length) {
247 var sourceSum = getSumOfIds(links, node.sourceLinks);
248 var weightedSum = getSumWithWeightedSource(tree, links, node.sourceLinks);
249 var y = weightedSum / sourceSum;
250 node.y += (y - centerY(node)) * alpha;
251 }
252 }
253 }
254};
255var relaxRightToLeft = (tree, depthTree, links, alpha) => {
256 for (var i = depthTree.length - 1; i >= 0; i--) {
257 var nodes = depthTree[i];
258 if (nodes == null) {
259 continue;
260 }
261 for (var j = 0, len = nodes.length; j < len; j++) {
262 var node = nodes[j];
263 if (node == null) {
264 continue;
265 }
266 if (node.targetLinks.length) {
267 var targetSum = getSumOfIds(links, node.targetLinks);
268 var weightedSum = getSumWithWeightedTarget(tree, links, node.targetLinks);
269 var y = weightedSum / targetSum;
270 node.y += (y - centerY(node)) * alpha;
271 }
272 }
273 }
274};
275var updateYOfLinks = (tree, links) => {
276 for (var i = 0, len = tree.length; i < len; i++) {
277 var node = tree[i];
278 if (node == null) {
279 continue;
280 }
281 var sy = 0;
282 var ty = 0;
283 node.targetLinks.sort((a, b) => {
284 var _links$a, _links$b, _tree$targetA, _tree$targetB;
285 var targetA = (_links$a = links[a]) === null || _links$a === void 0 ? void 0 : _links$a.target;
286 var targetB = (_links$b = links[b]) === null || _links$b === void 0 ? void 0 : _links$b.target;
287 if (targetA == null || targetB == null) {
288 return 0;
289 }
290 var yA = (_tree$targetA = tree[targetA]) === null || _tree$targetA === void 0 ? void 0 : _tree$targetA.y;
291 var yB = (_tree$targetB = tree[targetB]) === null || _tree$targetB === void 0 ? void 0 : _tree$targetB.y;
292 if (yA == null || yB == null) {
293 return 0;
294 }
295 return yA - yB;
296 });
297 node.sourceLinks.sort((a, b) => {
298 var _links$a2, _links$b2, _tree$sourceA, _tree$sourceB;
299 var sourceA = (_links$a2 = links[a]) === null || _links$a2 === void 0 ? void 0 : _links$a2.source;
300 var sourceB = (_links$b2 = links[b]) === null || _links$b2 === void 0 ? void 0 : _links$b2.source;
301 if (sourceA == null || sourceB == null) {
302 return 0;
303 }
304 var yA = (_tree$sourceA = tree[sourceA]) === null || _tree$sourceA === void 0 ? void 0 : _tree$sourceA.y;
305 var yB = (_tree$sourceB = tree[sourceB]) === null || _tree$sourceB === void 0 ? void 0 : _tree$sourceB.y;
306 if (yA == null || yB == null) {
307 return 0;
308 }
309 return yA - yB;
310 });
311 for (var j = 0, tLen = node.targetLinks.length; j < tLen; j++) {
312 var targetLink = node.targetLinks[j];
313 if (targetLink == null) {
314 continue;
315 }
316 var link = links[targetLink];
317 if (link) {
318 // @ts-expect-error we should refactor this to immutable
319 link.sy = sy;
320 sy += link.dy;
321 }
322 }
323 for (var _j2 = 0, sLen = node.sourceLinks.length; _j2 < sLen; _j2++) {
324 var sourceLink = node.sourceLinks[_j2];
325 if (sourceLink == null) {
326 continue;
327 }
328 var _link = links[sourceLink];
329 if (_link) {
330 // @ts-expect-error we should refactor this to immutable
331 _link.ty = ty;
332 ty += _link.dy;
333 }
334 }
335 }
336};
337var computeData = _ref2 => {
338 var {
339 data,
340 width,
341 height,
342 iterations,
343 nodeWidth,
344 nodePadding,
345 sort,
346 verticalAlign,
347 align
348 } = _ref2;
349 var {
350 links
351 } = data;
352 var {
353 tree
354 } = getNodesTree(data, width, nodeWidth, align);
355 var depthTree = getDepthTree(tree);
356 var linksWithDy = updateYOfTree(depthTree, height, nodePadding, links, verticalAlign);
357 resolveCollisions(depthTree, height, nodePadding, sort);
358 if (verticalAlign === 'justify') {
359 var alpha = 1;
360 for (var i = 1; i <= iterations; i++) {
361 relaxRightToLeft(tree, depthTree, linksWithDy, alpha *= 0.99);
362 resolveCollisions(depthTree, height, nodePadding, sort);
363 relaxLeftToRight(tree, depthTree, linksWithDy, alpha);
364 resolveCollisions(depthTree, height, nodePadding, sort);
365 }
366 }
367 updateYOfLinks(tree, linksWithDy);
368 // @ts-expect-error updateYOfLinks modifies the links array to add sy and ty in place
369 var newLinks = linksWithDy;
370 return {
371 nodes: tree,
372 links: newLinks
373 };
374};
375var getNodeCoordinateOfTooltip = item => {
376 return {
377 x: +item.x + +item.width / 2,
378 y: +item.y + +item.height / 2
379 };
380};
381var getLinkCoordinateOfTooltip = item => {
382 return 'sourceX' in item ? {
383 x: (item.sourceX + item.targetX) / 2,
384 y: (item.sourceY + item.targetY) / 2
385 } : undefined;
386};
387var getPayloadOfTooltip = (item, type, nameKey) => {
388 var {
389 payload
390 } = item;
391 if (type === 'node') {
392 return {
393 payload,
394 name: getValueByDataKey(payload, nameKey, ''),
395 value: getValueByDataKey(payload, 'value')
396 };
397 }
398 if ('source' in payload && payload.source && payload.target) {
399 var sourceName = getValueByDataKey(payload.source, nameKey, '');
400 var targetName = getValueByDataKey(payload.target, nameKey, '');
401 return {
402 payload,
403 name: "".concat(sourceName, " - ").concat(targetName),
404 value: getValueByDataKey(payload, 'value')
405 };
406 }
407 return undefined;
408};
409export var sankeyPayloadSearcher = (_, activeIndex, computedData, nameKey) => {
410 if (activeIndex == null || typeof activeIndex !== 'string') {
411 return undefined;
412 }
413 if (computedData == null || typeof computedData !== 'object') {
414 return undefined;
415 }
416 var splitIndex = activeIndex.split('-');
417 var [targetType, index] = splitIndex;
418 var item = get(computedData, "".concat(targetType, "s[").concat(index, "]"));
419 if (item) {
420 var payload = getPayloadOfTooltip(item, targetType, nameKey);
421 return payload;
422 }
423 return undefined;
424};
425var options = {
426 chartName: 'Sankey',
427 defaultTooltipEventType: 'item',
428 validateTooltipEventTypes: ['item'],
429 tooltipPayloadSearcher: sankeyPayloadSearcher,
430 eventEmitter: undefined
431};
432var SetSankeyTooltipEntrySettings = /*#__PURE__*/React.memo(_ref3 => {
433 var {
434 dataKey,
435 nameKey,
436 stroke,
437 strokeWidth,
438 fill,
439 name,
440 data,
441 id
442 } = _ref3;
443 var tooltipEntrySettings = {
444 dataDefinedOnItem: data,
445 getPosition: noop,
446 settings: {
447 stroke,
448 strokeWidth,
449 fill,
450 dataKey,
451 name,
452 nameKey,
453 hide: false,
454 type: undefined,
455 color: fill,
456 unit: '',
457 graphicalItemId: id
458 }
459 };
460 return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
461 tooltipEntrySettings: tooltipEntrySettings
462 });
463});
464
465// TODO: improve types - NodeOptions uses SankeyNode, LinkOptions uses LinkProps. Standardize.
466
467function renderLinkItem(option, props) {
468 if (/*#__PURE__*/React.isValidElement(option)) {
469 return /*#__PURE__*/React.cloneElement(option, props);
470 }
471 if (typeof option === 'function') {
472 return option(props);
473 }
474 var {
475 sourceX,
476 sourceY,
477 sourceControlX,
478 targetX,
479 targetY,
480 targetControlX,
481 linkWidth
482 } = props,
483 others = _objectWithoutProperties(props, _excluded);
484 return /*#__PURE__*/React.createElement("path", _extends({
485 className: "recharts-sankey-link",
486 d: "\n M".concat(sourceX, ",").concat(sourceY, "\n C").concat(sourceControlX, ",").concat(sourceY, " ").concat(targetControlX, ",").concat(targetY, " ").concat(targetX, ",").concat(targetY, "\n "),
487 fill: "none",
488 stroke: "#333",
489 strokeWidth: linkWidth,
490 strokeOpacity: "0.2"
491 }, svgPropertiesNoEvents(others)));
492}
493var buildLinkProps = _ref4 => {
494 var {
495 link,
496 nodes,
497 left,
498 top,
499 i,
500 linkContent,
501 linkCurvature
502 } = _ref4;
503 var {
504 sy: sourceRelativeY,
505 ty: targetRelativeY,
506 dy: linkWidth
507 } = link;
508 var sourceNode = nodes[link.source];
509 var targetNode = nodes[link.target];
510 if (sourceNode == null || targetNode == null) {
511 return undefined;
512 }
513 var sourceX = sourceNode.x + sourceNode.dx + left;
514 var targetX = targetNode.x + left;
515 var interpolationFunc = interpolationGenerator(sourceX, targetX);
516 var sourceControlX = interpolationFunc(linkCurvature);
517 var targetControlX = interpolationFunc(1 - linkCurvature);
518 var sourceY = sourceNode.y + sourceRelativeY + linkWidth / 2 + top;
519 var targetY = targetNode.y + targetRelativeY + linkWidth / 2 + top;
520 var linkProps = _objectSpread({
521 sourceX,
522 // @ts-expect-error the linkContent from below is contributing unknown props
523 targetX,
524 sourceY,
525 // @ts-expect-error the linkContent from below is contributing unknown props
526 targetY,
527 sourceControlX,
528 targetControlX,
529 sourceRelativeY,
530 targetRelativeY,
531 linkWidth,
532 index: i,
533 payload: _objectSpread(_objectSpread({}, link), {}, {
534 source: sourceNode,
535 target: targetNode
536 })
537 }, svgPropertiesNoEventsFromUnknown(linkContent));
538 return linkProps;
539};
540function SankeyLinkElement(_ref5) {
541 var {
542 graphicalItemId,
543 props,
544 i,
545 linkContent,
546 onMouseEnter: _onMouseEnter,
547 onMouseLeave: _onMouseLeave,
548 onClick: _onClick,
549 dataKey
550 } = _ref5;
551 var activeCoordinate = getLinkCoordinateOfTooltip(props);
552 var activeIndex = "link-".concat(i);
553 var dispatch = useAppDispatch();
554 var events = {
555 onMouseEnter: e => {
556 dispatch(setActiveMouseOverItemIndex({
557 activeIndex,
558 activeDataKey: dataKey,
559 activeCoordinate,
560 activeGraphicalItemId: graphicalItemId
561 }));
562 _onMouseEnter(props, e);
563 },
564 onMouseLeave: e => {
565 dispatch(mouseLeaveItem());
566 _onMouseLeave(props, e);
567 },
568 onClick: e => {
569 dispatch(setActiveClickItemIndex({
570 activeIndex,
571 activeDataKey: dataKey,
572 activeCoordinate,
573 activeGraphicalItemId: graphicalItemId
574 }));
575 _onClick(props, e);
576 }
577 };
578 return /*#__PURE__*/React.createElement(Layer, events, renderLinkItem(linkContent, props));
579}
580function AllSankeyLinkElements(_ref6) {
581 var {
582 graphicalItemId,
583 modifiedLinks,
584 links,
585 linkContent,
586 onMouseEnter,
587 onMouseLeave,
588 onClick,
589 dataKey
590 } = _ref6;
591 return /*#__PURE__*/React.createElement(Layer, {
592 className: "recharts-sankey-links",
593 key: "recharts-sankey-links"
594 }, links.map((link, i) => {
595 var linkProps = modifiedLinks[i];
596 if (linkProps == null) {
597 return null;
598 }
599 return /*#__PURE__*/React.createElement(SankeyLinkElement, {
600 graphicalItemId: graphicalItemId,
601 key: "link-".concat(link.source, "-").concat(link.target, "-").concat(link.value),
602 props: linkProps,
603 linkContent: linkContent,
604 i: i,
605 onMouseEnter: onMouseEnter,
606 onMouseLeave: onMouseLeave,
607 onClick: onClick,
608 dataKey: dataKey
609 });
610 }));
611}
612function renderNodeItem(option, props) {
613 if (/*#__PURE__*/React.isValidElement(option)) {
614 return /*#__PURE__*/React.cloneElement(option, props);
615 }
616 if (typeof option === 'function') {
617 return option(props);
618 }
619 return (
620 /*#__PURE__*/
621 // @ts-expect-error recharts radius is not compatible with SVG radius
622 React.createElement(Rectangle, _extends({
623 className: "recharts-sankey-node",
624 fill: "#0088fe",
625 fillOpacity: "0.8"
626 }, svgPropertiesNoEvents(props)))
627 );
628}
629var buildNodeProps = _ref7 => {
630 var {
631 node,
632 nodeContent,
633 top,
634 left,
635 i
636 } = _ref7;
637 var {
638 x,
639 y,
640 dx,
641 dy
642 } = node;
643 // @ts-expect-error nodeContent is passing in unknown props
644 var nodeProps = _objectSpread(_objectSpread({}, svgPropertiesNoEventsFromUnknown(nodeContent)), {}, {
645 x: x + left,
646 y: y + top,
647 width: dx,
648 height: dy,
649 index: i,
650 payload: node
651 });
652 return nodeProps;
653};
654function NodeElement(_ref8) {
655 var {
656 graphicalItemId,
657 props,
658 nodeContent,
659 i,
660 onMouseEnter: _onMouseEnter2,
661 onMouseLeave: _onMouseLeave2,
662 onClick: _onClick2,
663 dataKey
664 } = _ref8;
665 var dispatch = useAppDispatch();
666 var activeCoordinate = getNodeCoordinateOfTooltip(props);
667 var activeIndex = "node-".concat(i);
668 var events = {
669 onMouseEnter: e => {
670 dispatch(setActiveMouseOverItemIndex({
671 activeIndex,
672 activeDataKey: dataKey,
673 activeCoordinate,
674 activeGraphicalItemId: graphicalItemId
675 }));
676 _onMouseEnter2(props, e);
677 },
678 onMouseLeave: e => {
679 dispatch(mouseLeaveItem());
680 _onMouseLeave2(props, e);
681 },
682 onClick: e => {
683 dispatch(setActiveClickItemIndex({
684 activeIndex,
685 activeDataKey: dataKey,
686 activeCoordinate,
687 activeGraphicalItemId: graphicalItemId
688 }));
689 _onClick2(props, e);
690 }
691 };
692 return /*#__PURE__*/React.createElement(Layer, events, renderNodeItem(nodeContent, props));
693}
694function AllNodeElements(_ref9) {
695 var {
696 graphicalItemId,
697 modifiedNodes,
698 nodeContent,
699 onMouseEnter,
700 onMouseLeave,
701 onClick,
702 dataKey
703 } = _ref9;
704 return /*#__PURE__*/React.createElement(Layer, {
705 className: "recharts-sankey-nodes",
706 key: "recharts-sankey-nodes"
707 }, modifiedNodes.map((modifiedNode, i) => {
708 return /*#__PURE__*/React.createElement(NodeElement, {
709 graphicalItemId: graphicalItemId,
710 key: "node-".concat(modifiedNode.index, "-").concat(modifiedNode.x, "-").concat(modifiedNode.y),
711 props: modifiedNode,
712 nodeContent: nodeContent,
713 i: i,
714 onMouseEnter: onMouseEnter,
715 onMouseLeave: onMouseLeave,
716 onClick: onClick,
717 dataKey: dataKey
718 });
719 }));
720}
721export var sankeyDefaultProps = {
722 align: 'justify',
723 dataKey: 'value',
724 iterations: 32,
725 linkCurvature: 0.5,
726 margin: {
727 top: 5,
728 right: 5,
729 bottom: 5,
730 left: 5
731 },
732 nameKey: 'name',
733 nodePadding: 10,
734 nodeWidth: 10,
735 sort: true,
736 verticalAlign: 'justify'
737};
738function SankeyImpl(props) {
739 var {
740 className,
741 style,
742 children,
743 id
744 } = props,
745 others = _objectWithoutProperties(props, _excluded2);
746 var {
747 link,
748 dataKey,
749 node,
750 onMouseEnter,
751 onMouseLeave,
752 onClick,
753 data,
754 iterations,
755 nodeWidth,
756 nodePadding,
757 sort,
758 linkCurvature,
759 margin,
760 verticalAlign,
761 align
762 } = props;
763 var attrs = svgPropertiesNoEvents(others);
764 var width = useChartWidth();
765 var height = useChartHeight();
766 var {
767 links,
768 modifiedLinks,
769 modifiedNodes
770 } = useMemo(() => {
771 var _margin$left, _margin$right, _margin$top, _margin$bottom;
772 if (!data || !width || !height || width <= 0 || height <= 0) {
773 return {
774 nodes: [],
775 links: [],
776 modifiedLinks: [],
777 modifiedNodes: []
778 };
779 }
780 var contentWidth = width - ((_margin$left = margin.left) !== null && _margin$left !== void 0 ? _margin$left : 0) - ((_margin$right = margin.right) !== null && _margin$right !== void 0 ? _margin$right : 0);
781 var contentHeight = height - ((_margin$top = margin.top) !== null && _margin$top !== void 0 ? _margin$top : 0) - ((_margin$bottom = margin.bottom) !== null && _margin$bottom !== void 0 ? _margin$bottom : 0);
782 var computed = computeData({
783 data,
784 width: contentWidth,
785 height: contentHeight,
786 iterations,
787 nodeWidth,
788 nodePadding,
789 sort,
790 verticalAlign,
791 align
792 });
793 var top = margin.top || 0;
794 var left = margin.left || 0;
795 var newModifiedLinks = computed.links.map((l, i) => {
796 return buildLinkProps({
797 link: l,
798 nodes: computed.nodes,
799 i,
800 top,
801 left,
802 linkContent: link,
803 linkCurvature
804 });
805 }).filter(isNotNil);
806 var newModifiedNodes = computed.nodes.map((n, i) => {
807 return buildNodeProps({
808 node: n,
809 nodeContent: node,
810 i,
811 top,
812 left
813 });
814 });
815 return {
816 nodes: computed.nodes,
817 links: computed.links,
818 modifiedLinks: newModifiedLinks,
819 modifiedNodes: newModifiedNodes
820 };
821 }, [data, width, height, margin, iterations, nodeWidth, nodePadding, sort, link, node, linkCurvature, align, verticalAlign]);
822 var handleMouseEnter = useCallback((item, type, e) => {
823 if (onMouseEnter) {
824 onMouseEnter(item, type, e);
825 }
826 }, [onMouseEnter]);
827 var handleMouseLeave = useCallback((item, type, e) => {
828 if (onMouseLeave) {
829 onMouseLeave(item, type, e);
830 }
831 }, [onMouseLeave]);
832 var handleClick = useCallback((item, type, e) => {
833 if (onClick) {
834 onClick(item, type, e);
835 }
836 }, [onClick]);
837 if (!isPositiveNumber(width) || !isPositiveNumber(height) || !data || !data.links || !data.nodes) {
838 return null;
839 }
840 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetComputedData, {
841 computedData: {
842 links: modifiedLinks,
843 nodes: modifiedNodes
844 }
845 }), /*#__PURE__*/React.createElement(Surface, _extends({}, attrs, {
846 width: width,
847 height: height
848 }), children, /*#__PURE__*/React.createElement(AllSankeyLinkElements, {
849 graphicalItemId: id,
850 links: links,
851 modifiedLinks: modifiedLinks,
852 linkContent: link,
853 dataKey: dataKey,
854 onMouseEnter: (linkProps, e) => handleMouseEnter(linkProps, 'link', e),
855 onMouseLeave: (linkProps, e) => handleMouseLeave(linkProps, 'link', e),
856 onClick: (linkProps, e) => handleClick(linkProps, 'link', e)
857 }), /*#__PURE__*/React.createElement(AllNodeElements, {
858 graphicalItemId: id,
859 modifiedNodes: modifiedNodes,
860 nodeContent: node,
861 dataKey: dataKey,
862 onMouseEnter: (nodeProps, e) => handleMouseEnter(nodeProps, 'node', e),
863 onMouseLeave: (nodeProps, e) => handleMouseLeave(nodeProps, 'node', e),
864 onClick: (nodeProps, e) => handleClick(nodeProps, 'node', e)
865 })));
866}
867
868/**
869 * Flow diagram in which the width of the arrows is proportional to the flow rate.
870 * It is typically used to visualize energy or material or cost transfers between processes.
871 *
872 * @consumes ResponsiveContainerContext
873 * @provides TooltipEntrySettings
874 */
875export function Sankey(outsideProps) {
876 var props = resolveDefaultProps(outsideProps, sankeyDefaultProps);
877 var {
878 width,
879 height,
880 style,
881 className,
882 id: externalId
883 } = props;
884 var [tooltipPortal, setTooltipPortal] = useState(null);
885 return /*#__PURE__*/React.createElement(RechartsStoreProvider, {
886 preloadedState: {
887 options
888 },
889 reduxStoreName: className !== null && className !== void 0 ? className : 'Sankey'
890 }, /*#__PURE__*/React.createElement(ReportChartSize, {
891 width: width,
892 height: height
893 }), /*#__PURE__*/React.createElement(ReportChartMargin, {
894 margin: props.margin
895 }), /*#__PURE__*/React.createElement(RechartsWrapper, {
896 className: className,
897 style: style,
898 width: width,
899 height: height
900 /*
901 * Sankey, same as Treemap, suffers from overfilling the container
902 * and causing infinite render loops where the chart keeps growing.
903 */,
904 responsive: false,
905 ref: node => {
906 if (node && !tooltipPortal) {
907 setTooltipPortal(node);
908 }
909 },
910 onMouseEnter: undefined,
911 onMouseLeave: undefined,
912 onClick: undefined,
913 onMouseMove: undefined,
914 onMouseDown: undefined,
915 onMouseUp: undefined,
916 onContextMenu: undefined,
917 onDoubleClick: undefined,
918 onTouchStart: undefined,
919 onTouchMove: undefined,
920 onTouchEnd: undefined
921 }, /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, {
922 value: tooltipPortal
923 }, /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
924 id: externalId,
925 type: "sankey"
926 }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetSankeyTooltipEntrySettings, {
927 dataKey: props.dataKey,
928 nameKey: props.nameKey,
929 stroke: props.stroke,
930 strokeWidth: props.strokeWidth,
931 fill: props.fill,
932 name: props.name,
933 data: props.data,
934 id: id
935 }), /*#__PURE__*/React.createElement(SankeyImpl, _extends({}, props, {
936 id: id
937 })))))));
938}
939Sankey.displayName = 'Sankey';
Note: See TracBrowser for help on using the repository browser.