@dfnivo/sankey
Version:
<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
272 lines (271 loc) • 15.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Sankey", {
enumerable: true,
get: function() {
return Sankey;
}
});
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
var _lodashEs = require("lodash-es");
var _core = require("@dfnivo/core");
var _container = require("@dfnivo/container");
var _legends = require("@dfnivo/legends");
var _props = require("./props");
var _hooks = require("./hooks");
var _sankeyNodes = require("./SankeyNodes");
var _sankeyLinks = require("./SankeyLinks");
var _sankeyLabels = require("./SankeyLabels");
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectSpread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpreadProps(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var InnerSankey = function(param) {
var data = param.data, valueFormat = param.valueFormat, _param_layout = param.layout, layout = _param_layout === void 0 ? _props.svgDefaultProps.layout : _param_layout, _param_sort = param.sort, sort = _param_sort === void 0 ? _props.svgDefaultProps.sort : _param_sort, _param_align = param.align, align = _param_align === void 0 ? _props.svgDefaultProps.align : _param_align, width = param.width, height = param.height, partialMargin = param.margin, _param_colors = param.colors, colors = _param_colors === void 0 ? _props.svgDefaultProps.colors : _param_colors, _param_nodeThickness = param.nodeThickness, nodeThickness = _param_nodeThickness === void 0 ? _props.svgDefaultProps.nodeThickness : _param_nodeThickness, _param_nodeSpacing = param.nodeSpacing, nodeSpacing = _param_nodeSpacing === void 0 ? _props.svgDefaultProps.nodeThickness : _param_nodeSpacing, _param_nodeInnerPadding = param.nodeInnerPadding, nodeInnerPadding = _param_nodeInnerPadding === void 0 ? _props.svgDefaultProps.nodeInnerPadding : _param_nodeInnerPadding, _param_nodeBorderColor = param.nodeBorderColor, nodeBorderColor = _param_nodeBorderColor === void 0 ? _props.svgDefaultProps.nodeBorderColor : _param_nodeBorderColor, _param_nodeOpacity = param.nodeOpacity, nodeOpacity = _param_nodeOpacity === void 0 ? _props.svgDefaultProps.nodeOpacity : _param_nodeOpacity, _param_nodeHoverOpacity = param.nodeHoverOpacity, nodeHoverOpacity = _param_nodeHoverOpacity === void 0 ? _props.svgDefaultProps.nodeHoverOpacity : _param_nodeHoverOpacity, _param_nodeHoverOthersOpacity = param.nodeHoverOthersOpacity, nodeHoverOthersOpacity = _param_nodeHoverOthersOpacity === void 0 ? _props.svgDefaultProps.nodeHoverOthersOpacity : _param_nodeHoverOthersOpacity, _param_nodeBorderWidth = param.nodeBorderWidth, nodeBorderWidth = _param_nodeBorderWidth === void 0 ? _props.svgDefaultProps.nodeBorderWidth : _param_nodeBorderWidth, _param_nodeBorderRadius = param.nodeBorderRadius, nodeBorderRadius = _param_nodeBorderRadius === void 0 ? _props.svgDefaultProps.nodeBorderRadius : _param_nodeBorderRadius, _param_linkOpacity = param.linkOpacity, linkOpacity = _param_linkOpacity === void 0 ? _props.svgDefaultProps.linkOpacity : _param_linkOpacity, _param_linkHoverOpacity = param.linkHoverOpacity, linkHoverOpacity = _param_linkHoverOpacity === void 0 ? _props.svgDefaultProps.linkHoverOpacity : _param_linkHoverOpacity, _param_linkHoverOthersOpacity = param.linkHoverOthersOpacity, linkHoverOthersOpacity = _param_linkHoverOthersOpacity === void 0 ? _props.svgDefaultProps.linkHoverOthersOpacity : _param_linkHoverOthersOpacity, _param_linkContract = param.linkContract, linkContract = _param_linkContract === void 0 ? _props.svgDefaultProps.linkContract : _param_linkContract, _param_linkBlendMode = param.linkBlendMode, linkBlendMode = _param_linkBlendMode === void 0 ? _props.svgDefaultProps.linkBlendMode : _param_linkBlendMode, _param_enableLinkGradient = param.enableLinkGradient, enableLinkGradient = _param_enableLinkGradient === void 0 ? _props.svgDefaultProps.enableLinkGradient : _param_enableLinkGradient, _param_enableLabels = param.enableLabels, enableLabels = _param_enableLabels === void 0 ? _props.svgDefaultProps.enableLabels : _param_enableLabels, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? _props.svgDefaultProps.labelPosition : _param_labelPosition, _param_labelPadding = param.labelPadding, labelPadding = _param_labelPadding === void 0 ? _props.svgDefaultProps.labelPadding : _param_labelPadding, _param_labelOrientation = param.labelOrientation, labelOrientation = _param_labelOrientation === void 0 ? _props.svgDefaultProps.labelOrientation : _param_labelOrientation, _param_label = param.label, label = _param_label === void 0 ? _props.svgDefaultProps.label : _param_label, _param_labelTextColor = param.labelTextColor, labelTextColor = _param_labelTextColor === void 0 ? _props.svgDefaultProps.labelTextColor : _param_labelTextColor, _param_nodeTooltip = param.nodeTooltip, nodeTooltip = _param_nodeTooltip === void 0 ? _props.svgDefaultProps.nodeTooltip : _param_nodeTooltip, _param_linkTooltip = param.linkTooltip, linkTooltip = _param_linkTooltip === void 0 ? _props.svgDefaultProps.linkTooltip : _param_linkTooltip, _param_isInteractive = param.isInteractive, isInteractive = _param_isInteractive === void 0 ? _props.svgDefaultProps.isInteractive : _param_isInteractive, onClick = param.onClick, _param_legends = param.legends, legends = _param_legends === void 0 ? _props.svgDefaultProps.legends : _param_legends, _param_layers = param.layers, layers = _param_layers === void 0 ? _props.svgDefaultProps.layers : _param_layers, _param_role = param.role, role = _param_role === void 0 ? _props.svgDefaultProps.role : _param_role, ariaLabel = param.ariaLabel, ariaLabelledBy = param.ariaLabelledBy, ariaDescribedBy = param.ariaDescribedBy;
var _useDimensions = (0, _core.useDimensions)(width, height, partialMargin), margin = _useDimensions.margin, innerWidth = _useDimensions.innerWidth, innerHeight = _useDimensions.innerHeight, outerWidth = _useDimensions.outerWidth, outerHeight = _useDimensions.outerHeight;
var _useSankey = (0, _hooks.useSankey)({
data: data,
valueFormat: valueFormat,
layout: layout,
width: innerWidth,
height: innerHeight,
sort: sort,
align: align,
colors: colors,
nodeThickness: nodeThickness,
nodeSpacing: nodeSpacing,
nodeInnerPadding: nodeInnerPadding,
nodeBorderColor: nodeBorderColor,
label: label,
labelTextColor: labelTextColor
}), nodes = _useSankey.nodes, links = _useSankey.links, legendData = _useSankey.legendData, getNodeBorderColor = _useSankey.getNodeBorderColor, currentNode = _useSankey.currentNode, setCurrentNode = _useSankey.setCurrentNode, currentLink = _useSankey.currentLink, setCurrentLink = _useSankey.setCurrentLink, getLabelTextColor = _useSankey.getLabelTextColor;
var isCurrentNode = function() {
return false;
};
var isCurrentLink = function() {
return false;
};
if (currentLink) {
isCurrentNode = function(param) {
var id = param.id;
return id === currentLink.source.id || id === currentLink.target.id;
};
isCurrentLink = function(param) {
var source = param.source, target = param.target;
return source.id === currentLink.source.id && target.id === currentLink.target.id;
};
}
if (currentNode) {
var currentNodeIds = [
currentNode.id
];
links.filter(function(param) {
var source = param.source, target = param.target;
return source.id === currentNode.id || target.id === currentNode.id;
}).forEach(function(param) {
var source = param.source, target = param.target;
currentNodeIds.push(source.id);
currentNodeIds.push(target.id);
});
currentNodeIds = (0, _lodashEs.uniq)(currentNodeIds);
isCurrentNode = function(param) {
var id = param.id;
return currentNodeIds.includes(id);
};
isCurrentLink = function(param) {
var source = param.source, target = param.target;
return source.id === currentNode.id || target.id === currentNode.id;
};
}
var layerProps = {
links: links,
nodes: nodes,
margin: margin,
width: width,
height: height,
outerWidth: outerWidth,
outerHeight: outerHeight
};
var layerById = {
links: null,
nodes: null,
labels: null,
legends: null
};
if (layers.includes("links")) {
layerById.links = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_sankeyLinks.SankeyLinks, {
links: links,
layout: layout,
linkContract: linkContract,
linkOpacity: linkOpacity,
linkHoverOpacity: linkHoverOpacity,
linkHoverOthersOpacity: linkHoverOthersOpacity,
linkBlendMode: linkBlendMode,
enableLinkGradient: enableLinkGradient,
setCurrentLink: setCurrentLink,
currentNode: currentNode,
currentLink: currentLink,
isCurrentLink: isCurrentLink,
isInteractive: isInteractive,
onClick: onClick,
tooltip: linkTooltip
}, "links");
}
if (layers.includes("nodes")) {
layerById.nodes = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_sankeyNodes.SankeyNodes, {
nodes: nodes,
nodeOpacity: nodeOpacity,
nodeHoverOpacity: nodeHoverOpacity,
nodeHoverOthersOpacity: nodeHoverOthersOpacity,
borderWidth: nodeBorderWidth,
borderRadius: nodeBorderRadius,
getBorderColor: getNodeBorderColor,
setCurrentNode: setCurrentNode,
currentNode: currentNode,
currentLink: currentLink,
isCurrentNode: isCurrentNode,
isInteractive: isInteractive,
onClick: onClick,
tooltip: nodeTooltip
}, "nodes");
}
if (layers.includes("labels") && enableLabels) {
layerById.labels = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_sankeyLabels.SankeyLabels, {
nodes: nodes,
layout: layout,
width: innerWidth,
height: innerHeight,
labelPosition: labelPosition,
labelPadding: labelPadding,
labelOrientation: labelOrientation,
getLabelTextColor: getLabelTextColor
}, "labels");
}
if (layers.includes("legends")) {
layerById.legends = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_react.Fragment, {
children: legends.map(function(legend, i) {
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legends.BoxLegendSvg, _objectSpreadProps(_objectSpread({}, legend), {
containerWidth: innerWidth,
containerHeight: innerHeight,
data: legendData
}), "legend".concat(i));
})
}, "legends");
}
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.SvgWrapper, {
width: outerWidth,
height: outerHeight,
margin: margin,
role: role,
ariaLabel: ariaLabel,
ariaLabelledBy: ariaLabelledBy,
ariaDescribedBy: ariaDescribedBy,
children: layers.map(function(layer, i) {
if (typeof layer === "function") {
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_react.Fragment, {
children: /*#__PURE__*/ (0, _react.createElement)(layer, layerProps)
}, i);
}
var _layerById_layer;
return (_layerById_layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById_layer !== void 0 ? _layerById_layer : null;
})
});
};
var Sankey = function(_param) /*#__PURE__*/ {
var _param_isInteractive = _param.isInteractive, isInteractive = _param_isInteractive === void 0 ? _props.svgDefaultProps.isInteractive : _param_isInteractive, _param_animate = _param.animate, animate = _param_animate === void 0 ? _props.svgDefaultProps.animate : _param_animate, _param_motionConfig = _param.motionConfig, motionConfig = _param_motionConfig === void 0 ? _props.svgDefaultProps.motionConfig : _param_motionConfig, theme = _param.theme, renderWrapper = _param.renderWrapper, otherProps = _objectWithoutProperties(_param, [
"isInteractive",
"animate",
"motionConfig",
"theme",
"renderWrapper"
]);
return (0, _jsxRuntime.jsx)(_container.Container, {
animate: animate,
isInteractive: isInteractive,
motionConfig: motionConfig,
renderWrapper: renderWrapper,
theme: theme,
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(InnerSankey, _objectSpread({
isInteractive: isInteractive
}, otherProps))
});
};
//# sourceMappingURL=Sankey.js.map