react-vis - npm Package Compare versions

Comparing version 1.7.4 to 1.7.5

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.ScaleUtils = exports.AxisUtils = exports.FlexibleHeightXYPlot = exports.FlexibleWidthXYPlot = exports.FlexibleXYPlot = exports.makeWidthFlexible = exports.makeVisFlexible = exports.makeHeightFlexible = exports.Sunburst = exports.Sankey = exports.RadarChart = exports.RadialChart = exports.Treemap = exports.ContinuousSizeLegend = exports.ContinuousColorLegend = exports.SearchableDiscreteColorLegend = exports.DiscreteColorLegend = exports.Voronoi = exports.HorizontalGridLines = exports.VerticalGridLines = exports.GradientDefs = exports.GridLines = exports.CircularGridLines = exports.YAxis = exports.XAxis = exports.DecorativeAxis = exports.XYPlot = exports.Crosshair = exports.Borders = exports.Hint = exports.LineMarkSeriesCanvas = exports.LineMarkSeries = exports.ArcSeries = exports.AreaSeries = exports.CustomSVGSeries = exports.ContourSeries = exports.HeatmapSeries = exports.WhiskerSeries = exports.MarkSeriesCanvas = exports.MarkSeries = exports.RectSeriesCanvas = exports.RectSeries = exports.PolygonSeries = exports.LabelSeries = exports.HorizontalRectSeriesCanvas = exports.HorizontalRectSeries = exports.VerticalRectSeriesCanvas = exports.VerticalRectSeries = exports.VerticalBarSeriesCanvas = exports.VerticalBarSeries = exports.HorizontalBarSeriesCanvas = exports.HorizontalBarSeries = exports.LineSeriesCanvas = exports.LineSeries = exports.AbstractSeries = undefined;
+exports.ScaleUtils = exports.AxisUtils = exports.FlexibleHeightXYPlot = exports.FlexibleWidthXYPlot = exports.FlexibleXYPlot = exports.makeWidthFlexible = exports.makeVisFlexible = exports.makeHeightFlexible = exports.Sunburst = exports.Sankey = exports.ParallelCoordinates = exports.RadarChart = exports.RadialChart = exports.Treemap = exports.ContinuousSizeLegend = exports.ContinuousColorLegend = exports.SearchableDiscreteColorLegend = exports.DiscreteColorLegend = exports.Voronoi = exports.HorizontalGridLines = exports.VerticalGridLines = exports.GradientDefs = exports.GridLines = exports.CircularGridLines = exports.YAxis = exports.XAxis = exports.DecorativeAxis = exports.XYPlot = exports.Crosshair = exports.Borders = exports.Hint = exports.LineMarkSeriesCanvas = exports.LineMarkSeries = exports.ArcSeries = exports.AreaSeries = exports.CustomSVGSeries = exports.ContourSeries = exports.HeatmapSeries = exports.WhiskerSeries = exports.MarkSeriesCanvas = exports.MarkSeries = exports.RectSeriesCanvas = exports.RectSeries = exports.PolygonSeries = exports.LabelSeries = exports.HorizontalRectSeriesCanvas = exports.HorizontalRectSeries = exports.VerticalRectSeriesCanvas = exports.VerticalRectSeries = exports.VerticalBarSeriesCanvas = exports.VerticalBarSeries = exports.HorizontalBarSeriesCanvas = exports.HorizontalBarSeries = exports.LineSeriesCanvas = exports.LineSeries = exports.AbstractSeries = undefined;
 
@@ -228,2 +228,6 @@ var _makeVisFlexible = require('./make-vis-flexible');
 
+var _parallelCoordinates = require('./parallel-coordinates');
+
+var _parallelCoordinates2 = _interopRequireDefault(_parallelCoordinates);
+
 var _sankey = require('./sankey');
@@ -311,2 +315,3 @@
 exports.RadarChart = _radarChart2.default;
+exports.ParallelCoordinates = _parallelCoordinates2.default;
 exports.Sankey = _sankey2.default;
@@ -313,0 +318,0 @@ exports.Sunburst = _sunburst2.default;

dist/plot/series/area-series.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _d3Shape = require('d3-shape');
@@ -73,3 +77,3 @@
     key: '_renderArea',
-    value: function _renderArea(data, x, y0, y, curve) {
+    value: function _renderArea(data, x, y0, y, curve, nullAccessor) {
       var area = d3Shape.area();
@@ -83,2 +87,3 @@ if (curve !== null) {
       }
+      area = area.defined(nullAccessor);
       area = area.x(x).y0(y0).y1(y);
@@ -97,2 +102,3 @@ return area(data);
           marginTop = _props.marginTop,
+          nullAccessor = _props.nullAccessor,
           style = _props.style;
@@ -118,3 +124,3 @@
       var opacity = Number.isFinite(newOpacity) ? newOpacity : _theme.DEFAULT_OPACITY;
-      var d = this._renderArea(data, x, y0, y, curve);
+      var d = this._renderArea(data, x, y0, y, curve, nullAccessor);
       return _react2.default.createElement('path', {
@@ -140,3 +146,11 @@ d: d,
 AreaSeries.displayName = 'AreaSeries';
+AreaSeries.propTypes = _extends({}, _abstractSeries2.default.propTypes, {
+  nullAccessor: _propTypes2.default.func
+});
+AreaSeries.defaultProps = {
+  nullAccessor: function nullAccessor() {
+    return true;
+  }
+};
 
 exports.default = AreaSeries;

dist/plot/series/label-series.js

@@ -76,2 +76,3 @@ 'use strict';
           data = _props.data,
+          _data = _props._data,
           marginLeft = _props.marginLeft,
@@ -92,3 +93,3 @@ marginTop = _props.marginTop,
           _extends({}, this.props, { animatedProps: _seriesUtils.ANIMATED_SERIES_PROPS }),
-          _react2.default.createElement(LabelSeries, _extends({}, this.props, { animation: null }))
+          _react2.default.createElement(LabelSeries, _extends({}, this.props, { animation: null, _data: data }))
         );
@@ -145,3 +146,3 @@ }
             attrs,
-            label
+            _data ? _data[i].label : label
           )]);
