@nivo/sankey - npm Package Compare versions

Comparing version 0.71.0 to 0.72.0

dist/nivo-sankey.cjs.js

@@ -8,4 +8,3 @@ 'use strict';
 var _uniq = _interopDefault(require('lodash/uniq'));
-var React = require('react');
-var React__default = _interopDefault(React);
+var react = require('react');
 var core = require('@nivo/core');
@@ -19,2 +18,3 @@ var legends = require('@nivo/legends');
 var tooltip = require('@nivo/tooltip');
+var jsxRuntime = require('react/jsx-runtime');
 var d3Shape = require('d3-shape');
@@ -203,3 +203,3 @@
   if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
@@ -231,3 +231,2 @@ }
       getColor = _ref.getColor,
-      getLinkColor = _ref.getLinkColor,
       getLabel = _ref.getLabel;
@@ -259,3 +258,3 @@ var sankey = d3Sankey.sankey().nodeAlign(alignFunction).nodeSort(sortFunction).linkSort(linkSortMode).nodeWidth(nodeThickness).nodePadding(nodeSpacing).size(layout === 'horizontal' ? [width, height] : [height, width]).nodeId(getId);
   data.links.forEach(function (link) {
-    link.color = getLinkColor(link);
+    link.color = link.source.color;
     link.pos0 = link.y0;
@@ -285,11 +284,11 @@ link.pos1 = link.y1;
       labelTextColor = _ref2.labelTextColor;
-  var _useState = React.useState(null),
+  var _useState = react.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       currentNode = _useState2[0],
       setCurrentNode = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = react.useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
       currentLink = _useState4[0],
       setCurrentLink = _useState4[1];
-  var sortFunction = React.useMemo(function () {
+  var sortFunction = react.useMemo(function () {
     if (sort === 'auto') return undefined;
@@ -306,3 +305,3 @@ if (sort === 'input') return null;
   var linkSortMode = sort === 'input' ? null : undefined;
-  var alignFunction = React.useMemo(function () {
+  var alignFunction = react.useMemo(function () {
     return sankeyAlignmentFromProp(align);
@@ -313,8 +312,7 @@ }, [align]);
   var getNodeBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
-  var getLinkColor = colors.useOrdinalColorScale(colors$1, 'source.id');
-  var getLabel = React.useMemo(function () {
+  var getLabel = react.useMemo(function () {
     return core.getLabelGenerator(label, labelFormat);
   }, [label, labelFormat]);
   var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
-  var _useMemo = React.useMemo(function () {
+  var _useMemo = react.useMemo(function () {
     return computeNodeAndLinks({
@@ -332,9 +330,8 @@ data: data,
       getColor: getColor,
-      getLinkColor: getLinkColor,
       getLabel: getLabel
     });
-  }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLinkColor, getLabel]),
+  }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
       nodes = _useMemo.nodes,
       links = _useMemo.links;
-  var legendData = React.useMemo(function () {
+  var legendData = react.useMemo(function () {
     return nodes.map(function (node) {
@@ -391,5 +388,5 @@ return {
       hideTooltip = _useTooltip.hideTooltip;
-  var tooltipContent = React.useMemo(function () {
+  var tooltipContent = react.useMemo(function () {
     if (tooltip$1) {
-      return React__default.createElement(tooltip.BasicTooltip, {
+      return jsxRuntime.jsx(tooltip.BasicTooltip, {
         id: tooltip$1(node),
@@ -399,3 +396,3 @@ enableChip: false
     }
-    return React__default.createElement(tooltip.BasicTooltip, {
+    return jsxRuntime.jsx(tooltip.BasicTooltip, {
       id: node.label,
@@ -406,17 +403,17 @@ enableChip: true,
   }, [tooltip$1, node]);
-  var handleMouseEnter = React.useCallback(function (event) {
+  var handleMouseEnter = react.useCallback(function (event) {
     setCurrent(node);
     showTooltipFromEvent(tooltipContent, event, 'left');
   }, [setCurrent, node, showTooltipFromEvent, tooltipContent]);
-  var handleMouseMove = React.useCallback(function (event) {
+  var handleMouseMove = react.useCallback(function (event) {
     showTooltipFromEvent(tooltipContent, event, 'left');
   }, [showTooltipFromEvent, tooltipContent]);
-  var handleMouseLeave = React.useCallback(function () {
+  var handleMouseLeave = react.useCallback(function () {
     setCurrent(null);
     hideTooltip();
   }, [setCurrent, hideTooltip]);
-  var handleClick = React.useCallback(function (event) {
+  var handleClick = react.useCallback(function (event) {
     onClick(node, event);
   }, [onClick, node]);
-  return React__default.createElement(web.animated.rect, {
+  return jsxRuntime.jsx(web.animated.rect, {
     x: animatedProps.x,
@@ -441,3 +438,3 @@ y: animatedProps.y,
 };
-var SankeyNodesItem$1 = React.memo(SankeyNodesItem);
+var SankeyNodesItem$1 = react.memo(SankeyNodesItem);
 
@@ -464,4 +461,3 @@ var SankeyNodes = function SankeyNodes(_ref) {
   return nodes.map(function (node) {
-    return React__default.createElement(SankeyNodesItem$1, {
-      key: node.id,
+    return jsxRuntime.jsx(SankeyNodesItem$1, {
       node: node,
@@ -480,8 +476,8 @@ x: node.x,
       tooltip: tooltip
-    });
+    }, node.id);
   });
 };
-var SankeyNodes$1 = React.memo(SankeyNodes);
+var SankeyNodes$1 = react.memo(SankeyNodes);
 
-var SankeyLinkGradient = React.memo(function (_ref) {
+var SankeyLinkGradient = react.memo(function (_ref) {
   var id = _ref.id,
@@ -503,11 +499,13 @@ layout = _ref.layout,
   }
-  return React__default.createElement("linearGradient", Object.assign({
+  return jsxRuntime.jsxs("linearGradient", _objectSpread2(_objectSpread2({
     id: id,
     spreadMethod: "pad"
-  }, gradientProps), React__default.createElement("stop", {
-    offset: "0%",
-    stopColor: startColor
-  }), React__default.createElement("stop", {
-    offset: "100%",
-    stopColor: endColor
+  }, gradientProps), {}, {
+    children: [jsxRuntime.jsx("stop", {
+      offset: "0%",
+      stopColor: startColor
+    }), jsxRuntime.jsx("stop", {
+      offset: "100%",
+      stopColor: endColor
+    })]
   }));
@@ -533,11 +531,18 @@ });
       format = _ref.format;
-  return React__default.createElement("span", {
-    style: tooltipStyles.container
-  }, React__default.createElement(tooltip.Chip, {
-    color: link.source.color,
-    style: tooltipStyles.sourceChip
-  }), React__default.createElement("strong", null, link.source.label), ' > ', React__default.createElement("strong", null, link.target.label), React__default.createElement(tooltip.Chip, {
-    color: link.target.color,
-    style: tooltipStyles.targetChip
-  }), React__default.createElement("strong", null, format ? format(link.value) : link.value));
+  return jsxRuntime.jsxs("span", {
+    style: tooltipStyles.container,
+    children: [jsxRuntime.jsx(tooltip.Chip, {
+      color: link.source.color,
+      style: tooltipStyles.sourceChip
+    }), jsxRuntime.jsx("strong", {
+      children: link.source.label
+    }), ' > ', jsxRuntime.jsx("strong", {
+      children: link.target.label
+    }), jsxRuntime.jsx(tooltip.Chip, {
+      color: link.target.color,
+      style: tooltipStyles.targetChip
+    }), jsxRuntime.jsx("strong", {
+      children: format ? format(link.value) : link.value
+    })]
+  });
 };
@@ -571,5 +576,5 @@ var SankeyLinksItem = function SankeyLinksItem(_ref2) {
       hideTooltip = _useTooltip.hideTooltip;
-  var tooltipContent = React.useMemo(function () {
+  var tooltipContent = react.useMemo(function () {
     if (tooltip$1) {
-      return React__default.createElement(tooltip.BasicTooltip, {
+      return jsxRuntime.jsx(tooltip.BasicTooltip, {
         id: tooltip$1(link),
@@ -579,4 +584,4 @@ enableChip: false
     }
-    return React__default.createElement(tooltip.BasicTooltip, {
-      id: React__default.createElement(TooltipContent, {
+    return jsxRuntime.jsx(tooltip.BasicTooltip, {
+      id: jsxRuntime.jsx(TooltipContent, {
         format: tooltipFormat,
@@ -587,35 +592,37 @@ link: link
   }, [tooltip$1, tooltipFormat, link]);
-  var handleMouseEnter = React.useCallback(function (event) {
+  var handleMouseEnter = react.useCallback(function (event) {
     setCurrent(link);
     showTooltipFromEvent(tooltipContent, event, 'left');
   }, [setCurrent, link, showTooltipFromEvent, tooltipContent]);
-  var handleMouseMove = React.useCallback(function (event) {
+  var handleMouseMove = react.useCallback(function (event) {
     showTooltipFromEvent(tooltipContent, event, 'left');
   }, [showTooltipFromEvent, tooltipContent]);
-  var handleMouseLeave = React.useCallback(function () {
+  var handleMouseLeave = react.useCallback(function () {
     setCurrent(null);
     hideTooltip();
   }, [setCurrent, hideTooltip]);
-  var handleClick = React.useCallback(function (event) {
+  var handleClick = react.useCallback(function (event) {
     onClick(link, event);
   }, [onClick, link]);
-  return React__default.createElement(React__default.Fragment, null, enableGradient && React__default.createElement(SankeyLinkGradient, {
-    id: linkId,
-    layout: layout,
-    startColor: link.startColor || link.source.color,
-    endColor: link.endColor || link.target.color
-  }), React__default.createElement(web.animated.path, {
-    fill: enableGradient ? "url(\"#".concat(encodeURI(linkId), "\")") : animatedProps.color,
-    d: animatedPath,
-    fillOpacity: animatedProps.opacity,
-    onMouseEnter: isInteractive ? handleMouseEnter : undefined,
-    onMouseMove: isInteractive ? handleMouseMove : undefined,
-    onMouseLeave: isInteractive ? handleMouseLeave : undefined,
-    onClick: isInteractive ? handleClick : undefined,
-    style: {
-      mixBlendMode: blendMode
-    }
-  }));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [enableGradient && jsxRuntime.jsx(SankeyLinkGradient, {
+      id: linkId,
+      layout: layout,
+      startColor: link.startColor || link.source.color,
+      endColor: link.endColor || link.target.color
+    }), jsxRuntime.jsx(web.animated.path, {
+      fill: enableGradient ? "url(\"#".concat(encodeURI(linkId), "\")") : animatedProps.color,
+      d: animatedPath,
+      fillOpacity: animatedProps.opacity,
+      onMouseEnter: isInteractive ? handleMouseEnter : undefined,
+      onMouseMove: isInteractive ? handleMouseMove : undefined,
+      onMouseLeave: isInteractive ? handleMouseLeave : undefined,
+      onClick: isInteractive ? handleClick : undefined,
+      style: {
+        mixBlendMode: blendMode
+      }
+    })]
+  });
 };
-var SankeyLinksItem$1 = React.memo(SankeyLinksItem);
+var SankeyLinksItem$1 = react.memo(SankeyLinksItem);
 
@@ -669,4 +676,3 @@ var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
   return links.map(function (link) {
-    return React__default.createElement(SankeyLinksItem$1, {
-      key: "".concat(link.source.id, ".").concat(link.target.id),
+    return jsxRuntime.jsx(SankeyLinksItem$1, {
       link: link,
@@ -684,6 +690,6 @@ layout: layout,
       tooltipFormat: tooltipFormat
-    });
+    }, "".concat(link.source.id, ".").concat(link.target.id));
   });
 };
-var SankeyLinks$1 = React.memo(SankeyLinks);
+var SankeyLinks$1 = react.memo(SankeyLinks);
 
@@ -766,4 +772,3 @@ var SankeyLabels = function SankeyLabels(_ref) {
     var label = labels[index];
-    return React__default.createElement(web.animated.text, {
-      key: label.id,
+    return jsxRuntime.jsx(web.animated.text, {
       dominantBaseline: "central",
@@ -775,7 +780,8 @@ textAnchor: label.textAnchor,
         pointerEvents: 'none'
-      })
-    }, label.label);
+      }),
+      children: label.label
+    }, label.id);
   });
 };
-var SankeyLabels$1 = React.memo(SankeyLabels);
+var SankeyLabels$1 = react.memo(SankeyLabels);
 
@@ -901,4 +907,3 @@ var Sankey = function Sankey(_ref) {
   var layerById = {
-    links: React__default.createElement(SankeyLinks$1, {
-      key: "links",
+    links: jsxRuntime.jsx(SankeyLinks$1, {
       links: links,
@@ -920,5 +925,4 @@ layout: layout,
       tooltipFormat: tooltipFormat
-    }),
-    nodes: React__default.createElement(SankeyNodes$1, {
-      key: "nodes",
+    }, "links"),
+    nodes: jsxRuntime.jsx(SankeyNodes$1, {
       nodes: nodes,
@@ -938,17 +942,14 @@ nodeOpacity: nodeOpacity,
       tooltipFormat: tooltipFormat
-    }),
+    }, "nodes"),
     labels: null,
     legends: legends$1.map(function (legend, i) {
-      return React__default.createElement(legends.BoxLegendSvg, Object.assign({
-        key: "legend".concat(i)
-      }, legend, {
+      return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
         containerWidth: innerWidth,
         containerHeight: innerHeight,
         data: legendData
-      }));
+      }), "legend".concat(i));
     })
   };
   if (enableLabels) {
-    layerById.labels = React__default.createElement(SankeyLabels$1, {
-      key: "labels",
+    layerById.labels = jsxRuntime.jsx(SankeyLabels$1, {
       nodes: nodes,
@@ -962,17 +963,18 @@ layout: layout,
       getLabelTextColor: getLabelTextColor
-    });
+    }, "labels");
   }
-  return React__default.createElement(core.SvgWrapper, {
+  return jsxRuntime.jsx(core.SvgWrapper, {
     width: outerWidth,
     height: outerHeight,
     margin: margin,
-    role: role
-  }, layers.map(function (layer, i) {
-    if (typeof layer === 'function') {
-      return React__default.createElement(React.Fragment, {
-        key: i
-      }, layer(layerProps));
-    }
-    return layerById[layer];
-  }));
+    role: role,
+    children: layers.map(function (layer, i) {
+      if (typeof layer === 'function') {
+        return jsxRuntime.jsx(react.Fragment, {
+          children: layer(layerProps)
+        }, i);
+      }
+      return layerById[layer];
+    })
+  });
 };
@@ -983,9 +985,11 @@ var WrappedSankey = core.withContainer(Sankey);
 var ResponsiveSankey = function ResponsiveSankey(props) {
-  return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return React__default.createElement(WrappedSankey, Object.assign({
-      width: width,
-      height: height
-    }, props));
+  return jsxRuntime.jsx(core.ResponsiveWrapper, {
+    children: function children(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return jsxRuntime.jsx(WrappedSankey, _objectSpread2({
+        width: width,
+        height: height
+      }, props));
+    }
   });
@@ -992,0 +996,0 @@ };

dist/nivo-sankey.es.js

 import _uniq from 'lodash/uniq';
-import React, { useState, useMemo, memo, useCallback, Fragment } from 'react';
+import { useState, useMemo, memo, useCallback, Fragment as Fragment$1 } from 'react';
 import { blendModePropType, motionPropTypes, noop, useTheme, getLabelGenerator, useMotionConfig, useAnimatedPath, withContainer, useDimensions, SvgWrapper, ResponsiveWrapper } from '@nivo/core';
@@ -11,2 +11,3 @@ import { LegendPropShape, BoxLegendSvg } from '@nivo/legends';
 import { useTooltip, BasicTooltip, Chip } from '@nivo/tooltip';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { line, curveMonotoneX, curveMonotoneY } from 'd3-shape';
@@ -195,3 +196,3 @@
   if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
@@ -223,3 +224,2 @@ }
       getColor = _ref.getColor,
-      getLinkColor = _ref.getLinkColor,
       getLabel = _ref.getLabel;
@@ -251,3 +251,3 @@ var sankey$1 = sankey().nodeAlign(alignFunction).nodeSort(sortFunction).linkSort(linkSortMode).nodeWidth(nodeThickness).nodePadding(nodeSpacing).size(layout === 'horizontal' ? [width, height] : [height, width]).nodeId(getId);
   data.links.forEach(function (link) {
-    link.color = getLinkColor(link);
+    link.color = link.source.color;
     link.pos0 = link.y0;
@@ -303,3 +303,2 @@ link.pos1 = link.y1;
   var getNodeBorderColor = useInheritedColor(nodeBorderColor, theme);
-  var getLinkColor = useOrdinalColorScale(colors, 'source.id');
   var getLabel = useMemo(function () {
@@ -322,6 +321,5 @@ return getLabelGenerator(label, labelFormat);
       getColor: getColor,
-      getLinkColor: getLinkColor,
       getLabel: getLabel
     });
-  }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLinkColor, getLabel]),
+  }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
       nodes = _useMemo.nodes,
@@ -383,3 +381,3 @@ links = _useMemo.links;
     if (tooltip) {
-      return React.createElement(BasicTooltip, {
+      return jsx(BasicTooltip, {
         id: tooltip(node),
@@ -389,3 +387,3 @@ enableChip: false
     }
-    return React.createElement(BasicTooltip, {
+    return jsx(BasicTooltip, {
       id: node.label,
@@ -410,3 +408,3 @@ enableChip: true,
   }, [onClick, node]);
-  return React.createElement(animated.rect, {
+  return jsx(animated.rect, {
     x: animatedProps.x,
@@ -453,4 +451,3 @@ y: animatedProps.y,
   return nodes.map(function (node) {
-    return React.createElement(SankeyNodesItem$1, {
-      key: node.id,
+    return jsx(SankeyNodesItem$1, {
       node: node,
@@ -469,3 +466,3 @@ x: node.x,
       tooltip: tooltip
-    });
+    }, node.id);
   });
@@ -492,11 +489,13 @@ };
   }
-  return React.createElement("linearGradient", Object.assign({
+  return jsxs("linearGradient", _objectSpread2(_objectSpread2({
     id: id,
     spreadMethod: "pad"
-  }, gradientProps), React.createElement("stop", {
-    offset: "0%",
-    stopColor: startColor
-  }), React.createElement("stop", {
-    offset: "100%",
-    stopColor: endColor
+  }, gradientProps), {}, {
+    children: [jsx("stop", {
+      offset: "0%",
+      stopColor: startColor
+    }), jsx("stop", {
+      offset: "100%",
+      stopColor: endColor
+    })]
   }));
@@ -522,11 +521,18 @@ });
       format = _ref.format;
-  return React.createElement("span", {
-    style: tooltipStyles.container
-  }, React.createElement(Chip, {
-    color: link.source.color,
-    style: tooltipStyles.sourceChip
-  }), React.createElement("strong", null, link.source.label), ' > ', React.createElement("strong", null, link.target.label), React.createElement(Chip, {
-    color: link.target.color,
-    style: tooltipStyles.targetChip
-  }), React.createElement("strong", null, format ? format(link.value) : link.value));
+  return jsxs("span", {
+    style: tooltipStyles.container,
+    children: [jsx(Chip, {
+      color: link.source.color,
+      style: tooltipStyles.sourceChip
+    }), jsx("strong", {
+      children: link.source.label
+    }), ' > ', jsx("strong", {
+      children: link.target.label
+    }), jsx(Chip, {
+      color: link.target.color,
+      style: tooltipStyles.targetChip
+    }), jsx("strong", {
+      children: format ? format(link.value) : link.value
+    })]
+  });
 };
@@ -562,3 +568,3 @@ var SankeyLinksItem = function SankeyLinksItem(_ref2) {
     if (tooltip) {
-      return React.createElement(BasicTooltip, {
+      return jsx(BasicTooltip, {
         id: tooltip(link),
@@ -568,4 +574,4 @@ enableChip: false
     }
-    return React.createElement(BasicTooltip, {
-      id: React.createElement(TooltipContent, {
+    return jsx(BasicTooltip, {
+      id: jsx(TooltipContent, {
         format: tooltipFormat,
@@ -590,19 +596,21 @@ link: link
   }, [onClick, link]);
-  return React.createElement(React.Fragment, null, enableGradient && React.createElement(SankeyLinkGradient, {
-    id: linkId,
-    layout: layout,
-    startColor: link.startColor || link.source.color,
-    endColor: link.endColor || link.target.color
-  }), React.createElement(animated.path, {
-    fill: enableGradient ? "url(\"#".concat(encodeURI(linkId), "\")") : animatedProps.color,
-    d: animatedPath,
-    fillOpacity: animatedProps.opacity,
-    onMouseEnter: isInteractive ? handleMouseEnter : undefined,
-    onMouseMove: isInteractive ? handleMouseMove : undefined,
-    onMouseLeave: isInteractive ? handleMouseLeave : undefined,
-    onClick: isInteractive ? handleClick : undefined,
-    style: {
-      mixBlendMode: blendMode
-    }
-  }));
+  return jsxs(Fragment, {
+    children: [enableGradient && jsx(SankeyLinkGradient, {
+      id: linkId,
+      layout: layout,
+      startColor: link.startColor || link.source.color,
+      endColor: link.endColor || link.target.color
+    }), jsx(animated.path, {
+      fill: enableGradient ? "url(\"#".concat(encodeURI(linkId), "\")") : animatedProps.color,
+      d: animatedPath,
+      fillOpacity: animatedProps.opacity,
+      onMouseEnter: isInteractive ? handleMouseEnter : undefined,
+      onMouseMove: isInteractive ? handleMouseMove : undefined,
+      onMouseLeave: isInteractive ? handleMouseLeave : undefined,
+      onClick: isInteractive ? handleClick : undefined,
+      style: {
+        mixBlendMode: blendMode
+      }
+    })]
+  });
 };
@@ -658,4 +666,3 @@ var SankeyLinksItem$1 = memo(SankeyLinksItem);
   return links.map(function (link) {
-    return React.createElement(SankeyLinksItem$1, {
-      key: "".concat(link.source.id, ".").concat(link.target.id),
+    return jsx(SankeyLinksItem$1, {
       link: link,
@@ -673,3 +680,3 @@ layout: layout,
       tooltipFormat: tooltipFormat
-    });
+    }, "".concat(link.source.id, ".").concat(link.target.id));
   });
@@ -755,4 +762,3 @@ };
     var label = labels[index];
-    return React.createElement(animated.text, {
-      key: label.id,
+    return jsx(animated.text, {
       dominantBaseline: "central",
@@ -764,4 +770,5 @@ textAnchor: label.textAnchor,
         pointerEvents: 'none'
-      })
-    }, label.label);
+      }),
+      children: label.label
+    }, label.id);
   });
@@ -890,4 +897,3 @@ };
   var layerById = {
-    links: React.createElement(SankeyLinks$1, {
-      key: "links",
+    links: jsx(SankeyLinks$1, {
       links: links,
@@ -909,5 +915,4 @@ layout: layout,
       tooltipFormat: tooltipFormat
-    }),
-    nodes: React.createElement(SankeyNodes$1, {
-      key: "nodes",
+    }, "links"),
+    nodes: jsx(SankeyNodes$1, {
       nodes: nodes,
@@ -927,17 +932,14 @@ nodeOpacity: nodeOpacity,
       tooltipFormat: tooltipFormat
-    }),
+    }, "nodes"),
     labels: null,
     legends: legends.map(function (legend, i) {
-      return React.createElement(BoxLegendSvg, Object.assign({
-        key: "legend".concat(i)
-      }, legend, {
+      return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
         containerWidth: innerWidth,
         containerHeight: innerHeight,
         data: legendData
-      }));
+      }), "legend".concat(i));
     })
   };
   if (enableLabels) {
-    layerById.labels = React.createElement(SankeyLabels$1, {
-      key: "labels",
+    layerById.labels = jsx(SankeyLabels$1, {
       nodes: nodes,
@@ -951,17 +953,18 @@ layout: layout,
       getLabelTextColor: getLabelTextColor
-    });
+    }, "labels");
   }
-  return React.createElement(SvgWrapper, {
+  return jsx(SvgWrapper, {
     width: outerWidth,
     height: outerHeight,
     margin: margin,
-    role: role
-  }, layers.map(function (layer, i) {
-    if (typeof layer === 'function') {
-      return React.createElement(Fragment, {
-        key: i
-      }, layer(layerProps));
-    }
-    return layerById[layer];
-  }));
+    role: role,
+    children: layers.map(function (layer, i) {
+      if (typeof layer === 'function') {
+        return jsx(Fragment$1, {
+          children: layer(layerProps)
+        }, i);
+      }
+      return layerById[layer];
+    })
+  });
 };
@@ -972,9 +975,11 @@ var WrappedSankey = withContainer(Sankey);
 var ResponsiveSankey = function ResponsiveSankey(props) {
-  return React.createElement(ResponsiveWrapper, null, function (_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return React.createElement(WrappedSankey, Object.assign({
-      width: width,
-      height: height
-    }, props));
+  return jsx(ResponsiveWrapper, {
+    children: function children(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return jsx(WrappedSankey, _objectSpread2({
+        width: width,
+        height: height
+      }, props));
+    }
   });
@@ -981,0 +986,0 @@ };

dist/nivo-sankey.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/uniq'), require('react'), require('@nivo/core'), require('@nivo/legends'), require('prop-types'), require('d3-sankey'), require('@nivo/colors'), require('lodash/cloneDeep'), require('@react-spring/web'), require('@nivo/tooltip'), require('d3-shape')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lodash/uniq', 'react', '@nivo/core', '@nivo/legends', 'prop-types', 'd3-sankey', '@nivo/colors', 'lodash/cloneDeep', '@react-spring/web', '@nivo/tooltip', 'd3-shape'], factory) :
-  (global = global || self, factory(global.nivo = global.nivo || {}, global['lodash/uniq'], global.React, global.nivo, global.nivo, global.PropTypes, global.d3, global.nivo, global['lodash/cloneDeep'], global['@react-spring/web'], global.nivo, global.d3));
-}(this, (function (exports, _uniq, React, core, legends, PropTypes, d3Sankey, colors, _cloneDeep, web, tooltip, d3Shape) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/uniq'), require('react'), require('@nivo/core'), require('@nivo/legends'), require('prop-types'), require('d3-sankey'), require('@nivo/colors'), require('lodash/cloneDeep'), require('@react-spring/web'), require('@nivo/tooltip'), require('react/jsx-runtime'), require('d3-shape')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'lodash/uniq', 'react', '@nivo/core', '@nivo/legends', 'prop-types', 'd3-sankey', '@nivo/colors', 'lodash/cloneDeep', '@react-spring/web', '@nivo/tooltip', 'react/jsx-runtime', 'd3-shape'], factory) :
+  (global = global || self, factory(global.nivo = global.nivo || {}, global['lodash/uniq'], global.React, global.nivo, global.nivo, global.PropTypes, global.d3, global.nivo, global['lodash/cloneDeep'], global['@react-spring/web'], global.nivo, global['react/jsx-runtime'], global.d3));
+}(this, (function (exports, _uniq, react, core, legends, PropTypes, d3Sankey, colors, _cloneDeep, web, tooltip, jsxRuntime, d3Shape) { 'use strict';
 
   _uniq = _uniq && Object.prototype.hasOwnProperty.call(_uniq, 'default') ? _uniq['default'] : _uniq;
-  var React__default = 'default' in React ? React['default'] : React;
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
@@ -193,3 +192,3 @@ _cloneDeep = _cloneDeep && Object.prototype.hasOwnProperty.call(_cloneDeep, 'default') ? _cloneDeep['default'] : _cloneDeep;
     if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Map" || n === "Set") return Array.from(o);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
@@ -221,3 +220,2 @@ }
         getColor = _ref.getColor,
-        getLinkColor = _ref.getLinkColor,
         getLabel = _ref.getLabel;
@@ -249,3 +247,3 @@ var sankey = d3Sankey.sankey().nodeAlign(alignFunction).nodeSort(sortFunction).linkSort(linkSortMode).nodeWidth(nodeThickness).nodePadding(nodeSpacing).size(layout === 'horizontal' ? [width, height] : [height, width]).nodeId(getId);
     data.links.forEach(function (link) {
-      link.color = getLinkColor(link);
+      link.color = link.source.color;
       link.pos0 = link.y0;
@@ -275,11 +273,11 @@ link.pos1 = link.y1;
         labelTextColor = _ref2.labelTextColor;
-    var _useState = React.useState(null),
+    var _useState = react.useState(null),
         _useState2 = _slicedToArray(_useState, 2),
         currentNode = _useState2[0],
         setCurrentNode = _useState2[1];
-    var _useState3 = React.useState(null),
+    var _useState3 = react.useState(null),
         _useState4 = _slicedToArray(_useState3, 2),
         currentLink = _useState4[0],
         setCurrentLink = _useState4[1];
-    var sortFunction = React.useMemo(function () {
+    var sortFunction = react.useMemo(function () {
       if (sort === 'auto') return undefined;
@@ -296,3 +294,3 @@ if (sort === 'input') return null;
     var linkSortMode = sort === 'input' ? null : undefined;
-    var alignFunction = React.useMemo(function () {
+    var alignFunction = react.useMemo(function () {
       return sankeyAlignmentFromProp(align);
@@ -303,8 +301,7 @@ }, [align]);
     var getNodeBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
-    var getLinkColor = colors.useOrdinalColorScale(colors$1, 'source.id');
-    var getLabel = React.useMemo(function () {
+    var getLabel = react.useMemo(function () {
       return core.getLabelGenerator(label, labelFormat);
     }, [label, labelFormat]);
     var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
-    var _useMemo = React.useMemo(function () {
+    var _useMemo = react.useMemo(function () {
       return computeNodeAndLinks({
@@ -322,9 +319,8 @@ data: data,
         getColor: getColor,
-        getLinkColor: getLinkColor,
         getLabel: getLabel
       });
-    }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLinkColor, getLabel]),
+    }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
         nodes = _useMemo.nodes,
         links = _useMemo.links;
-    var legendData = React.useMemo(function () {
+    var legendData = react.useMemo(function () {
       return nodes.map(function (node) {
@@ -381,5 +377,5 @@ return {
         hideTooltip = _useTooltip.hideTooltip;
-    var tooltipContent = React.useMemo(function () {
+    var tooltipContent = react.useMemo(function () {
       if (tooltip$1) {
-        return React__default.createElement(tooltip.BasicTooltip, {
+        return jsxRuntime.jsx(tooltip.BasicTooltip, {
           id: tooltip$1(node),
@@ -389,3 +385,3 @@ enableChip: false
       }
-      return React__default.createElement(tooltip.BasicTooltip, {
+      return jsxRuntime.jsx(tooltip.BasicTooltip, {
         id: node.label,
@@ -396,17 +392,17 @@ enableChip: true,
     }, [tooltip$1, node]);
-    var handleMouseEnter = React.useCallback(function (event) {
+    var handleMouseEnter = react.useCallback(function (event) {
       setCurrent(node);
       showTooltipFromEvent(tooltipContent, event, 'left');
     }, [setCurrent, node, showTooltipFromEvent, tooltipContent]);
-    var handleMouseMove = React.useCallback(function (event) {
+    var handleMouseMove = react.useCallback(function (event) {
       showTooltipFromEvent(tooltipContent, event, 'left');
     }, [showTooltipFromEvent, tooltipContent]);
-    var handleMouseLeave = React.useCallback(function () {
+    var handleMouseLeave = react.useCallback(function () {
       setCurrent(null);
       hideTooltip();
     }, [setCurrent, hideTooltip]);
-    var handleClick = React.useCallback(function (event) {
+    var handleClick = react.useCallback(function (event) {
       onClick(node, event);
     }, [onClick, node]);
-    return React__default.createElement(web.animated.rect, {
+    return jsxRuntime.jsx(web.animated.rect, {
       x: animatedProps.x,
@@ -431,3 +427,3 @@ y: animatedProps.y,
   };
-  var SankeyNodesItem$1 = React.memo(SankeyNodesItem);
+  var SankeyNodesItem$1 = react.memo(SankeyNodesItem);
 
@@ -454,4 +450,3 @@ var SankeyNodes = function SankeyNodes(_ref) {
     return nodes.map(function (node) {
-      return React__default.createElement(SankeyNodesItem$1, {
-        key: node.id,
+      return jsxRuntime.jsx(SankeyNodesItem$1, {
         node: node,
@@ -470,8 +465,8 @@ x: node.x,
         tooltip: tooltip
-      });
+      }, node.id);
     });
   };
-  var SankeyNodes$1 = React.memo(SankeyNodes);
+  var SankeyNodes$1 = react.memo(SankeyNodes);
 
-  var SankeyLinkGradient = React.memo(function (_ref) {
+  var SankeyLinkGradient = react.memo(function (_ref) {
     var id = _ref.id,
@@ -493,11 +488,13 @@ layout = _ref.layout,
     }
-    return React__default.createElement("linearGradient", Object.assign({
+    return jsxRuntime.jsxs("linearGradient", _objectSpread2(_objectSpread2({
       id: id,
       spreadMethod: "pad"
-    }, gradientProps), React__default.createElement("stop", {
-      offset: "0%",
-      stopColor: startColor
-    }), React__default.createElement("stop", {
-      offset: "100%",
-      stopColor: endColor
+    }, gradientProps), {}, {
+      children: [jsxRuntime.jsx("stop", {
+        offset: "0%",
+        stopColor: startColor
+      }), jsxRuntime.jsx("stop", {
+        offset: "100%",
+        stopColor: endColor
+      })]
     }));
@@ -523,11 +520,18 @@ });
         format = _ref.format;
-    return React__default.createElement("span", {
-      style: tooltipStyles.container
-    }, React__default.createElement(tooltip.Chip, {
-      color: link.source.color,
-      style: tooltipStyles.sourceChip
-    }), React__default.createElement("strong", null, link.source.label), ' > ', React__default.createElement("strong", null, link.target.label), React__default.createElement(tooltip.Chip, {
-      color: link.target.color,
-      style: tooltipStyles.targetChip
-    }), React__default.createElement("strong", null, format ? format(link.value) : link.value));
+    return jsxRuntime.jsxs("span", {
+      style: tooltipStyles.container,
+      children: [jsxRuntime.jsx(tooltip.Chip, {
+        color: link.source.color,
+        style: tooltipStyles.sourceChip
+      }), jsxRuntime.jsx("strong", {
+        children: link.source.label
+      }), ' > ', jsxRuntime.jsx("strong", {
+        children: link.target.label
+      }), jsxRuntime.jsx(tooltip.Chip, {
+        color: link.target.color,
+        style: tooltipStyles.targetChip
+      }), jsxRuntime.jsx("strong", {
+        children: format ? format(link.value) : link.value
+      })]
+    });
   };
@@ -561,5 +565,5 @@ var SankeyLinksItem = function SankeyLinksItem(_ref2) {
         hideTooltip = _useTooltip.hideTooltip;
-    var tooltipContent = React.useMemo(function () {
+    var tooltipContent = react.useMemo(function () {
       if (tooltip$1) {
-        return React__default.createElement(tooltip.BasicTooltip, {
+        return jsxRuntime.jsx(tooltip.BasicTooltip, {
           id: tooltip$1(link),
@@ -569,4 +573,4 @@ enableChip: false
       }
-      return React__default.createElement(tooltip.BasicTooltip, {
-        id: React__default.createElement(TooltipContent, {
+      return jsxRuntime.jsx(tooltip.BasicTooltip, {
+        id: jsxRuntime.jsx(TooltipContent, {
           format: tooltipFormat,
@@ -577,35 +581,37 @@ link: link
     }, [tooltip$1, tooltipFormat, link]);
-    var handleMouseEnter = React.useCallback(function (event) {
+    var handleMouseEnter = react.useCallback(function (event) {
       setCurrent(link);
       showTooltipFromEvent(tooltipContent, event, 'left');
     }, [setCurrent, link, showTooltipFromEvent, tooltipContent]);
-    var handleMouseMove = React.useCallback(function (event) {
+    var handleMouseMove = react.useCallback(function (event) {
       showTooltipFromEvent(tooltipContent, event, 'left');
     }, [showTooltipFromEvent, tooltipContent]);
-    var handleMouseLeave = React.useCallback(function () {
+    var handleMouseLeave = react.useCallback(function () {
       setCurrent(null);
       hideTooltip();
     }, [setCurrent, hideTooltip]);
-    var handleClick = React.useCallback(function (event) {
+    var handleClick = react.useCallback(function (event) {
       onClick(link, event);
     }, [onClick, link]);
-    return React__default.createElement(React__default.Fragment, null, enableGradient && React__default.createElement(SankeyLinkGradient, {
-      id: linkId,
-      layout: layout,
-      startColor: link.startColor || link.source.color,
-      endColor: link.endColor || link.target.color
-    }), React__default.createElement(web.animated.path, {
-      fill: enableGradient ? "url(\"#".concat(encodeURI(linkId), "\")") : animatedProps.color,
-      d: animatedPath,
-      fillOpacity: animatedProps.opacity,
-      onMouseEnter: isInteractive ? handleMouseEnter : undefined,
-      onMouseMove: isInteractive ? handleMouseMove : undefined,
-      onMouseLeave: isInteractive ? handleMouseLeave : undefined,
-      onClick: isInteractive ? handleClick : undefined,
-      style: {
-        mixBlendMode: blendMode
-      }
-    }));
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [enableGradient && jsxRuntime.jsx(SankeyLinkGradient, {
+        id: linkId,
+        layout: layout,
+        startColor: link.startColor || link.source.color,
+        endColor: link.endColor || link.target.color
+      }), jsxRuntime.jsx(web.animated.path, {
+        fill: enableGradient ? "url(\"#".concat(encodeURI(linkId), "\")") : animatedProps.color,
+        d: animatedPath,
+        fillOpacity: animatedProps.opacity,
+        onMouseEnter: isInteractive ? handleMouseEnter : undefined,
+        onMouseMove: isInteractive ? handleMouseMove : undefined,
+        onMouseLeave: isInteractive ? handleMouseLeave : undefined,
+        onClick: isInteractive ? handleClick : undefined,
+        style: {
+          mixBlendMode: blendMode
+        }
+      })]
+    });
   };
-  var SankeyLinksItem$1 = React.memo(SankeyLinksItem);
+  var SankeyLinksItem$1 = react.memo(SankeyLinksItem);
 
@@ -659,4 +665,3 @@ var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
     return links.map(function (link) {
-      return React__default.createElement(SankeyLinksItem$1, {
-        key: "".concat(link.source.id, ".").concat(link.target.id),
+      return jsxRuntime.jsx(SankeyLinksItem$1, {
         link: link,
@@ -674,6 +679,6 @@ layout: layout,
         tooltipFormat: tooltipFormat
-      });
+      }, "".concat(link.source.id, ".").concat(link.target.id));
     });
   };
-  var SankeyLinks$1 = React.memo(SankeyLinks);
+  var SankeyLinks$1 = react.memo(SankeyLinks);
 
@@ -756,4 +761,3 @@ var SankeyLabels = function SankeyLabels(_ref) {
       var label = labels[index];
-      return React__default.createElement(web.animated.text, {
-        key: label.id,
+      return jsxRuntime.jsx(web.animated.text, {
         dominantBaseline: "central",
@@ -765,7 +769,8 @@ textAnchor: label.textAnchor,
           pointerEvents: 'none'
-        })
-      }, label.label);
+        }),
+        children: label.label
+      }, label.id);
     });
   };
-  var SankeyLabels$1 = React.memo(SankeyLabels);
+  var SankeyLabels$1 = react.memo(SankeyLabels);
 
@@ -891,4 +896,3 @@ var Sankey = function Sankey(_ref) {
     var layerById = {
-      links: React__default.createElement(SankeyLinks$1, {
-        key: "links",
+      links: jsxRuntime.jsx(SankeyLinks$1, {
         links: links,
@@ -910,5 +914,4 @@ layout: layout,
         tooltipFormat: tooltipFormat
-      }),
-      nodes: React__default.createElement(SankeyNodes$1, {
-        key: "nodes",
+      }, "links"),
+      nodes: jsxRuntime.jsx(SankeyNodes$1, {
         nodes: nodes,
@@ -928,17 +931,14 @@ nodeOpacity: nodeOpacity,
         tooltipFormat: tooltipFormat
-      }),
+      }, "nodes"),
       labels: null,
       legends: legends$1.map(function (legend, i) {
-        return React__default.createElement(legends.BoxLegendSvg, Object.assign({
-          key: "legend".concat(i)
-        }, legend, {
+        return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
           containerWidth: innerWidth,
           containerHeight: innerHeight,
           data: legendData
-        }));
+        }), "legend".concat(i));
       })
     };
     if (enableLabels) {
-      layerById.labels = React__default.createElement(SankeyLabels$1, {
-        key: "labels",
+      layerById.labels = jsxRuntime.jsx(SankeyLabels$1, {
         nodes: nodes,
@@ -952,17 +952,18 @@ layout: layout,
         getLabelTextColor: getLabelTextColor
-      });
+      }, "labels");
     }
-    return React__default.createElement(core.SvgWrapper, {
+    return jsxRuntime.jsx(core.SvgWrapper, {
       width: outerWidth,
       height: outerHeight,
       margin: margin,
-      role: role
-    }, layers.map(function (layer, i) {
-      if (typeof layer === 'function') {
-        return React__default.createElement(React.Fragment, {
-          key: i
-        }, layer(layerProps));
-      }
-      return layerById[layer];
-    }));
+      role: role,
+      children: layers.map(function (layer, i) {
+        if (typeof layer === 'function') {
+          return jsxRuntime.jsx(react.Fragment, {
+            children: layer(layerProps)
+          }, i);
+        }
+        return layerById[layer];
+      })
+    });
   };
@@ -973,9 +974,11 @@ var WrappedSankey = core.withContainer(Sankey);
   var ResponsiveSankey = function ResponsiveSankey(props) {
-    return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-      var width = _ref.width,
-          height = _ref.height;
-      return React__default.createElement(WrappedSankey, Object.assign({
-        width: width,
-        height: height
-      }, props));
+    return jsxRuntime.jsx(core.ResponsiveWrapper, {
+      children: function children(_ref) {
+        var width = _ref.width,
+            height = _ref.height;
+        return jsxRuntime.jsx(WrappedSankey, _objectSpread2({
+          width: width,
+          height: height
+        }, props));
+      }
     });
@@ -982,0 +985,0 @@ };

package.json

 {
   "name": "@nivo/sankey",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "license": "MIT",
@@ -31,5 +31,5 @@ "author": {
   "dependencies": {
-    "@nivo/colors": "0.71.0",
-    "@nivo/legends": "0.71.0",
-    "@nivo/tooltip": "0.71.0",
+    "@nivo/colors": "0.72.0",
+    "@nivo/legends": "0.72.0",
+    "@nivo/tooltip": "0.72.0",
     "@react-spring/web": "9.2.0",
@@ -41,6 +41,6 @@ "d3-sankey": "^0.12.1",
   "devDependencies": {
-    "@nivo/core": "0.71.0"
+    "@nivo/core": "0.72.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.71.0",
+    "@nivo/core": "0.72.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
@@ -52,3 +52,3 @@ "react": ">= 16.8.4 < 18.0.0"
   },
-  "gitHead": "232b613bd61d2b8e5c783f4181b2d14580e2fd27"
+  "gitHead": "26098f6437cd8ab2be166bbc52973dcbb5ee7569"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

2958

increased by0.44%

Worsened metrics

Total package byte prevSize

355526

decreased by-0.51%

Dependency changes

• + Added@nivo/colors@0.72.0(transitive)

• + Added@nivo/core@0.72.0(transitive)

• + Added@nivo/recompose@0.72.0(transitive)

• + Added@nivo/tooltip@0.72.0(transitive)

• - Removed@nivo/colors@0.71.0(transitive)

• - Removed@nivo/core@0.71.0(transitive)

• - Removed@nivo/recompose@0.71.0(transitive)

• - Removed@nivo/tooltip@0.71.0(transitive)

• Updated@nivo/colors@0.72.0

• Updated@nivo/legends@0.72.0

• Updated@nivo/tooltip@0.72.0