recharts
Version:
React charts
1,052 lines (1,044 loc) • 39.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Sankey = Sankey;
exports.sankeyPayloadSearcher = exports.sankeyDefaultProps = exports.computeData = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _maxBy2 = _interopRequireDefault(require("es-toolkit/compat/maxBy"));
var _sumBy = _interopRequireDefault(require("es-toolkit/compat/sumBy"));
var _get = _interopRequireDefault(require("es-toolkit/compat/get"));
var _Surface = require("../container/Surface");
var _Layer = require("../container/Layer");
var _Rectangle = require("../shape/Rectangle");
var _ChartUtils = require("../util/ChartUtils");
var _chartLayoutContext = require("../context/chartLayoutContext");
var _tooltipPortalContext = require("../context/tooltipPortalContext");
var _RechartsWrapper = require("./RechartsWrapper");
var _RechartsStoreProvider = require("../state/RechartsStoreProvider");
var _hooks = require("../state/hooks");
var _tooltipSlice = require("../state/tooltipSlice");
var _SetTooltipEntrySettings = require("../state/SetTooltipEntrySettings");
var _ReportEventSettings = require("../state/ReportEventSettings");
var _chartDataContext = require("../context/chartDataContext");
var _svgPropertiesNoEvents = require("../util/svgPropertiesNoEvents");
var _resolveDefaultProps = require("../util/resolveDefaultProps");
var _isWellBehavedNumber = require("../util/isWellBehavedNumber");
var _DataUtils = require("../util/DataUtils");
var _RegisterGraphicalItemId = require("../context/RegisterGraphicalItemId");
var _eventSettingsSlice = require("../state/eventSettingsSlice");
var _excluded = ["sourceX", "sourceY", "sourceControlX", "targetX", "targetY", "targetControlX", "linkWidth"],
_excluded2 = ["className", "style", "children", "id"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _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); }
function _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; }
function _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; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
var interpolationGenerator = (a, b) => {
var ka = +a;
var kb = b - ka;
return animationElapsedTime => ka + kb * animationElapsedTime;
};
var centerY = node => node.y + node.dy / 2;
var cubicValue = (start, control1, control2, end, t) => {
var inverseT = 1 - t;
return inverseT ** 3 * start + 3 * inverseT ** 2 * t * control1 + 3 * inverseT * t ** 2 * control2 + t ** 3 * end;
};
// TODO why is this not reading dataKey?
var getValue = entry => entry && entry.value || 0;
var getSumOfIds = (links, ids) => ids.reduce((result, id) => result + getValue(links[id]), 0);
var getSumWithWeightedSource = (tree, links, ids) => ids.reduce((result, id) => {
var link = links[id];
if (link == null) {
return result;
}
var sourceNode = tree[link.source];
if (sourceNode == null) {
return result;
}
return result + centerY(sourceNode) * getValue(links[id]);
}, 0);
var getSumWithWeightedTarget = (tree, links, ids) => ids.reduce((result, id) => {
var link = links[id];
if (link == null) {
return result;
}
var targetNode = tree[link.target];
if (targetNode == null) {
return result;
}
return result + centerY(targetNode) * getValue(links[id]);
}, 0);
var ascendingY = (a, b) => a.y - b.y;
var searchTargetsAndSources = (links, id) => {
var sourceNodes = [];
var sourceLinks = [];
var targetNodes = [];
var targetLinks = [];
for (var i = 0, len = links.length; i < len; i++) {
var link = links[i];
if ((link === null || link === void 0 ? void 0 : link.source) === id) {
targetNodes.push(link.target);
targetLinks.push(i);
}
if ((link === null || link === void 0 ? void 0 : link.target) === id) {
sourceNodes.push(link.source);
sourceLinks.push(i);
}
}
return {
sourceNodes,
sourceLinks,
targetLinks,
targetNodes
};
};
var updateDepthOfTargets = (tree, curNode) => {
var targetNodes = curNode.targetNodes;
for (var i = 0, len = targetNodes.length; i < len; i++) {
var targetNode = targetNodes[i];
if (targetNode == null) {
continue;
}
var target = tree[targetNode];
if (target) {
var newDepth = curNode.depth + 1;
/*
* Only recurse when the depth grows. Depth is the longest path to a node, so once it stops increasing
* the subtree is already up to date; without this guard every path through the graph is walked
* separately, which explodes combinatorially on dense graphs.
*/
if (newDepth > target.depth) {
target.depth = newDepth;
updateDepthOfTargets(tree, target);
}
}
}
};
var getNodesTree = (_ref, width, nodeWidth, align) => {
var _maxBy$depth, _maxBy;
var nodes = _ref.nodes,
links = _ref.links;
var tree = nodes.map((entry, index) => {
var result = searchTargetsAndSources(links, index);
return _objectSpread(_objectSpread(_objectSpread({}, entry), result), {}, {
value: Math.max(getSumOfIds(links, result.sourceLinks), getSumOfIds(links, result.targetLinks)),
depth: 0
});
});
for (var i = 0, len = tree.length; i < len; i++) {
var node = tree[i];
if (node != null && !node.sourceNodes.length) {
updateDepthOfTargets(tree, node);
}
}
var maxDepth = (_maxBy$depth = (_maxBy = (0, _maxBy2.default)(tree, entry => entry.depth)) === null || _maxBy === void 0 ? void 0 : _maxBy.depth) !== null && _maxBy$depth !== void 0 ? _maxBy$depth : 0;
if (maxDepth >= 1) {
var childWidth = (width - nodeWidth) / maxDepth;
for (var _i = 0, _len = tree.length; _i < _len; _i++) {
var _node = tree[_i];
if (_node == null) {
continue;
}
if (!_node.targetNodes.length) {
if (align === 'justify') {
_node.depth = maxDepth;
}
}
_node.x = _node.depth * childWidth;
_node.dx = nodeWidth;
}
}
return {
tree,
maxDepth
};
};
var getDepthTree = tree => {
var result = [];
for (var i = 0, len = tree.length; i < len; i++) {
var _result$node$depth;
var node = tree[i];
if (node == null) {
continue;
}
if (!result[node.depth]) {
result[node.depth] = [];
}
(_result$node$depth = result[node.depth]) === null || _result$node$depth === void 0 || _result$node$depth.push(node);
}
return result;
};
var updateYOfTree = (depthTree, height, nodePadding, links, verticalAlign) => {
var yRatio = Math.min(...depthTree.map(nodes => {
var value = (0, _sumBy.default)(nodes, getValue);
return value === 0 ? Infinity : (height - (nodes.length - 1) * nodePadding) / value;
}));
if (yRatio === Infinity) {
yRatio = 0;
}
for (var d = 0, maxDepth = depthTree.length; d < maxDepth; d++) {
var nodes = depthTree[d];
if (nodes == null) {
continue;
}
if (verticalAlign === 'top') {
var currentY = 0;
for (var i = 0, len = nodes.length; i < len; i++) {
var node = nodes[i];
if (node == null) {
continue;
}
node.dy = node.value * yRatio;
node.y = currentY;
currentY += node.dy + nodePadding;
}
} else {
for (var _i2 = 0, _len2 = nodes.length; _i2 < _len2; _i2++) {
var _node2 = nodes[_i2];
if (_node2 == null) {
continue;
}
_node2.y = _i2;
_node2.dy = _node2.value * yRatio;
}
}
}
return links.map(link => _objectSpread(_objectSpread({}, link), {}, {
dy: getValue(link) * yRatio
}));
};
var resolveCollisions = function resolveCollisions(depthTree, height, nodePadding) {
var sort = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
for (var i = 0, len = depthTree.length; i < len; i++) {
var nodes = depthTree[i];
if (nodes == null) {
continue;
}
var n = nodes.length;
// Sort by the value of y
if (sort) {
nodes.sort(ascendingY);
}
var y0 = 0;
for (var j = 0; j < n; j++) {
var node = nodes[j];
if (node == null) {
continue;
}
var dy = y0 - node.y;
if (dy > 0) {
node.y += dy;
}
y0 = node.y + node.dy + nodePadding;
}
y0 = height + nodePadding;
for (var _j = n - 1; _j >= 0; _j--) {
var _node3 = nodes[_j];
if (_node3 == null) {
continue;
}
var _dy = _node3.y + _node3.dy + nodePadding - y0;
if (_dy > 0) {
_node3.y -= _dy;
y0 = _node3.y;
} else {
break;
}
}
}
};
var relaxLeftToRight = (tree, depthTree, links, alpha) => {
for (var i = 0, maxDepth = depthTree.length; i < maxDepth; i++) {
var nodes = depthTree[i];
if (nodes == null) {
continue;
}
for (var j = 0, len = nodes.length; j < len; j++) {
var node = nodes[j];
if (node == null) {
continue;
}
if (node.sourceLinks.length) {
var sourceSum = getSumOfIds(links, node.sourceLinks);
var weightedSum = getSumWithWeightedSource(tree, links, node.sourceLinks);
var y = sourceSum === 0 ? centerY(node) : weightedSum / sourceSum;
node.y += (y - centerY(node)) * alpha;
}
}
}
};
var relaxRightToLeft = (tree, depthTree, links, alpha) => {
for (var i = depthTree.length - 1; i >= 0; i--) {
var nodes = depthTree[i];
if (nodes == null) {
continue;
}
for (var j = 0, len = nodes.length; j < len; j++) {
var node = nodes[j];
if (node == null) {
continue;
}
if (node.targetLinks.length) {
var targetSum = getSumOfIds(links, node.targetLinks);
var weightedSum = getSumWithWeightedTarget(tree, links, node.targetLinks);
var y = targetSum === 0 ? centerY(node) : weightedSum / targetSum;
node.y += (y - centerY(node)) * alpha;
}
}
}
};
var updateYOfLinks = (tree, links) => {
for (var i = 0, len = tree.length; i < len; i++) {
var node = tree[i];
if (node == null) {
continue;
}
var sy = 0;
var ty = 0;
node.targetLinks.sort((a, b) => {
var _links$a, _links$b, _tree$targetA, _tree$targetB;
var targetA = (_links$a = links[a]) === null || _links$a === void 0 ? void 0 : _links$a.target;
var targetB = (_links$b = links[b]) === null || _links$b === void 0 ? void 0 : _links$b.target;
if (targetA == null || targetB == null) {
return 0;
}
var yA = (_tree$targetA = tree[targetA]) === null || _tree$targetA === void 0 ? void 0 : _tree$targetA.y;
var yB = (_tree$targetB = tree[targetB]) === null || _tree$targetB === void 0 ? void 0 : _tree$targetB.y;
if (yA == null || yB == null) {
return 0;
}
return yA - yB;
});
node.sourceLinks.sort((a, b) => {
var _links$a2, _links$b2, _tree$sourceA, _tree$sourceB;
var sourceA = (_links$a2 = links[a]) === null || _links$a2 === void 0 ? void 0 : _links$a2.source;
var sourceB = (_links$b2 = links[b]) === null || _links$b2 === void 0 ? void 0 : _links$b2.source;
if (sourceA == null || sourceB == null) {
return 0;
}
var yA = (_tree$sourceA = tree[sourceA]) === null || _tree$sourceA === void 0 ? void 0 : _tree$sourceA.y;
var yB = (_tree$sourceB = tree[sourceB]) === null || _tree$sourceB === void 0 ? void 0 : _tree$sourceB.y;
if (yA == null || yB == null) {
return 0;
}
return yA - yB;
});
for (var j = 0, tLen = node.targetLinks.length; j < tLen; j++) {
var targetLink = node.targetLinks[j];
if (targetLink == null) {
continue;
}
var link = links[targetLink];
if (link) {
link.sy = sy;
sy += link.dy;
}
}
for (var _j2 = 0, sLen = node.sourceLinks.length; _j2 < sLen; _j2++) {
var sourceLink = node.sourceLinks[_j2];
if (sourceLink == null) {
continue;
}
var _link = links[sourceLink];
if (_link) {
_link.ty = ty;
ty += _link.dy;
}
}
}
};
var getLinkYAtX = (sourceNode, targetNode, link, x) => {
var _link$sy, _link$ty;
var sourceX = sourceNode.x + sourceNode.dx;
var targetX = targetNode.x;
var progress = targetX === sourceX ? 0 : (x - sourceX) / (targetX - sourceX);
var boundedProgress = Math.min(Math.max(progress, 0), 1);
var sourceY = sourceNode.y + ((_link$sy = link.sy) !== null && _link$sy !== void 0 ? _link$sy : 0) + link.dy / 2;
var targetY = targetNode.y + ((_link$ty = link.ty) !== null && _link$ty !== void 0 ? _link$ty : 0) + link.dy / 2;
return cubicValue(sourceY, sourceY, targetY, targetY, boundedProgress);
};
var resolveNodeLinkCollisions = (tree, depthTree, links, height, nodePadding) => {
var depthByNode = new Map();
for (var depth = 0; depth < depthTree.length; depth++) {
var nodes = depthTree[depth];
if (nodes == null) {
continue;
}
for (var node of nodes) {
depthByNode.set(node, depth);
}
}
var _loop = function _loop(_depth) {
var nodes = depthTree[_depth];
if (nodes == null || nodes.length === 0) {
return 0; // continue
}
var depthX = nodes[0] == null ? undefined : nodes[0].x + nodes[0].dx / 2;
if (depthX == null) {
return 0; // continue
}
var fixedObstacles = links.flatMap(link => {
var sourceNode = tree[link.source];
var targetNode = tree[link.target];
if (sourceNode == null || targetNode == null) {
return [];
}
var sourceDepth = depthByNode.get(sourceNode);
var targetDepth = depthByNode.get(targetNode);
if (sourceDepth == null || targetDepth == null) {
return [];
}
if (_depth <= Math.min(sourceDepth, targetDepth) || _depth >= Math.max(sourceDepth, targetDepth)) {
return [];
}
var y = getLinkYAtX(sourceNode, targetNode, link, depthX) - link.dy / 2;
return [{
y,
dy: link.dy,
fixed: true
}];
});
var containedNodeObstacles = fixedObstacles.filter(obstacle => nodes.some(node => node.y >= obstacle.y && node.y + node.dy <= obstacle.y + obstacle.dy));
if (containedNodeObstacles.length === 0) {
return 0; // continue
}
var getItemY = item => item.fixed ? item.y : item.node.y;
var getItemHeight = item => item.fixed ? item.dy : item.node.dy;
var items = [...nodes.map(node => ({
node,
fixed: false
})), ...containedNodeObstacles].sort((a, b) => getItemY(a) - getItemY(b));
var nextY = 0;
for (var item of items) {
if (item.fixed) {
nextY = Math.max(nextY, item.y + item.dy + nodePadding);
continue;
}
if (item.node.y < nextY) {
item.node.y = nextY;
}
nextY = item.node.y + item.node.dy + nodePadding;
}
items = items.sort((a, b) => getItemY(a) - getItemY(b));
var previousY = height + nodePadding;
for (var i = items.length - 1; i >= 0; i--) {
var _item = items[i];
if (_item == null) {
continue;
}
if (_item.fixed) {
previousY = Math.min(previousY, _item.y - nodePadding);
continue;
}
// This backward pass only keeps moved nodes within the chart bounds.
// It intentionally does not iterate again against fixed obstacles above,
// because this fix is scoped to the fully-contained skipped-depth case.
var dy = _item.node.y + getItemHeight(_item) + nodePadding - previousY;
if (dy > 0) {
_item.node.y -= dy;
}
previousY = _item.node.y;
}
},
_ret;
for (var _depth = 0; _depth < depthTree.length; _depth++) {
_ret = _loop(_depth);
if (_ret === 0) continue;
}
};
var computeData = _ref2 => {
var data = _ref2.data,
width = _ref2.width,
height = _ref2.height,
iterations = _ref2.iterations,
nodeWidth = _ref2.nodeWidth,
nodePadding = _ref2.nodePadding,
sort = _ref2.sort,
verticalAlign = _ref2.verticalAlign,
align = _ref2.align;
var links = data.links;
var _getNodesTree = getNodesTree(data, width, nodeWidth, align),
tree = _getNodesTree.tree;
var depthTree = getDepthTree(tree);
var linksWithDy = updateYOfTree(depthTree, height, nodePadding, links, verticalAlign);
resolveCollisions(depthTree, height, nodePadding, sort);
if (verticalAlign === 'justify') {
var alpha = 1;
for (var i = 1; i <= iterations; i++) {
relaxRightToLeft(tree, depthTree, linksWithDy, alpha *= 0.99);
resolveCollisions(depthTree, height, nodePadding, sort);
relaxLeftToRight(tree, depthTree, linksWithDy, alpha);
resolveCollisions(depthTree, height, nodePadding, sort);
}
}
updateYOfLinks(tree, linksWithDy);
resolveNodeLinkCollisions(tree, depthTree, linksWithDy, height, nodePadding);
updateYOfLinks(tree, linksWithDy);
// @ts-expect-error updateYOfLinks modifies the links array to add sy and ty in place
var newLinks = linksWithDy;
return {
nodes: tree,
links: newLinks
};
};
exports.computeData = computeData;
var getNodeCoordinateOfTooltip = item => {
return {
x: +item.x + +item.width / 2,
y: +item.y + +item.height / 2
};
};
var getLinkCoordinateOfTooltip = item => {
return 'sourceX' in item ? {
x: (item.sourceX + item.targetX) / 2,
y: (item.sourceY + item.targetY) / 2
} : undefined;
};
var getPayloadOfTooltip = (item, type, nameKey) => {
var payload = item.payload;
if (type === 'node') {
return {
payload,
name: (0, _ChartUtils.getValueByDataKey)(payload, nameKey, ''),
value: (0, _ChartUtils.getValueByDataKey)(payload, 'value')
};
}
if ('source' in payload && payload.source && payload.target) {
// @ts-expect-error we're sending number indexes as source and target, but getValueByDataKey expects objects
var sourceName = (0, _ChartUtils.getValueByDataKey)(payload.source, nameKey, '');
// @ts-expect-error we're sending number indexes as source and target, but getValueByDataKey expects objects
var targetName = (0, _ChartUtils.getValueByDataKey)(payload.target, nameKey, '');
return {
payload,
name: "".concat(sourceName, " - ").concat(targetName),
value: (0, _ChartUtils.getValueByDataKey)(payload, 'value')
};
}
return undefined;
};
var sankeyPayloadSearcher = (_, activeIndex, computedData, nameKey) => {
if (activeIndex == null || typeof activeIndex !== 'string') {
return undefined;
}
if (computedData == null || typeof computedData !== 'object') {
return undefined;
}
var splitIndex = activeIndex.split('-');
var _splitIndex = _slicedToArray(splitIndex, 2),
targetType = _splitIndex[0],
index = _splitIndex[1];
var item = (0, _get.default)(computedData, "".concat(targetType, "s[").concat(index, "]"));
if (item) {
// @ts-expect-error nameKey type does not match SankeyElementType
var payload = getPayloadOfTooltip(item, targetType, nameKey);
return payload;
}
return undefined;
};
exports.sankeyPayloadSearcher = sankeyPayloadSearcher;
var options = {
chartName: 'Sankey',
defaultTooltipEventType: 'item',
validateTooltipEventTypes: ['item'],
tooltipPayloadSearcher: sankeyPayloadSearcher,
eventEmitter: undefined
};
var SetSankeyTooltipEntrySettings = /*#__PURE__*/React.memo(_ref3 => {
var dataKey = _ref3.dataKey,
nameKey = _ref3.nameKey,
stroke = _ref3.stroke,
strokeWidth = _ref3.strokeWidth,
fill = _ref3.fill,
name = _ref3.name,
data = _ref3.data,
id = _ref3.id;
var tooltipEntrySettings = {
dataDefinedOnItem: data,
getPosition: _DataUtils.noop,
settings: {
stroke,
strokeWidth,
fill,
dataKey,
name,
nameKey,
hide: false,
type: undefined,
color: fill,
unit: '',
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(_SetTooltipEntrySettings.SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
// TODO: improve types - NodeOptions uses SankeyNode, LinkOptions uses LinkProps. Standardize.
function renderLinkItem(option, props) {
if (/*#__PURE__*/React.isValidElement(option)) {
return /*#__PURE__*/React.cloneElement(option, props);
}
if (typeof option === 'function') {
return option(props);
}
var sourceX = props.sourceX,
sourceY = props.sourceY,
sourceControlX = props.sourceControlX,
targetX = props.targetX,
targetY = props.targetY,
targetControlX = props.targetControlX,
linkWidth = props.linkWidth,
others = _objectWithoutProperties(props, _excluded);
return /*#__PURE__*/React.createElement("path", _extends({
className: "recharts-sankey-link",
d: "\n M".concat(sourceX, ",").concat(sourceY, "\n C").concat(sourceControlX, ",").concat(sourceY, " ").concat(targetControlX, ",").concat(targetY, " ").concat(targetX, ",").concat(targetY, "\n "),
fill: "none",
stroke: "#333",
strokeWidth: linkWidth,
strokeOpacity: "0.2"
}, (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(others)));
}
var buildLinkProps = _ref4 => {
var link = _ref4.link,
nodes = _ref4.nodes,
left = _ref4.left,
top = _ref4.top,
i = _ref4.i,
linkContent = _ref4.linkContent,
linkCurvature = _ref4.linkCurvature;
var sourceRelativeY = link.sy,
targetRelativeY = link.ty,
linkWidth = link.dy;
var sourceNode = nodes[link.source];
var targetNode = nodes[link.target];
if (sourceNode == null || targetNode == null) {
return undefined;
}
var sourceX = sourceNode.x + sourceNode.dx + left;
var targetX = targetNode.x + left;
var interpolationFunc = interpolationGenerator(sourceX, targetX);
var sourceControlX = interpolationFunc(linkCurvature);
var targetControlX = interpolationFunc(1 - linkCurvature);
var sourceY = sourceNode.y + sourceRelativeY + linkWidth / 2 + top;
var targetY = targetNode.y + targetRelativeY + linkWidth / 2 + top;
var linkProps = _objectSpread({
sourceX,
// @ts-expect-error the linkContent from below is contributing unknown props
targetX,
sourceY,
// @ts-expect-error the linkContent from below is contributing unknown props
targetY,
sourceControlX,
targetControlX,
sourceRelativeY,
targetRelativeY,
linkWidth,
index: i,
payload: _objectSpread(_objectSpread({}, link), {}, {
source: sourceNode,
target: targetNode
})
}, (0, _svgPropertiesNoEvents.svgPropertiesNoEventsFromUnknown)(linkContent));
return linkProps;
};
function SankeyLinkElement(_ref5) {
var graphicalItemId = _ref5.graphicalItemId,
props = _ref5.props,
i = _ref5.i,
linkContent = _ref5.linkContent,
_onMouseEnter = _ref5.onMouseEnter,
_onMouseLeave = _ref5.onMouseLeave,
_onClick = _ref5.onClick,
dataKey = _ref5.dataKey;
var activeCoordinate = getLinkCoordinateOfTooltip(props);
var activeIndex = "link-".concat(i);
var dispatch = (0, _hooks.useAppDispatch)();
var events = {
onMouseEnter: e => {
dispatch((0, _tooltipSlice.setActiveMouseOverItemIndex)({
activeIndex,
activeDataKey: dataKey,
activeCoordinate,
activeGraphicalItemId: graphicalItemId
}));
_onMouseEnter(props, e);
},
onMouseLeave: e => {
dispatch((0, _tooltipSlice.mouseLeaveItem)());
_onMouseLeave(props, e);
},
onClick: e => {
dispatch((0, _tooltipSlice.setActiveClickItemIndex)({
activeIndex,
activeDataKey: dataKey,
activeCoordinate,
activeGraphicalItemId: graphicalItemId
}));
_onClick(props, e);
}
};
return /*#__PURE__*/React.createElement(_Layer.Layer, events, renderLinkItem(linkContent, props));
}
function AllSankeyLinkElements(_ref6) {
var graphicalItemId = _ref6.graphicalItemId,
modifiedLinks = _ref6.modifiedLinks,
links = _ref6.links,
linkContent = _ref6.linkContent,
onMouseEnter = _ref6.onMouseEnter,
onMouseLeave = _ref6.onMouseLeave,
onClick = _ref6.onClick,
dataKey = _ref6.dataKey;
return /*#__PURE__*/React.createElement(_Layer.Layer, {
className: "recharts-sankey-links",
key: "recharts-sankey-links"
}, links.map((link, i) => {
var linkProps = modifiedLinks[i];
if (linkProps == null) {
return null;
}
return /*#__PURE__*/React.createElement(SankeyLinkElement, {
graphicalItemId: graphicalItemId,
key: "link-".concat(link.source, "-").concat(link.target, "-").concat(link.value),
props: linkProps,
linkContent: linkContent,
i: i,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick,
dataKey: dataKey
});
}));
}
function renderNodeItem(option, props) {
if (/*#__PURE__*/React.isValidElement(option)) {
return /*#__PURE__*/React.cloneElement(option, props);
}
if (typeof option === 'function') {
return option(props);
}
return (
/*#__PURE__*/
// @ts-expect-error recharts radius is not compatible with SVG radius
React.createElement(_Rectangle.Rectangle, _extends({
className: "recharts-sankey-node",
fill: "#0088fe",
fillOpacity: "0.8"
}, (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(props)))
);
}
var buildNodeProps = _ref7 => {
var node = _ref7.node,
nodeContent = _ref7.nodeContent,
top = _ref7.top,
left = _ref7.left,
i = _ref7.i;
var x = node.x,
y = node.y,
dx = node.dx,
dy = node.dy;
// @ts-expect-error nodeContent is passing in unknown props
var nodeProps = _objectSpread(_objectSpread({}, (0, _svgPropertiesNoEvents.svgPropertiesNoEventsFromUnknown)(nodeContent)), {}, {
x: x + left,
y: y + top,
width: dx,
height: dy,
index: i,
payload: node
});
return nodeProps;
};
function NodeElement(_ref8) {
var graphicalItemId = _ref8.graphicalItemId,
props = _ref8.props,
nodeContent = _ref8.nodeContent,
i = _ref8.i,
_onMouseEnter2 = _ref8.onMouseEnter,
_onMouseLeave2 = _ref8.onMouseLeave,
_onClick2 = _ref8.onClick,
dataKey = _ref8.dataKey;
var dispatch = (0, _hooks.useAppDispatch)();
var activeCoordinate = getNodeCoordinateOfTooltip(props);
var activeIndex = "node-".concat(i);
var events = {
onMouseEnter: e => {
dispatch((0, _tooltipSlice.setActiveMouseOverItemIndex)({
activeIndex,
activeDataKey: dataKey,
activeCoordinate,
activeGraphicalItemId: graphicalItemId
}));
_onMouseEnter2(props, e);
},
onMouseLeave: e => {
dispatch((0, _tooltipSlice.mouseLeaveItem)());
_onMouseLeave2(props, e);
},
onClick: e => {
dispatch((0, _tooltipSlice.setActiveClickItemIndex)({
activeIndex,
activeDataKey: dataKey,
activeCoordinate,
activeGraphicalItemId: graphicalItemId
}));
_onClick2(props, e);
}
};
return /*#__PURE__*/React.createElement(_Layer.Layer, events, renderNodeItem(nodeContent, props));
}
function AllNodeElements(_ref9) {
var graphicalItemId = _ref9.graphicalItemId,
modifiedNodes = _ref9.modifiedNodes,
nodeContent = _ref9.nodeContent,
onMouseEnter = _ref9.onMouseEnter,
onMouseLeave = _ref9.onMouseLeave,
onClick = _ref9.onClick,
dataKey = _ref9.dataKey;
return /*#__PURE__*/React.createElement(_Layer.Layer, {
className: "recharts-sankey-nodes",
key: "recharts-sankey-nodes"
}, modifiedNodes.map((modifiedNode, i) => {
return /*#__PURE__*/React.createElement(NodeElement, {
graphicalItemId: graphicalItemId,
key: "node-".concat(modifiedNode.index, "-").concat(modifiedNode.x, "-").concat(modifiedNode.y),
props: modifiedNode,
nodeContent: nodeContent,
i: i,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick,
dataKey: dataKey
});
}));
}
var sankeyDefaultProps = exports.sankeyDefaultProps = _objectSpread({
align: 'justify',
dataKey: 'value',
iterations: 32,
linkCurvature: 0.5,
margin: {
top: 5,
right: 5,
bottom: 5,
left: 5
},
nameKey: 'name',
nodePadding: 10,
nodeWidth: 10,
sort: true,
verticalAlign: 'justify'
}, _eventSettingsSlice.initialEventSettingsState);
function SankeyImpl(props) {
var className = props.className,
style = props.style,
children = props.children,
id = props.id,
others = _objectWithoutProperties(props, _excluded2);
var link = props.link,
dataKey = props.dataKey,
node = props.node,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave,
onClick = props.onClick,
data = props.data,
iterations = props.iterations,
nodeWidth = props.nodeWidth,
nodePadding = props.nodePadding,
sort = props.sort,
linkCurvature = props.linkCurvature,
margin = props.margin,
verticalAlign = props.verticalAlign,
align = props.align;
var attrs = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(others);
var width = (0, _chartLayoutContext.useChartWidth)();
var height = (0, _chartLayoutContext.useChartHeight)();
var _useMemo = (0, _react.useMemo)(() => {
var _margin$left, _margin$right, _margin$top, _margin$bottom;
if (!data || !width || !height || width <= 0 || height <= 0) {
return {
nodes: [],
links: [],
modifiedLinks: [],
modifiedNodes: []
};
}
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);
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);
var computed = computeData({
data,
width: contentWidth,
height: contentHeight,
iterations,
nodeWidth,
nodePadding,
sort,
verticalAlign,
align
});
var top = margin.top || 0;
var left = margin.left || 0;
var newModifiedLinks = computed.links.map((l, i) => {
return buildLinkProps({
link: l,
nodes: computed.nodes,
i,
top,
left,
linkContent: link,
linkCurvature
});
}).filter(_DataUtils.isNotNil);
var newModifiedNodes = computed.nodes.map((n, i) => {
return buildNodeProps({
node: n,
nodeContent: node,
i,
top,
left
});
});
return {
nodes: computed.nodes,
links: computed.links,
modifiedLinks: newModifiedLinks,
modifiedNodes: newModifiedNodes
};
}, [data, width, height, margin, iterations, nodeWidth, nodePadding, sort, link, node, linkCurvature, align, verticalAlign]),
links = _useMemo.links,
modifiedLinks = _useMemo.modifiedLinks,
modifiedNodes = _useMemo.modifiedNodes;
var handleMouseEnter = (0, _react.useCallback)((item, type, e) => {
if (onMouseEnter) {
onMouseEnter(item, type, e);
}
}, [onMouseEnter]);
var handleMouseLeave = (0, _react.useCallback)((item, type, e) => {
if (onMouseLeave) {
onMouseLeave(item, type, e);
}
}, [onMouseLeave]);
var handleClick = (0, _react.useCallback)((item, type, e) => {
if (onClick) {
onClick(item, type, e);
}
}, [onClick]);
if (!(0, _isWellBehavedNumber.isPositiveNumber)(width) || !(0, _isWellBehavedNumber.isPositiveNumber)(height) || !data || !data.links || !data.nodes) {
return null;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_chartDataContext.SetComputedData, {
computedData: {
links: modifiedLinks,
nodes: modifiedNodes
}
}), /*#__PURE__*/React.createElement(_Surface.Surface, _extends({}, attrs, {
width: width,
height: height
}), children, /*#__PURE__*/React.createElement(AllSankeyLinkElements, {
graphicalItemId: id,
links: links,
modifiedLinks: modifiedLinks,
linkContent: link,
dataKey: dataKey,
onMouseEnter: (linkProps, e) => handleMouseEnter(linkProps, 'link', e),
onMouseLeave: (linkProps, e) => handleMouseLeave(linkProps, 'link', e),
onClick: (linkProps, e) => handleClick(linkProps, 'link', e)
}), /*#__PURE__*/React.createElement(AllNodeElements, {
graphicalItemId: id,
modifiedNodes: modifiedNodes,
nodeContent: node,
dataKey: dataKey,
onMouseEnter: (nodeProps, e) => handleMouseEnter(nodeProps, 'node', e),
onMouseLeave: (nodeProps, e) => handleMouseLeave(nodeProps, 'node', e),
onClick: (nodeProps, e) => handleClick(nodeProps, 'node', e)
})));
}
/**
* Flow diagram in which the width of the arrows is proportional to the flow rate.
* It is typically used to visualize energy or material or cost transfers between processes.
*
* @consumes ResponsiveContainerContext
* @provides TooltipEntrySettings
*/
function Sankey(outsideProps) {
var props = (0, _resolveDefaultProps.resolveDefaultProps)(outsideProps, sankeyDefaultProps);
var width = props.width,
height = props.height,
style = props.style,
className = props.className,
externalId = props.id,
throttleDelay = props.throttleDelay,
throttledEvents = props.throttledEvents;
var _useState = (0, _react.useState)(null),
_useState2 = _slicedToArray(_useState, 2),
tooltipPortal = _useState2[0],
setTooltipPortal = _useState2[1];
return /*#__PURE__*/React.createElement(_RechartsStoreProvider.RechartsStoreProvider, {
preloadedState: {
options
},
reduxStoreName: className !== null && className !== void 0 ? className : 'Sankey'
}, /*#__PURE__*/React.createElement(_chartLayoutContext.ReportChartSize, {
width: width,
height: height
}), /*#__PURE__*/React.createElement(_chartLayoutContext.ReportChartMargin, {
margin: props.margin
}), /*#__PURE__*/React.createElement(_ReportEventSettings.ReportEventSettings, {
throttleDelay: throttleDelay,
throttledEvents: throttledEvents
}), /*#__PURE__*/React.createElement(_RechartsWrapper.RechartsWrapper, {
className: className,
style: style,
width: width,
height: height
/*
* Sankey, same as Treemap, suffers from overfilling the container
* and causing infinite render loops where the chart keeps growing.
*/,
responsive: false,
ref: node => {
if (node && !tooltipPortal) {
setTooltipPortal(node);
}
},
onMouseEnter: undefined,
onMouseLeave: undefined,
onClick: undefined,
onMouseMove: undefined,
onMouseDown: undefined,
onMouseUp: undefined,
onContextMenu: undefined,
onDoubleClick: undefined,
onTouchStart: undefined,
onTouchMove: undefined,
onTouchEnd: undefined
}, /*#__PURE__*/React.createElement(_tooltipPortalContext.TooltipPortalContext.Provider, {
value: tooltipPortal
}, /*#__PURE__*/React.createElement(_RegisterGraphicalItemId.RegisterGraphicalItemId, {
id: externalId,
type: "sankey"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetSankeyTooltipEntrySettings, {
dataKey: props.dataKey,
nameKey: props.nameKey,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
data: props.data,
id: id
}), /*#__PURE__*/React.createElement(SankeyImpl, _extends({}, props, {
id: id
})))))));
}
Sankey.displayName = 'Sankey';