@@ -161,4 +162,4 @@ }, [])
   data: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    x: _propTypes2.default.number,
-    y: _propTypes2.default.number,
+    x: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    y: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
     angle: _propTypes2.default.number,
@@ -165,0 +166,0 @@ radius: _propTypes2.default.number,

dist/plot/series/line-series.js

@@ -7,24 +7,6 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
 var _react = require('react');
@@ -62,3 +44,21 @@
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
 
@@ -72,15 +72,2 @@ var predefinedClassName = 'rv-xy-plot__series rv-xy-plot__series--line';
 
-var defaultProps = {
-  strokeStyle: 'solid',
-  style: {},
-  opacity: 1,
-  curve: null,
-  className: ''
-};
-
-var propTypes = _extends({}, _abstractSeries2.default.propTypes, {
-  strokeStyle: _propTypes2.default.oneOf(Object.keys(STROKE_STYLES)),
-  curve: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
-});
-
 var LineSeries = function (_AbstractSeries) {
@@ -97,3 +84,3 @@ _inherits(LineSeries, _AbstractSeries);
     key: '_renderLine',
-    value: function _renderLine(data, x, y, curve) {
+    value: function _renderLine(data, x, y, curve, nullAccessor) {
       var line = d3Shape.line();
@@ -107,2 +94,3 @@ if (curve !== null) {
       }
+      line = line.defined(nullAccessor);
       line = line.x(x).y(y);
@@ -131,8 +119,9 @@ return line(data);
       var _props2 = this.props,
+          curve = _props2.curve,
+          marginLeft = _props2.marginLeft,
+          marginTop = _props2.marginTop,
+          nullAccessor = _props2.nullAccessor,
+          strokeDasharray = _props2.strokeDasharray,
           strokeStyle = _props2.strokeStyle,
-          strokeDasharray = _props2.strokeDasharray,
           strokeWidth = _props2.strokeWidth,
-          marginLeft = _props2.marginLeft,
-          marginTop = _props2.marginTop,
-          curve = _props2.curve,
           style = _props2.style;
@@ -146,3 +135,3 @@
       var opacity = Number.isFinite(newOpacity) ? newOpacity : _theme.DEFAULT_OPACITY;
-      var d = this._renderLine(data, x, y, curve);
+      var d = this._renderLine(data, x, y, curve, nullAccessor);
 
@@ -170,5 +159,18 @@ return _react2.default.createElement('path', {
 LineSeries.displayName = 'LineSeries';
-LineSeries.defaultProps = defaultProps;
-LineSeries.propTypes = propTypes;
+LineSeries.propTypes = _extends({}, _abstractSeries2.default.propTypes, {
+  strokeStyle: _propTypes2.default.oneOf(Object.keys(STROKE_STYLES)),
+  curve: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  nullAccessor: _propTypes2.default.func
+});
+LineSeries.defaultProps = {
+  strokeStyle: 'solid',
+  style: {},
+  opacity: 1,
+  curve: null,
+  className: '',
+  nullAccessor: function nullAccessor() {
+    return true;
+  }
+};
 
 exports.default = LineSeries;

dist/plot/series/mark-series.js

@@ -70,5 +70,43 @@ 'use strict';
   _createClass(MarkSeries, [{
+    key: '_renderCircle',
+    value: function _renderCircle(d, i, strokeWidth, style) {
+      var _this2 = this;
+
+      var sizeFunctor = this._getAttributeFunctor('size');
+      var opacityFunctor = this._getAttributeFunctor('opacity');
+      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
+      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
+      var xFunctor = this._getAttributeFunctor('x');
+      var yFunctor = this._getAttributeFunctor('y');
+
+      var attrs = {
+        r: sizeFunctor ? sizeFunctor(d) : _theme.DEFAULT_SIZE,
+        cx: xFunctor(d),
+        cy: yFunctor(d),
+        style: _extends({
+          opacity: opacityFunctor ? opacityFunctor(d) : _theme.DEFAULT_OPACITY,
+          stroke: strokeFunctor && strokeFunctor(d),
+          fill: fillFunctor && fillFunctor(d),
+          strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH
+        }, style),
+        key: i,
+        onClick: function onClick(e) {
+          return _this2._valueClickHandler(d, e);
+        },
+        onContextMenu: function onContextMenu(e) {
+          return _this2._valueRightClickHandler(d, e);
+        },
+        onMouseOver: function onMouseOver(e) {
+          return _this2._valueMouseOverHandler(d, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          return _this2._valueMouseOutHandler(d, e);
+        }
+      };
+      return _react2.default.createElement('circle', attrs);
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -81,2 +119,3 @@ var _props = this.props,
           marginTop = _props.marginTop,
+          nullAccessor = _props.nullAccessor,
           strokeWidth = _props.strokeWidth,
@@ -96,9 +135,2 @@ style = _props.style;
 
-      var sizeFunctor = this._getAttributeFunctor('size');
-      var opacityFunctor = this._getAttributeFunctor('opacity');
-      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
-      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
-      var xFunctor = this._getAttributeFunctor('x');
-      var yFunctor = this._getAttributeFunctor('y');
-
       return _react2.default.createElement(
@@ -110,27 +142,3 @@ 'g',
         data.map(function (d, i) {
-          var attrs = {
-            r: sizeFunctor ? sizeFunctor(d) : _theme.DEFAULT_SIZE,
-            cx: xFunctor(d),
-            cy: yFunctor(d),
-            style: _extends({
-              opacity: opacityFunctor ? opacityFunctor(d) : _theme.DEFAULT_OPACITY,
-              stroke: strokeFunctor && strokeFunctor(d),
-              fill: fillFunctor && fillFunctor(d),
-              strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH
-            }, style),
-            key: i,
-            onClick: function onClick(e) {
-              return _this2._valueClickHandler(d, e);
-            },
-            onContextMenu: function onContextMenu(e) {
-              return _this2._valueRightClickHandler(d, e);
-            },
-            onMouseOver: function onMouseOver(e) {
-              return _this2._valueMouseOverHandler(d, e);
-            },
-            onMouseOut: function onMouseOut(e) {
-              return _this2._valueMouseOutHandler(d, e);
-            }
-          };
-          return _react2.default.createElement('circle', attrs);
+          return nullAccessor(d) && _this3._renderCircle(d, i, strokeWidth, style);
         })
@@ -146,4 +154,11 @@ );
 MarkSeries.propTypes = _extends({}, _abstractSeries2.default.propTypes, {
+  nullAccessor: _propTypes2.default.func,
   strokeWidth: _propTypes2.default.number
 });
+MarkSeries.defaultProps = {
+  nullAccessor: function nullAccessor() {
+    return true;
+  }
+};
+
 exports.default = MarkSeries;

dist/plot/xy-plot.js

@@ -355,3 +355,4 @@ 'use strict';
           if (zeroBaseValue) {
-            zeroBaseProps[attr + 'BaseValue'] = 0;
+            var specifiedDomain = props[attr + 'Domain'];
+            zeroBaseProps[attr + 'BaseValue'] = specifiedDomain ? specifiedDomain[0] : 0;
           }
@@ -358,0 +359,0 @@ });

dist/radar-chart/index.js

@@ -152,2 +152,3 @@ 'use strict';
   var animation = props.animation,
+      colorRange = props.colorRange,
       domains = props.domains,
@@ -166,3 +167,3 @@ data = props.data,
       var dataPoint = row[domain.name];
-      // error handling if point doesn't exisit
+      // error handling if point doesn't exist
       var angle = index / domains.length * Math.PI * 2 + startingAngle;
@@ -180,4 +181,4 @@ // dont let the radius become negative
       style: _extends({
-        stroke: row.color || row.stroke || _theme.DISCRETE_COLOR_RANGE[rowIndex],
-        fill: row.color || row.fill || _theme.DISCRETE_COLOR_RANGE[rowIndex]
+        stroke: row.color || row.stroke || colorRange[rowIndex % colorRange.length],
+        fill: row.color || row.fill || colorRange[rowIndex % colorRange.length]
       }, style.polygons)
@@ -204,2 +205,3 @@ });
           children = _props.children,
+          colorRange = _props.colorRange,
           data = _props.data,
@@ -229,2 +231,3 @@ domains = _props.domains,
         animation: animation,
+        colorRange: colorRange,
         domains: domains,
@@ -236,3 +239,3 @@ data: data,
       var labelSeries = _react2.default.createElement(_labelSeries2.default, {
-        animation: true,
+        animation: animation,
         key: className,
@@ -267,2 +270,3 @@ className: predefinedClassName + '-label',
   colorType: _propTypes2.default.string,
+  colorRange: _propTypes2.default.arrayOf(_propTypes2.default.string),
   data: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,
@@ -269,0 +273,0 @@ domains: _propTypes2.default.arrayOf(_propTypes2.default.shape({

dist/sankey/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -18,4 +20,18 @@
 
-var _d3SankeyAlign = require('d3-sankey-align');
+var _d3Sankey = require('d3-sankey');
 
+var _xyPlot = require('../plot/xy-plot');
+
+var _xyPlot2 = _interopRequireDefault(_xyPlot);
+
+var _chartUtils = require('../utils/chart-utils');
+
+var _verticalRectSeries = require('../plot/series/vertical-rect-series');
+
+var _verticalRectSeries2 = _interopRequireDefault(_verticalRectSeries);
+
+var _labelSeries = require('../plot/series/label-series');
+
+var _labelSeries2 = _interopRequireDefault(_labelSeries);
+
 var _voronoi = require('../plot/voronoi');
@@ -27,4 +43,10 @@
 
+var _sankeyLink = require('./sankey-link');
+
+var _sankeyLink2 = _interopRequireDefault(_sankeyLink);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -40,7 +62,16 @@
 
-var DEFAULT_LINK_COLOR = _theme.DISCRETE_COLOR_RANGE[1];
-var DEFAULT_LINK_OPACITY = 0.7;
-var DEFAULT_NODE_COLOR = _theme.DISCRETE_COLOR_RANGE[0];
-var DEFAULT_NODE_OPACITY = 1;
+var ALIGNMENTS = {
+  justify: _d3Sankey.sankeyJustify,
+  center: _d3Sankey.sankeyCenter,
+  left: _d3Sankey.sankeyLeft,
+  right: _d3Sankey.sankeyRight
+};
 
+var DEFAULT_MARGINS = {
+  top: 20,
+  left: 20,
+  right: 20,
+  bottom: 20
+};
+
 var Sankey = function (_Component) {
@@ -60,2 +91,3 @@ _inherits(Sankey, _Component);
           align = _props.align,
+          animation = _props.animation,
           className = _props.className,
@@ -67,2 +99,3 @@ hasVoronoi = _props.hasVoronoi,
           links = _props.links,
+          linkOpacity = _props.linkOpacity,
           margin = _props.margin,
@@ -72,77 +105,91 @@ nodePadding = _props.nodePadding,
           nodeWidth = _props.nodeWidth,
-          onBlur = _props.onBlur,
-          _onClick = _props.onClick,
-          onHover = _props.onHover,
+          onValueClick = _props.onValueClick,
+          onValueMouseOver = _props.onValueMouseOver,
+          onValueMouseOut = _props.onValueMouseOut,
+          style = _props.style,
           width = _props.width;
 
+      var nodesCopy = [].concat(_toConsumableArray(new Array(nodes.length))).map(function (e, i) {
+        return _extends({}, nodes[i]);
+      });
+      var linksCopy = [].concat(_toConsumableArray(new Array(links.length))).map(function (e, i) {
+        return _extends({}, links[i]);
+      });
 
-      var sankeyInstance = (0, _d3SankeyAlign.sankey)().size([width, height]).nodeWidth(nodeWidth).nodePadding(nodePadding).nodes(nodes).links(links).align(align).layout(layout);
+      var _getInnerDimensions = (0, _chartUtils.getInnerDimensions)({
+        margin: margin, height: height, width: width
+      }, DEFAULT_MARGINS),
+          marginLeft = _getInnerDimensions.marginLeft,
+          marginTop = _getInnerDimensions.marginTop,
+          marginRight = _getInnerDimensions.marginRight,
+          marginBottom = _getInnerDimensions.marginBottom;
 
+      var sankeyInstance = (0, _d3Sankey.sankey)().extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom - marginTop]]).nodeWidth(nodeWidth).nodePadding(nodePadding).nodes(nodesCopy).links(linksCopy).nodeAlign(ALIGNMENTS[align]).iterations(layout);
+      sankeyInstance(nodesCopy);
+
       var nWidth = sankeyInstance.nodeWidth();
-      var path = sankeyInstance.link();
+      var path = (0, _d3Sankey.sankeyLinkHorizontal)();
 
       return _react2.default.createElement(
-        'svg',
-        { height: height + margin, width: width + margin, className: 'rv-sankey ' + className },
-        _react2.default.createElement(
-          'g',
-          { transform: 'translate(' + margin / 2 + ', ' + margin / 2 + ')' },
-          links.map(function (link, i) {
-            return _react2.default.createElement('path', {
-              d: path(link),
-              className: 'rv-sankey__link',
-              opacity: Number.isFinite(link.opacity) ? link.opacity : DEFAULT_LINK_OPACITY,
-              stroke: link.color || DEFAULT_LINK_COLOR,
-              strokeWidth: Math.max(1, link.dy),
-              fill: 'none',
-              key: link.id || link.key || 'link-' + i });
+        _xyPlot2.default,
+        _extends({}, this.props, {
+          yType: 'literal',
+          className: 'rv-sankey ' + className }),
+        linksCopy.map(function (link, i) {
+          return _react2.default.createElement(_sankeyLink2.default, {
+            style: style.links,
+            data: path(link),
+            opacity: link.opacity || linkOpacity,
+            color: link.color,
+
+            strokeWidth: Math.max(link.width, 1),
+            node: link,
+            nWidth: nWidth,
+            key: 'link-' + i });
+        }),
+        _react2.default.createElement(_verticalRectSeries2.default, {
+          animation: animation,
+          className: className + ' rv-sankey__node',
+          data: nodesCopy.map(function (node) {
+            return _extends({}, node, {
+              y: node.y1 - marginTop,
+              y0: node.y0 - marginTop,
+              x: node.x1,
+              x0: node.x0,
+              color: node.color || _theme.DISCRETE_COLOR_RANGE[0],
+              sourceLinks: null,
+              targetLinks: null
+            });
           }),
-          nodes.map(function (node, i) {
-            return _react2.default.createElement(
-              'g',
-              {
-                transform: 'translate(' + node.x + ', ' + node.y + ')',
-                className: 'rv-sankey__node',
-                opacity: Number.isFinite(node.opacity) ? node.opacity : DEFAULT_NODE_OPACITY,
-                key: node.id || node.key || 'node-' + i },
-              _react2.default.createElement('rect', {
-                onClick: function onClick() {
-                  return _onClick(node);
-                },
-                onMouseOver: function onMouseOver() {
-                  return onHover(node);
-                },
-                onMouseOut: function onMouseOut() {
-                  return onBlur(node);
-                },
-                fill: node.color || DEFAULT_NODE_COLOR,
-                height: node.dy,
-                width: nWidth }),
-              !hideLabels && node.name && _react2.default.createElement(
-                'text',
-                {
-                  textAnchor: node.x < width / 2 ? 'start' : 'end',
-                  dy: '.35em',
-                  x: node.x < width / 2 ? nWidth + 10 : -10,
-                  y: node.dy / 2
-                },
-                node.name
-              )
-            );
-          }),
-          hasVoronoi && _react2.default.createElement(_voronoi2.default, {
-            className: 'rv-sankey__voronoi',
-            extent: [[-margin, -margin], [width + margin, height + margin]],
-            nodes: nodes,
-            onBlur: onBlur,
-            onClick: _onClick,
-            onHover: onHover,
-            x: function x(d) {
-              return d.x + d.dx / 2;
-            },
-            y: function y(d) {
-              return d.y + d.dy / 2;
-            }
+          style: style.rects,
+          onValueClick: onValueClick,
+          onValueMouseOver: onValueMouseOver,
+          onValueMouseOut: onValueMouseOut,
+          colorType: 'literal' }),
+        !hideLabels && _react2.default.createElement(_labelSeries2.default, {
+          animation: animation,
+          className: className,
+          data: nodesCopy.map(function (node) {
+            return {
+              x: node.x0 + (node.x0 < width / 2 ? nWidth + 10 : -10),
+              y: node.y0 + (node.y1 - node.y0) / 2 - marginTop,
+              label: node.name,
+              style: style.labels
+            };
           })
-        )
+        }),
+        hasVoronoi && _react2.default.createElement(_voronoi2.default, {
+          className: 'rv-sankey__voronoi',
+          extent: [[-marginLeft, -marginTop], [width + marginRight, height + marginBottom]],
+          nodes: nodesCopy,
+          onClick: onValueClick,
+          onHover: onValueMouseOver,
+          onBlur: onValueMouseOut,
+          x: function x(d) {
+            return d.x0 + (d.x1 - d.x0) / 2;
+          },
+          y: function y(d) {
+            return d.y0 + (d.y1 - d.y0) / 2;
+          }
+        })
       );
@@ -161,8 +208,13 @@ }
   layout: 50,
-  margin: 20,
+  margin: DEFAULT_MARGINS,
   nodePadding: 10,
   nodeWidth: 10,
-  onBlur: NOOP,
-  onClick: NOOP,
-  onHover: NOOP
+  onValueMouseOver: NOOP,
+  onValueClick: NOOP,
+  onValueMouseOut: NOOP,
+  style: {
+    links: {},
+    rects: {},
+    labels: {}
+  }
 };
@@ -180,11 +232,16 @@ Sankey.propTypes = {
   })).isRequired,
-  margin: _propTypes2.default.number,
+  margin: _chartUtils.MarginPropType,
   nodePadding: _propTypes2.default.number,
   nodes: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,
   nodeWidth: _propTypes2.default.number,
-  onBlur: _propTypes2.default.func,
-  onClick: _propTypes2.default.func,
-  onHover: _propTypes2.default.func,
+  onValueMouseOver: _propTypes2.default.func,
+  onValueClick: _propTypes2.default.func,
+  onValueMouseOut: _propTypes2.default.func,
+  style: _propTypes2.default.shape({
+    links: _propTypes2.default.object,
+    rects: _propTypes2.default.object,
+    labels: _propTypes2.default.object
+  }),
   width: _propTypes2.default.number.isRequired
 };
 exports.default = Sankey;

es/index.js

@@ -111,2 +111,4 @@ // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
 export { _RadarChart as RadarChart };
+import _ParallelCoordinates from './parallel-coordinates';
+export { _ParallelCoordinates as ParallelCoordinates };
 import _Sankey from './sankey';
@@ -113,0 +115,0 @@ export { _Sankey as Sankey };

es/plot/series/area-series.js

@@ -32,2 +32,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as d3Shape from 'd3-shape';
@@ -54,3 +55,3 @@
     key: '_renderArea',
-    value: function _renderArea(data, x, y0, y, curve) {
+    value: function _renderArea(data, x, y0, y, curve, nullAccessor) {
       var area = d3Shape.area();
@@ -64,2 +65,3 @@ if (curve !== null) {
       }
+      area = area.defined(nullAccessor);
       area = area.x(x).y0(y0).y1(y);
@@ -78,2 +80,3 @@ return area(data);
           marginTop = _props.marginTop,
+          nullAccessor = _props.nullAccessor,
           style = _props.style;
@@ -99,3 +102,3 @@
       var opacity = Number.isFinite(newOpacity) ? newOpacity : DEFAULT_OPACITY;
-      var d = this._renderArea(data, x, y0, y, curve);
+      var d = this._renderArea(data, x, y0, y, curve, nullAccessor);
       return React.createElement('path', {
@@ -121,3 +124,11 @@ d: d,
 AreaSeries.displayName = 'AreaSeries';
+AreaSeries.propTypes = _extends({}, AbstractSeries.propTypes, {
+  nullAccessor: PropTypes.func
+});
+AreaSeries.defaultProps = {
+  nullAccessor: function nullAccessor() {
+    return true;
+  }
+};
 
 export default AreaSeries;

es/plot/series/label-series.js

@@ -57,2 +57,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
           data = _props.data,
+          _data = _props._data,
           marginLeft = _props.marginLeft,
@@ -73,3 +74,3 @@ marginTop = _props.marginTop,
           _extends({}, this.props, { animatedProps: ANIMATED_SERIES_PROPS }),
-          React.createElement(LabelSeries, _extends({}, this.props, { animation: null }))
+          React.createElement(LabelSeries, _extends({}, this.props, { animation: null, _data: data }))
         );
@@ -126,3 +127,3 @@ }
             attrs,
-            label
+            _data ? _data[i].label : label
           )]);
@@ -142,4 +143,4 @@ }, [])
   data: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
+    x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     angle: PropTypes.number,
@@ -146,0 +147,0 @@ radius: PropTypes.number,

es/plot/series/line-series.js

@@ -0,5 +1,5 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -48,15 +48,2 @@
 
-var defaultProps = {
-  strokeStyle: 'solid',
-  style: {},
-  opacity: 1,
-  curve: null,
-  className: ''
-};
-
-var propTypes = _extends({}, AbstractSeries.propTypes, {
-  strokeStyle: PropTypes.oneOf(Object.keys(STROKE_STYLES)),
-  curve: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
-});
-
 var LineSeries = function (_AbstractSeries) {
@@ -73,3 +60,3 @@ _inherits(LineSeries, _AbstractSeries);
     key: '_renderLine',
-    value: function _renderLine(data, x, y, curve) {
+    value: function _renderLine(data, x, y, curve, nullAccessor) {
       var line = d3Shape.line();
@@ -83,2 +70,3 @@ if (curve !== null) {
       }
+      line = line.defined(nullAccessor);
       line = line.x(x).y(y);
@@ -107,8 +95,9 @@ return line(data);
       var _props2 = this.props,
+          curve = _props2.curve,
+          marginLeft = _props2.marginLeft,
+          marginTop = _props2.marginTop,
+          nullAccessor = _props2.nullAccessor,
+          strokeDasharray = _props2.strokeDasharray,
           strokeStyle = _props2.strokeStyle,
-          strokeDasharray = _props2.strokeDasharray,
           strokeWidth = _props2.strokeWidth,
-          marginLeft = _props2.marginLeft,
-          marginTop = _props2.marginTop,
-          curve = _props2.curve,
           style = _props2.style;
@@ -122,3 +111,3 @@
       var opacity = Number.isFinite(newOpacity) ? newOpacity : DEFAULT_OPACITY;
-      var d = this._renderLine(data, x, y, curve);
+      var d = this._renderLine(data, x, y, curve, nullAccessor);
 
@@ -146,5 +135,18 @@ return React.createElement('path', {
 LineSeries.displayName = 'LineSeries';
-LineSeries.defaultProps = defaultProps;
-LineSeries.propTypes = propTypes;
+LineSeries.propTypes = _extends({}, AbstractSeries.propTypes, {
+  strokeStyle: PropTypes.oneOf(Object.keys(STROKE_STYLES)),
+  curve: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  nullAccessor: PropTypes.func
+});
+LineSeries.defaultProps = {
+  strokeStyle: 'solid',
+  style: {},
+  opacity: 1,
+  curve: null,
+  className: '',
+  nullAccessor: function nullAccessor() {
+    return true;
+  }
+};
 
 export default LineSeries;

es/plot/series/mark-series.js

@@ -54,5 +54,43 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
   _createClass(MarkSeries, [{
+    key: '_renderCircle',
+    value: function _renderCircle(d, i, strokeWidth, style) {
+      var _this2 = this;
+
+      var sizeFunctor = this._getAttributeFunctor('size');
+      var opacityFunctor = this._getAttributeFunctor('opacity');
+      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
+      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
+      var xFunctor = this._getAttributeFunctor('x');
+      var yFunctor = this._getAttributeFunctor('y');
+
+      var attrs = {
+        r: sizeFunctor ? sizeFunctor(d) : DEFAULT_SIZE,
+        cx: xFunctor(d),
+        cy: yFunctor(d),
+        style: _extends({
+          opacity: opacityFunctor ? opacityFunctor(d) : DEFAULT_OPACITY,
+          stroke: strokeFunctor && strokeFunctor(d),
+          fill: fillFunctor && fillFunctor(d),
+          strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH
+        }, style),
+        key: i,
+        onClick: function onClick(e) {
+          return _this2._valueClickHandler(d, e);
+        },
+        onContextMenu: function onContextMenu(e) {
+          return _this2._valueRightClickHandler(d, e);
+        },
+        onMouseOver: function onMouseOver(e) {
+          return _this2._valueMouseOverHandler(d, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          return _this2._valueMouseOutHandler(d, e);
+        }
+      };
+      return React.createElement('circle', attrs);
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -65,2 +103,3 @@ var _props = this.props,
           marginTop = _props.marginTop,
+          nullAccessor = _props.nullAccessor,
           strokeWidth = _props.strokeWidth,
@@ -80,9 +119,2 @@ style = _props.style;
 
-      var sizeFunctor = this._getAttributeFunctor('size');
-      var opacityFunctor = this._getAttributeFunctor('opacity');
-      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
-      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
-      var xFunctor = this._getAttributeFunctor('x');
-      var yFunctor = this._getAttributeFunctor('y');
-
       return React.createElement(
@@ -94,27 +126,3 @@ 'g',
         data.map(function (d, i) {
-          var attrs = {
-            r: sizeFunctor ? sizeFunctor(d) : DEFAULT_SIZE,
-            cx: xFunctor(d),
-            cy: yFunctor(d),
-            style: _extends({
-              opacity: opacityFunctor ? opacityFunctor(d) : DEFAULT_OPACITY,
-              stroke: strokeFunctor && strokeFunctor(d),
-              fill: fillFunctor && fillFunctor(d),
-              strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH
-            }, style),
-            key: i,
-            onClick: function onClick(e) {
-              return _this2._valueClickHandler(d, e);
-            },
-            onContextMenu: function onContextMenu(e) {
-              return _this2._valueRightClickHandler(d, e);
-            },
-            onMouseOver: function onMouseOver(e) {
-              return _this2._valueMouseOverHandler(d, e);
-            },
-            onMouseOut: function onMouseOut(e) {
-              return _this2._valueMouseOutHandler(d, e);
-            }
-          };
-          return React.createElement('circle', attrs);
+          return nullAccessor(d) && _this3._renderCircle(d, i, strokeWidth, style);
         })
@@ -130,4 +138,11 @@ );
 MarkSeries.propTypes = _extends({}, AbstractSeries.propTypes, {
+  nullAccessor: PropTypes.func,
   strokeWidth: PropTypes.number
 });
+MarkSeries.defaultProps = {
+  nullAccessor: function nullAccessor() {
+    return true;
+  }
+};
+
 export default MarkSeries;

es/plot/xy-plot.js

@@ -335,3 +335,4 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
           if (zeroBaseValue) {
-            zeroBaseProps[attr + 'BaseValue'] = 0;
+            var specifiedDomain = props[attr + 'Domain'];
+            zeroBaseProps[attr + 'BaseValue'] = specifiedDomain ? specifiedDomain[0] : 0;
           }
@@ -338,0 +339,0 @@ });

es/radar-chart/index.js

@@ -125,2 +125,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   var animation = props.animation,
+      colorRange = props.colorRange,
       domains = props.domains,
@@ -139,3 +140,3 @@ data = props.data,
       var dataPoint = row[domain.name];
-      // error handling if point doesn't exisit
+      // error handling if point doesn't exist
       var angle = index / domains.length * Math.PI * 2 + startingAngle;
@@ -153,4 +154,4 @@ // dont let the radius become negative
       style: _extends({
-        stroke: row.color || row.stroke || DISCRETE_COLOR_RANGE[rowIndex],
-        fill: row.color || row.fill || DISCRETE_COLOR_RANGE[rowIndex]
+        stroke: row.color || row.stroke || colorRange[rowIndex % colorRange.length],
+        fill: row.color || row.fill || colorRange[rowIndex % colorRange.length]
       }, style.polygons)
@@ -177,2 +178,3 @@ });
           children = _props.children,
+          colorRange = _props.colorRange,
           data = _props.data,
@@ -202,2 +204,3 @@ domains = _props.domains,
         animation: animation,
+        colorRange: colorRange,
         domains: domains,
@@ -209,3 +212,3 @@ data: data,
       var labelSeries = React.createElement(LabelSeries, {
-        animation: true,
+        animation: animation,
         key: className,
@@ -240,2 +243,3 @@ className: predefinedClassName + '-label',
   colorType: PropTypes.string,
+  colorRange: PropTypes.arrayOf(PropTypes.string),
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -242,0 +246,0 @@ domains: PropTypes.arrayOf(PropTypes.shape({

es/sankey/index.js

@@ -0,3 +1,7 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -11,7 +15,12 @@
 import PropTypes from 'prop-types';
-import { sankey } from 'd3-sankey-align';
+import { sankey, sankeyLinkHorizontal, sankeyLeft, sankeyRight, sankeyCenter, sankeyJustify } from 'd3-sankey';
+import XYPlot from '../plot/xy-plot';
 
+import { MarginPropType, getInnerDimensions } from '../utils/chart-utils';
+import VerticalRectSeries from '../plot/series/vertical-rect-series';
+import LabelSeries from '../plot/series/label-series';
 import Voronoi from '../plot/voronoi';
 import { DISCRETE_COLOR_RANGE } from '../theme';
 
+import SankeyLink from './sankey-link';
 var NOOP = function NOOP(f) {
@@ -21,7 +30,16 @@ return f;
 
-var DEFAULT_LINK_COLOR = DISCRETE_COLOR_RANGE[1];
-var DEFAULT_LINK_OPACITY = 0.7;
-var DEFAULT_NODE_COLOR = DISCRETE_COLOR_RANGE[0];
-var DEFAULT_NODE_OPACITY = 1;
+var ALIGNMENTS = {
+  justify: sankeyJustify,
+  center: sankeyCenter,
+  left: sankeyLeft,
+  right: sankeyRight
+};
 
+var DEFAULT_MARGINS = {
+  top: 20,
+  left: 20,
+  right: 20,
+  bottom: 20
+};
+
 var Sankey = function (_Component) {
@@ -41,2 +59,3 @@ _inherits(Sankey, _Component);
           align = _props.align,
+          animation = _props.animation,
           className = _props.className,
@@ -48,2 +67,3 @@ hasVoronoi = _props.hasVoronoi,
           links = _props.links,
+          linkOpacity = _props.linkOpacity,
           margin = _props.margin,
@@ -53,77 +73,91 @@ nodePadding = _props.nodePadding,
           nodeWidth = _props.nodeWidth,
-          onBlur = _props.onBlur,
-          _onClick = _props.onClick,
-          onHover = _props.onHover,
+          onValueClick = _props.onValueClick,
+          onValueMouseOver = _props.onValueMouseOver,
+          onValueMouseOut = _props.onValueMouseOut,
+          style = _props.style,
           width = _props.width;
 
+      var nodesCopy = [].concat(_toConsumableArray(new Array(nodes.length))).map(function (e, i) {
+        return _extends({}, nodes[i]);
+      });
+      var linksCopy = [].concat(_toConsumableArray(new Array(links.length))).map(function (e, i) {
+        return _extends({}, links[i]);
+      });
 
-      var sankeyInstance = sankey().size([width, height]).nodeWidth(nodeWidth).nodePadding(nodePadding).nodes(nodes).links(links).align(align).layout(layout);
+      var _getInnerDimensions = getInnerDimensions({
+        margin: margin, height: height, width: width
+      }, DEFAULT_MARGINS),
+          marginLeft = _getInnerDimensions.marginLeft,
+          marginTop = _getInnerDimensions.marginTop,
+          marginRight = _getInnerDimensions.marginRight,
+          marginBottom = _getInnerDimensions.marginBottom;
 
+      var sankeyInstance = sankey().extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom - marginTop]]).nodeWidth(nodeWidth).nodePadding(nodePadding).nodes(nodesCopy).links(linksCopy).nodeAlign(ALIGNMENTS[align]).iterations(layout);
+      sankeyInstance(nodesCopy);
+
       var nWidth = sankeyInstance.nodeWidth();
-      var path = sankeyInstance.link();
+      var path = sankeyLinkHorizontal();
 
       return React.createElement(
-        'svg',
-        { height: height + margin, width: width + margin, className: 'rv-sankey ' + className },
-        React.createElement(
-          'g',
-          { transform: 'translate(' + margin / 2 + ', ' + margin / 2 + ')' },
-          links.map(function (link, i) {
-            return React.createElement('path', {
-              d: path(link),
-              className: 'rv-sankey__link',
-              opacity: Number.isFinite(link.opacity) ? link.opacity : DEFAULT_LINK_OPACITY,
-              stroke: link.color || DEFAULT_LINK_COLOR,
-              strokeWidth: Math.max(1, link.dy),
-              fill: 'none',
-              key: link.id || link.key || 'link-' + i });
+        XYPlot,
+        _extends({}, this.props, {
+          yType: 'literal',
+          className: 'rv-sankey ' + className }),
+        linksCopy.map(function (link, i) {
+          return React.createElement(SankeyLink, {
+            style: style.links,
+            data: path(link),
+            opacity: link.opacity || linkOpacity,
+            color: link.color,
+
+            strokeWidth: Math.max(link.width, 1),
+            node: link,
+            nWidth: nWidth,
+            key: 'link-' + i });
+        }),
+        React.createElement(VerticalRectSeries, {
+          animation: animation,
+          className: className + ' rv-sankey__node',
+          data: nodesCopy.map(function (node) {
+            return _extends({}, node, {
+              y: node.y1 - marginTop,
+              y0: node.y0 - marginTop,
+              x: node.x1,
+              x0: node.x0,
+              color: node.color || DISCRETE_COLOR_RANGE[0],
+              sourceLinks: null,
+              targetLinks: null
+            });
           }),
-          nodes.map(function (node, i) {
-            return React.createElement(
-              'g',
-              {
-                transform: 'translate(' + node.x + ', ' + node.y + ')',
-                className: 'rv-sankey__node',
-                opacity: Number.isFinite(node.opacity) ? node.opacity : DEFAULT_NODE_OPACITY,
-                key: node.id || node.key || 'node-' + i },
-              React.createElement('rect', {
-                onClick: function onClick() {
-                  return _onClick(node);
-                },
-                onMouseOver: function onMouseOver() {
-                  return onHover(node);
-                },
-                onMouseOut: function onMouseOut() {
-                  return onBlur(node);
-                },
-                fill: node.color || DEFAULT_NODE_COLOR,
-                height: node.dy,
-                width: nWidth }),
-              !hideLabels && node.name && React.createElement(
-                'text',
-                {
-                  textAnchor: node.x < width / 2 ? 'start' : 'end',
-                  dy: '.35em',
-                  x: node.x < width / 2 ? nWidth + 10 : -10,
-                  y: node.dy / 2
-                },
-                node.name
-              )
-            );
-          }),
-          hasVoronoi && React.createElement(Voronoi, {
-            className: 'rv-sankey__voronoi',
-            extent: [[-margin, -margin], [width + margin, height + margin]],
-            nodes: nodes,
-            onBlur: onBlur,
-            onClick: _onClick,
-            onHover: onHover,
-            x: function x(d) {
-              return d.x + d.dx / 2;
-            },
-            y: function y(d) {
-              return d.y + d.dy / 2;
-            }
+          style: style.rects,
+          onValueClick: onValueClick,
+          onValueMouseOver: onValueMouseOver,
+          onValueMouseOut: onValueMouseOut,
+          colorType: 'literal' }),
+        !hideLabels && React.createElement(LabelSeries, {
+          animation: animation,
+          className: className,
+          data: nodesCopy.map(function (node) {
+            return {
+              x: node.x0 + (node.x0 < width / 2 ? nWidth + 10 : -10),
+              y: node.y0 + (node.y1 - node.y0) / 2 - marginTop,
+              label: node.name,
+              style: style.labels
+            };
           })
-        )
+        }),
+        hasVoronoi && React.createElement(Voronoi, {
+          className: 'rv-sankey__voronoi',
+          extent: [[-marginLeft, -marginTop], [width + marginRight, height + marginBottom]],
+          nodes: nodesCopy,
+          onClick: onValueClick,
+          onHover: onValueMouseOver,
+          onBlur: onValueMouseOut,
+          x: function x(d) {
+            return d.x0 + (d.x1 - d.x0) / 2;
+          },
+          y: function y(d) {
+            return d.y0 + (d.y1 - d.y0) / 2;
+          }
+        })
       );
@@ -142,8 +176,13 @@ }
   layout: 50,
-  margin: 20,
+  margin: DEFAULT_MARGINS,
   nodePadding: 10,
   nodeWidth: 10,
-  onBlur: NOOP,
-  onClick: NOOP,
-  onHover: NOOP
+  onValueMouseOver: NOOP,
+  onValueClick: NOOP,
+  onValueMouseOut: NOOP,
+  style: {
+    links: {},
+    rects: {},
+    labels: {}
+  }
 };
@@ -161,13 +200,16 @@ Sankey.propTypes = {
   })).isRequired,
-  margin: PropTypes.number,
+  margin: MarginPropType,
   nodePadding: PropTypes.number,
   nodes: PropTypes.arrayOf(PropTypes.object).isRequired,
   nodeWidth: PropTypes.number,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  onHover: PropTypes.func,
+  onValueMouseOver: PropTypes.func,
+  onValueClick: PropTypes.func,
+  onValueMouseOut: PropTypes.func,
+  style: PropTypes.shape({
+    links: PropTypes.object,
+    rects: PropTypes.object,
+    labels: PropTypes.object
+  }),
   width: PropTypes.number.isRequired
 };
-
-
 export default Sankey;

package.json

 {
   "name": "react-vis",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "license": "MIT",
@@ -47,3 +47,3 @@ "author": "Visualization Team <[e-mail]>",
     "d3-interpolate": "^1.1.4",
-    "d3-sankey-align": "^0.1.0",
+    "d3-sankey": "^0.7.1",
     "d3-scale": "^1.0.5",
@@ -50,0 +50,0 @@ "d3-shape": "^1.1.0",

README.md

@@ -21,3 +21,3 @@ <p align="right">
 
-<h5 align="center">Data Visualization oriented components</h5>
+<h5 align="center">A COMPOSABLE VISUALIZATION SYSTEM</h5>
 
@@ -28,3 +28,3 @@ ![demo](docs/markdown/assets/react-vis.gif?raw=true)
 
-A collection of react components to render common data visualization charts, such as **line/area/bar charts**, **heat maps**, **scatterplots**, **contour plots**, **pie and donut charts**, **sunbursts**, **radar charts**, and **tree maps**.
+A collection of react components to render common data visualization charts, such as **line/area/bar charts**, **heat maps**, **scatterplots**, **contour plots**, **pie and donut charts**, **sunbursts**, **radar charts**, **parallel coordinates**, and **tree maps**.
 
@@ -95,3 +95,3 @@ Some notable features:
 
-Take a look at the [folder with examples](examples/) or check out some docs:
+Take a look at the [folder with examples](showcase/examples/) or check out some docs:
 
@@ -106,2 +106,5 @@ - Common concepts:
   * [Sankey](docs/markdown/sankey.md) about making sankey diagrams.
+  * [Radar Chart](docs/markdown/radar-chart.md) about making radar charts.
+  * [Parallel Coordinates](docs/markdown/parallel-coordinates.md) about making parallel coordinate charts.
+  * [Sunbursts](docs/markdown/sunburst.md) about making sunburst diagrams.
   * [Legends](docs/markdown/legends.md) about the legends.
@@ -108,0 +111,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1681246

increased by1.37%

Number of package files

160

increased by2.56%

Lines of code

22346

increased by3.38%

Number of lines in readme file

124

increased by2.48%

Dependency changes

• + Addedd3-sankey@^0.7.1

• + Addedd3-sankey@0.7.1(transitive)

• - Removedd3-sankey-align@^0.1.0

• - Removedd3-array@0.7.1(transitive)

• - Removedd3-collection@0.1.2(transitive)

• - Removedd3-color@0.3.4(transitive)

• - Removedd3-interpolate@0.2.1(transitive)

• - Removedd3-sankey-align@0.1.0(transitive)