@nivo/chord - npm Package Compare versions

Comparing version 0.34.0-1 to 0.35.0

cjs/nivo-chord.js

@@ -7,49 +7,229 @@ 'use strict';
 
-var React = require('react');
-var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
-var reactMotion = require('react-motion');
+var legends = require('@nivo/legends');
+var compose = _interopDefault(require('recompose/compose'));
+var defaultProps = _interopDefault(require('recompose/defaultProps'));
+var withState = _interopDefault(require('recompose/withState'));
+var withPropsOnChange = _interopDefault(require('recompose/withPropsOnChange'));
 var pure = _interopDefault(require('recompose/pure'));
+var d3Shape = require('d3-shape');
+var d3Chord = require('d3-chord');
 var core = require('@nivo/core');
+var React = require('react');
+var React__default = _interopDefault(React);
 var lodash = require('lodash');
+var reactMotion = require('react-motion');
 var d3Format = require('d3-format');
-var compose = _interopDefault(require('recompose/compose'));
-var withPropsOnChange = _interopDefault(require('recompose/withPropsOnChange'));
-var legends = require('@nivo/legends');
 var setDisplayName = _interopDefault(require('recompose/setDisplayName'));
-var defaultProps = _interopDefault(require('recompose/defaultProps'));
-var withState = _interopDefault(require('recompose/withState'));
-var d3Shape = require('d3-shape');
-var d3Chord = require('d3-chord');
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var ChordArcTooltip = function ChordArcTooltip(_ref) {
-    var arc$$1 = _ref.arc,
-        theme = _ref.theme,
-        format$$1 = _ref.format;
-    return React__default.createElement(core.BasicTooltip, {
-        id: arc$$1.id,
-        value: arc$$1.value,
-        color: arc$$1.color,
-        enableChip: true,
-        theme: theme,
-        format: format$$1
-    });
+var ChordPropTypes = {
+    matrix: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
+    keys: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    padAngle: PropTypes.number.isRequired,
+    innerRadiusRatio: PropTypes.number.isRequired,
+    innerRadiusOffset: PropTypes.number.isRequired,
+
+    // arcs
+    arcOpacity: PropTypes.number.isRequired,
+    arcBorderWidth: PropTypes.number.isRequired,
+    arcBorderColor: PropTypes.any.isRequired,
+    getArcBorderColor: PropTypes.func.isRequired,
+
+    // ribbons
+    ribbonOpacity: PropTypes.number.isRequired,
+    ribbonBorderWidth: PropTypes.number.isRequired,
+    ribbonBorderColor: PropTypes.any.isRequired,
+    getRibbonBorderColor: PropTypes.func.isRequired,
+
+    // labels
+    enableLabel: PropTypes.bool.isRequired,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    getLabel: PropTypes.func.isRequired, // computed
+    labelOffset: PropTypes.number.isRequired,
+    labelRotation: PropTypes.number.isRequired,
+    labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    getLabelTextColor: PropTypes.func.isRequired, // computed
+
+    // colors
+    colors: PropTypes.any.isRequired,
+
+    // interactivity
+    isInteractive: PropTypes.bool.isRequired,
+    arcHoverOpacity: PropTypes.number.isRequired,
+    arcHoverOthersOpacity: PropTypes.number.isRequired,
+    ribbonHoverOpacity: PropTypes.number.isRequired,
+    ribbonHoverOthersOpacity: PropTypes.number.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    // canvas specific
+    pixelRatio: PropTypes.number.isRequired,
+
+    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
 };
 
-ChordArcTooltip.propTypes = {
-    arc: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-    format: PropTypes.func
+var ChordDefaultProps = {
+    padAngle: 0,
+    innerRadiusRatio: 0.9,
+    innerRadiusOffset: 0,
+
+    // arcs
+    arcOpacity: 1,
+    arcBorderWidth: 1,
+    arcBorderColor: 'inherit:darker(0.4)',
+
+    // ribbons
+    ribbonOpacity: 0.5,
+    ribbonBorderWidth: 1,
+    ribbonBorderColor: 'inherit:darker(0.4)',
+
+    // labels
+    enableLabel: true,
+    label: 'id',
+    labelOffset: 12,
+    labelRotation: 0,
+    labelTextColor: 'inherit:darker(1)',
+
+    // colors
+    colors: 'nivo',
+
+    // interactivity
+    isInteractive: true,
+    arcHoverOpacity: 1,
+    arcHoverOthersOpacity: 0.15,
+    ribbonHoverOpacity: 0.85,
+    ribbonHoverOthersOpacity: 0.15,
+
+    // canvas specific
+    pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
+
+    legends: []
 };
 
-var ChordArcTooltip$1 = pure(ChordArcTooltip);
+var enhance = (function (Component) {
+    return compose(defaultProps(ChordDefaultProps), withState('currentArc', 'setCurrentArc', null), withState('currentRibbon', 'setCurrentRibbon', null), core.withMotion(), core.withTheme(), core.withDimensions(), withPropsOnChange(['label'], function (_ref) {
+        var label = _ref.label;
+        return {
+            getLabel: core.getLabelGenerator(label)
+        };
+    }), withPropsOnChange(['padAngle'], function (_ref2) {
+        var padAngle = _ref2.padAngle;
+        return {
+            chord: d3Chord.chord().padAngle(padAngle)
+        };
+    }), withPropsOnChange(['labelTextColor'], function (_ref3) {
+        var labelTextColor = _ref3.labelTextColor;
+        return {
+            getLabelTextColor: core.getInheritedColorGenerator(labelTextColor, 'labels.textColor')
+        };
+    }), withPropsOnChange(['colors', 'keys'], function (_ref4) {
+        var colors = _ref4.colors,
+            keys = _ref4.keys;
 
+        var color = core.getColorRange(colors);
+
+        return {
+            colorById: keys.reduce(function (acc, key) {
+                acc[key] = color(key);
+                return acc;
+            }, {})
+        };
+    }), withPropsOnChange(['width', 'height', 'innerRadiusRatio', 'innerRadiusOffset'], function (_ref5) {
+        var width = _ref5.width,
+            height = _ref5.height,
+            innerRadiusRatio = _ref5.innerRadiusRatio,
+            innerRadiusOffset = _ref5.innerRadiusOffset;
+
+        var radius = Math.min(width, height) / 2;
+        var innerRadius = radius * innerRadiusRatio;
+        var ribbonRadius = radius * (innerRadiusRatio - innerRadiusOffset);
+
+        var arcGenerator = d3Shape.arc().outerRadius(radius).innerRadius(innerRadius);
+        var ribbonGenerator = d3Chord.ribbon().radius(ribbonRadius);
+
+        return { radius: radius, innerRadius: innerRadius, arcGenerator: arcGenerator, ribbonGenerator: ribbonGenerator };
+    }), withPropsOnChange(['arcOpacity', 'ribbonOpacity'], function (_ref6) {
+        var arcOpacity = _ref6.arcOpacity,
+            ribbonOpacity = _ref6.ribbonOpacity;
+        return {
+            getArcOpacity: function getArcOpacity() {
+                return arcOpacity;
+            },
+            getRibbonOpacity: function getRibbonOpacity() {
+                return ribbonOpacity;
+            }
+        };
+    }), withPropsOnChange(['isInteractive', 'currentArc', 'arcHoverOpacity', 'arcHoverOthersOpacity', 'currentRibbon', 'ribbonHoverOpacity', 'ribbonHoverOthersOpacity'], function (_ref7) {
+        var isInteractive = _ref7.isInteractive,
+            currentArc = _ref7.currentArc,
+            arcHoverOpacity = _ref7.arcHoverOpacity,
+            arcHoverOthersOpacity = _ref7.arcHoverOthersOpacity,
+            currentRibbon = _ref7.currentRibbon,
+            ribbonHoverOpacity = _ref7.ribbonHoverOpacity,
+            ribbonHoverOthersOpacity = _ref7.ribbonHoverOthersOpacity;
+
+        if (!isInteractive || !currentArc && !currentRibbon) return null;
+
+        var getArcOpacity = void 0;
+        var getRibbonOpacity = void 0;
+        if (isInteractive) {
+            if (currentArc) {
+                getArcOpacity = function getArcOpacity(arc) {
+                    if (arc.id === currentArc.id) return arcHoverOpacity;
+                    return arcHoverOthersOpacity;
+                };
+                getRibbonOpacity = function getRibbonOpacity(ribbon) {
+                    if (ribbon.source.id === currentArc.id || ribbon.target.id === currentArc.id) return ribbonHoverOpacity;
+                    return ribbonHoverOthersOpacity;
+                };
+            } else if (currentRibbon) {
+                getArcOpacity = function getArcOpacity(arc) {
+                    if (arc.id === currentRibbon.source.id || arc.id === currentRibbon.target.id) return arcHoverOpacity;
+                    return arcHoverOthersOpacity;
+                };
+                getRibbonOpacity = function getRibbonOpacity(ribbon) {
+                    if (ribbon.source.id === currentRibbon.source.id && ribbon.target.id === currentRibbon.target.id) return ribbonHoverOpacity;
+                    return ribbonHoverOthersOpacity;
+                };
+            }
+        }
+
+        return { getArcOpacity: getArcOpacity, getRibbonOpacity: getRibbonOpacity };
+    }), withPropsOnChange(['chord', 'colorById', 'matrix', 'keys'], function (_ref8) {
+        var chord = _ref8.chord,
+            colorById = _ref8.colorById,
+            matrix = _ref8.matrix,
+            keys = _ref8.keys;
+
+        var ribbons = chord(matrix);
+        ribbons.forEach(function (ribbon) {
+            ribbon.source.id = keys[ribbon.source.index];
+            ribbon.source.color = colorById[ribbon.source.id];
+            ribbon.target.id = keys[ribbon.target.index];
+            ribbon.target.color = colorById[ribbon.target.id];
+            var ribbonKeys = [ribbon.source.id, ribbon.target.id];
+            ribbonKeys.sort();
+            ribbon.key = ribbonKeys.sort().join('.');
+        });
+
+        var arcs = ribbons.groups.map(function (arc) {
+            arc.key = arc.id = keys[arc.index];
+            arc.color = colorById[arc.id];
+            return arc;
+        });
+
+        return { ribbons: ribbons, arcs: arcs };
+    }), withPropsOnChange(['arcBorderColor'], function (_ref9) {
+        var arcBorderColor = _ref9.arcBorderColor;
+        return {
+            getArcBorderColor: core.getInheritedColorGenerator(arcBorderColor)
+        };
+    }), withPropsOnChange(['ribbonBorderColor'], function (_ref10) {
+        var ribbonBorderColor = _ref10.ribbonBorderColor;
+        return {
+            getRibbonBorderColor: core.getInheritedColorGenerator(ribbonBorderColor)
+        };
+    }), pure)(Component);
+});
+
 var classCallCheck = function (instance, Constructor) {
@@ -119,236 +299,2 @@ if (!(instance instanceof Constructor)) {
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var ChordArcsSvg = function ChordArcsSvg(_ref) {
-    var arcs = _ref.arcs,
-        borderWidth = _ref.borderWidth,
-        getBorderColor = _ref.getBorderColor,
-        getOpacity = _ref.getOpacity,
-        shapeGenerator = _ref.shapeGenerator,
-        theme = _ref.theme,
-        tooltipFormat = _ref.tooltipFormat,
-        setCurrent = _ref.setCurrent,
-        showTooltip = _ref.showTooltip,
-        hideTooltip = _ref.hideTooltip,
-        animate = _ref.animate,
-        motionDamping = _ref.motionDamping,
-        motionStiffness = _ref.motionStiffness;
-
-    var commonProps = function commonProps(arc$$1) {
-        var arcTooltip = React__default.createElement(ChordArcTooltip$1, { arc: arc$$1, theme: theme, format: tooltipFormat });
-
-        return {
-            strokeWidth: borderWidth,
-            onMouseEnter: function onMouseEnter(e) {
-                setCurrent(arc$$1);
-                showTooltip(arcTooltip, e);
-            },
-            onMouseMove: function onMouseMove(e) {
-                showTooltip(arcTooltip, e);
-            },
-            onMouseLeave: function onMouseLeave() {
-                setCurrent(null);
-                hideTooltip();
-            }
-        };
-    };
-
-    if (animate !== true) {
-        return React__default.createElement(
-            React.Fragment,
-            null,
-            arcs.map(function (arc$$1) {
-                var opacity = getOpacity(arc$$1);
-
-                return React__default.createElement('path', _extends({
-                    key: arc$$1.key,
-                    d: shapeGenerator(arc$$1),
-                    fill: arc$$1.color,
-                    fillOpacity: opacity,
-                    stroke: getBorderColor(arc$$1),
-                    strokeOpacity: opacity
-                }, commonProps(arc$$1)));
-            })
-        );
-    }
-
-    var springConfig = {
-        damping: motionDamping,
-        stiffness: motionStiffness,
-        precision: 0.001
-    };
-
-    return React__default.createElement(
-        reactMotion.TransitionMotion,
-        {
-            styles: arcs.map(function (arc$$1) {
-                return {
-                    key: arc$$1.key,
-                    data: arc$$1,
-                    style: _extends({
-                        startAngle: reactMotion.spring(arc$$1.startAngle, springConfig),
-                        endAngle: reactMotion.spring(arc$$1.endAngle, springConfig),
-                        opacity: reactMotion.spring(getOpacity(arc$$1), springConfig)
-                    }, core.colorMotionSpring(arc$$1.color, springConfig))
-                };
-            })
-        },
-        function (interpolatedStyles) {
-            return React__default.createElement(
-                React.Fragment,
-                null,
-                interpolatedStyles.map(function (_ref2) {
-                    var key = _ref2.key,
-                        style = _ref2.style,
-                        arc$$1 = _ref2.data;
-
-                    var color = core.getInterpolatedColor(style);
-
-                    return React__default.createElement('path', _extends({
-                        key: key,
-                        d: shapeGenerator({
-                            startAngle: style.startAngle,
-                            endAngle: style.endAngle
-                        }),
-                        fill: color,
-                        fillOpacity: style.opacity,
-                        stroke: getBorderColor(_extends({}, arc$$1, { color: color })),
-                        strokeOpacity: style.opacity
-                    }, commonProps(arc$$1)));
-                })
-            );
-        }
-    );
-};
-
-ChordArcsSvg.propTypes = _extends({
-    arcs: PropTypes.array.isRequired,
-    shapeGenerator: PropTypes.func.isRequired,
-    borderWidth: PropTypes.number.isRequired,
-    getBorderColor: PropTypes.func.isRequired,
-    getOpacity: PropTypes.func.isRequired,
-    setCurrent: PropTypes.func.isRequired,
-    theme: PropTypes.object.isRequired,
-    showTooltip: PropTypes.func.isRequired,
-    hideTooltip: PropTypes.func.isRequired,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-}, core.motionPropTypes);
-
-var ChordArcsSvg$1 = pure(ChordArcsSvg);
-
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var ChordLabelsSvg = function ChordLabelsSvg(_ref) {
-    var arcs = _ref.arcs,
-        radius = _ref.radius,
-        rotation = _ref.rotation,
-        getLabel = _ref.getLabel,
-        getColor = _ref.getColor,
-        theme = _ref.theme,
-        animate = _ref.animate,
-        motionDamping = _ref.motionDamping,
-        motionStiffness = _ref.motionStiffness;
-
-    if (animate !== true) {
-        return React__default.createElement(
-            React.Fragment,
-            null,
-            arcs.map(function (arc$$1) {
-                var color = getColor(arc$$1, theme);
-                var angle = core.midAngle(arc$$1);
-                var textProps = core.getPolarLabelProps(radius, angle, rotation);
-
-                return React__default.createElement(
-                    'text',
-                    {
-                        key: arc$$1.key,
-                        transform: 'translate(' + textProps.x + ', ' + textProps.y + ') rotate(' + textProps.rotate + ')',
-                        style: { pointerEvents: 'none', fill: color },
-                        textAnchor: textProps.align,
-                        alignmentBaseline: textProps.baseline
-                    },
-                    getLabel(arc$$1)
-                );
-            })
-        );
-    }
-
-    var springConfig = {
-        damping: motionDamping,
-        stiffness: motionStiffness
-    };
-
-    return React__default.createElement(
-        reactMotion.TransitionMotion,
-        {
-            styles: arcs.map(function (arc$$1) {
-                var angle = core.midAngle(arc$$1);
-
-                return {
-                    key: arc$$1.key,
-                    data: arc$$1,
-                    style: {
-                        angle: reactMotion.spring(angle, springConfig)
-                    }
-                };
-            })
-        },
-        function (interpolatedStyles) {
-            return React__default.createElement(
-                React.Fragment,
-                null,
-                interpolatedStyles.map(function (_ref2) {
-                    var key = _ref2.key,
-                        style = _ref2.style,
-                        arc$$1 = _ref2.data;
-
-                    var color = getColor(arc$$1, theme);
-                    var textProps = core.getPolarLabelProps(radius, style.angle, rotation);
-
-                    return React__default.createElement(
-                        'text',
-                        {
-                            key: key,
-                            transform: 'translate(' + textProps.x + ', ' + textProps.y + ') rotate(' + textProps.rotate + ')',
-                            style: { pointerEvents: 'none', fill: color },
-                            textAnchor: textProps.align,
-                            alignmentBaseline: textProps.baseline
-                        },
-                        getLabel(arc$$1)
-                    );
-                })
-            );
-        }
-    );
-};
-
-ChordLabelsSvg.propTypes = _extends({
-    arcs: PropTypes.array.isRequired,
-    radius: PropTypes.number.isRequired,
-    rotation: PropTypes.number.isRequired,
-    getLabel: PropTypes.func.isRequired,
-    getColor: PropTypes.func.isRequired,
-    theme: PropTypes.object.isRequired
-}, core.motionPropTypes);
-
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 /**
@@ -408,6 +354,6 @@ * Used to get ribbon angles, instead of using source and target arcs,
 var ribbonWillEnter = function ribbonWillEnter(_ref2) {
-    var ribbon$$1 = _ref2.data;
-    return _extends({}, getRibbonAngles(ribbon$$1, true), {
+    var ribbon = _ref2.data;
+    return _extends({}, getRibbonAngles(ribbon, true), {
         opacity: 0
-    }, core.colorMotionSpring(ribbon$$1.source.color));
+    }, core.colorMotionSpring(ribbon.source.color));
 };
@@ -417,10 +363,10 @@
     return function (_ref3) {
-        var ribbon$$1 = _ref3.data;
-        return _extends({}, getRibbonAngles(ribbon$$1, true, springConfig), {
+        var ribbon = _ref3.data;
+        return _extends({}, getRibbonAngles(ribbon, true, springConfig), {
             opacity: 0
-        }, core.colorMotionSpring(ribbon$$1.source.color, springConfig));
+        }, core.colorMotionSpring(ribbon.source.color, springConfig));
     };
 };
 
-var ChordRibbonsSvg = function ChordRibbonsSvg(_ref4) {
+var ChordRibbons = function ChordRibbons(_ref4) {
     var ribbons = _ref4.ribbons,
@@ -440,14 +386,14 @@ shapeGenerator = _ref4.shapeGenerator,
 
-    var commonProps = function commonProps(ribbon$$1) {
+    var commonProps = function commonProps(ribbon) {
         var ribbonTooltip = React__default.createElement(core.TableTooltip, {
             theme: theme,
-            rows: [[React__default.createElement(core.Chip, { key: 'chip', color: ribbon$$1.source.color }), React__default.createElement(
+            rows: [[React__default.createElement(core.Chip, { key: 'chip', color: ribbon.source.color }), React__default.createElement(
                 'strong',
                 { key: 'id' },
-                ribbon$$1.source.id
-            ), tooltipFormat ? tooltipFormat(ribbon$$1.source.value) : ribbon$$1.source.value], [React__default.createElement(core.Chip, { key: 'chip', color: ribbon$$1.target.color }), React__default.createElement(
+                ribbon.source.id
+            ), tooltipFormat ? tooltipFormat(ribbon.source.value) : ribbon.source.value], [React__default.createElement(core.Chip, { key: 'chip', color: ribbon.target.color }), React__default.createElement(
                 'strong',
                 { key: 'id' },
-                ribbon$$1.target.id
-            ), tooltipFormat ? tooltipFormat(ribbon$$1.target.value) : ribbon$$1.target.value]]
+                ribbon.target.id
+            ), tooltipFormat ? tooltipFormat(ribbon.target.value) : ribbon.target.value]]
         });
@@ -458,3 +404,3 @@
             onMouseEnter: function onMouseEnter(e) {
-                setCurrent(ribbon$$1);
+                setCurrent(ribbon);
                 showTooltip(ribbonTooltip, e);
@@ -474,15 +420,15 @@ },
         return React__default.createElement(
-            React.Fragment,
+            'g',
             null,
-            ribbons.map(function (ribbon$$1) {
-                var opacity = getOpacity(ribbon$$1);
+            ribbons.map(function (ribbon) {
+                var opacity = getOpacity(ribbon);
 
                 return React__default.createElement('path', _extends({
-                    key: ribbon$$1.key,
-                    d: shapeGenerator(ribbon$$1),
-                    fill: ribbon$$1.source.color,
+                    key: ribbon.key,
+                    d: shapeGenerator(ribbon),
+                    fill: ribbon.source.color,
                     fillOpacity: opacity,
-                    stroke: getBorderColor(_extends({}, ribbon$$1, { color: ribbon$$1.source.color })),
+                    stroke: getBorderColor(_extends({}, ribbon, { color: ribbon.source.color })),
                     strokeOpacity: opacity
-                }, commonProps(ribbon$$1)));
+                }, commonProps(ribbon)));
             })
@@ -503,9 +449,9 @@ );
             willLeave: ribbonWillLeave(springConfig),
-            styles: ribbons.map(function (ribbon$$1) {
+            styles: ribbons.map(function (ribbon) {
                 return {
-                    key: ribbon$$1.key,
-                    data: ribbon$$1,
-                    style: _extends({}, getRibbonAngles(ribbon$$1, false, springConfig), {
-                        opacity: reactMotion.spring(getOpacity(ribbon$$1), springConfig)
-                    }, core.colorMotionSpring(ribbon$$1.source.color, springConfig))
+                    key: ribbon.key,
+                    data: ribbon,
+                    style: _extends({}, getRibbonAngles(ribbon, false, springConfig), {
+                        opacity: reactMotion.spring(getOpacity(ribbon), springConfig)
+                    }, core.colorMotionSpring(ribbon.source.color, springConfig))
                 };
@@ -516,3 +462,3 @@ })
             return React__default.createElement(
-                React.Fragment,
+                'g',
                 null,
@@ -522,3 +468,3 @@ interpolatedStyles.map(function (_ref5) {
                         style = _ref5.style,
-                        ribbon$$1 = _ref5.data;
+                        ribbon = _ref5.data;
 
@@ -541,5 +487,5 @@ var color = core.getInterpolatedColor(style);
                         fillOpacity: style.opacity,
-                        stroke: getBorderColor(_extends({}, ribbon$$1, { color: color })),
+                        stroke: getBorderColor(_extends({}, ribbon, { color: color })),
                         strokeOpacity: style.opacity
-                    }, commonProps(ribbon$$1)));
+                    }, commonProps(ribbon)));
                 })
@@ -551,3 +497,3 @@ );
 
-ChordRibbonsSvg.propTypes = _extends({
+ChordRibbons.propTypes = _extends({
     ribbons: PropTypes.array.isRequired,
@@ -565,3 +511,3 @@ shapeGenerator: PropTypes.func.isRequired,
 
-var enhance = compose(withPropsOnChange(['tooltipFormat'], function (_ref6) {
+var enhance$1 = compose(withPropsOnChange(['tooltipFormat'], function (_ref6) {
     var tooltipFormat = _ref6.tooltipFormat;
@@ -573,239 +519,237 @@
 
-var ChordRibbonsSvg$1 = enhance(ChordRibbonsSvg);
+var ChordRibbons$1 = enhance$1(ChordRibbons);
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var ChordPropTypes = {
-    matrix: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
-    keys: PropTypes.arrayOf(PropTypes.string).isRequired,
+var ChordArcTooltip = function ChordArcTooltip(_ref) {
+    var arc = _ref.arc,
+        theme = _ref.theme,
+        format = _ref.format;
+    return React__default.createElement(core.BasicTooltip, {
+        id: arc.id,
+        value: arc.value,
+        color: arc.color,
+        enableChip: true,
+        theme: theme,
+        format: format
+    });
+};
 
-    padAngle: PropTypes.number.isRequired,
-    innerRadiusRatio: PropTypes.number.isRequired,
-    innerRadiusOffset: PropTypes.number.isRequired,
+ChordArcTooltip.propTypes = {
+    arc: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+    format: PropTypes.func
+};
 
-    // arcs
-    arcOpacity: PropTypes.number.isRequired,
-    arcBorderWidth: PropTypes.number.isRequired,
-    arcBorderColor: PropTypes.any.isRequired,
-    getArcBorderColor: PropTypes.func.isRequired,
+var ChordArcTooltip$1 = pure(ChordArcTooltip);
 
-    // ribbons
-    ribbonOpacity: PropTypes.number.isRequired,
-    ribbonBorderWidth: PropTypes.number.isRequired,
-    ribbonBorderColor: PropTypes.any.isRequired,
-    getRibbonBorderColor: PropTypes.func.isRequired,
+var ChordArcs = function ChordArcs(_ref) {
+    var arcs = _ref.arcs,
+        borderWidth = _ref.borderWidth,
+        getBorderColor = _ref.getBorderColor,
+        getOpacity = _ref.getOpacity,
+        shapeGenerator = _ref.shapeGenerator,
+        theme = _ref.theme,
+        tooltipFormat = _ref.tooltipFormat,
+        setCurrent = _ref.setCurrent,
+        showTooltip = _ref.showTooltip,
+        hideTooltip = _ref.hideTooltip,
+        animate = _ref.animate,
+        motionDamping = _ref.motionDamping,
+        motionStiffness = _ref.motionStiffness;
 
-    // labels
-    enableLabel: PropTypes.bool.isRequired,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-    getLabel: PropTypes.func.isRequired, // computed
-    labelOffset: PropTypes.number.isRequired,
-    labelRotation: PropTypes.number.isRequired,
-    labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-    getLabelTextColor: PropTypes.func.isRequired, // computed
+    var commonProps = function commonProps(arc) {
+        var arcTooltip = React__default.createElement(ChordArcTooltip$1, { arc: arc, theme: theme, format: tooltipFormat });
 
-    // colors
-    colors: PropTypes.any.isRequired,
+        return {
+            strokeWidth: borderWidth,
+            onMouseEnter: function onMouseEnter(e) {
+                setCurrent(arc);
+                showTooltip(arcTooltip, e);
+            },
+            onMouseMove: function onMouseMove(e) {
+                showTooltip(arcTooltip, e);
+            },
+            onMouseLeave: function onMouseLeave() {
+                setCurrent(null);
+                hideTooltip();
+            }
+        };
+    };
 
-    // interactivity
-    isInteractive: PropTypes.bool.isRequired,
-    arcHoverOpacity: PropTypes.number.isRequired,
-    arcHoverOthersOpacity: PropTypes.number.isRequired,
-    ribbonHoverOpacity: PropTypes.number.isRequired,
-    ribbonHoverOthersOpacity: PropTypes.number.isRequired,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    if (animate !== true) {
+        return React__default.createElement(
+            'g',
+            null,
+            arcs.map(function (arc) {
+                var opacity = getOpacity(arc);
 
-    // canvas specific
-    pixelRatio: PropTypes.number.isRequired,
+                return React__default.createElement('path', _extends({
+                    key: arc.key,
+                    d: shapeGenerator(arc),
+                    fill: arc.color,
+                    fillOpacity: opacity,
+                    stroke: getBorderColor(arc),
+                    strokeOpacity: opacity
+                }, commonProps(arc)));
+            })
+        );
+    }
 
-    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
-};
+    var springConfig = {
+        damping: motionDamping,
+        stiffness: motionStiffness,
+        precision: 0.001
+    };
 
-var ChordDefaultProps = {
-    padAngle: 0,
-    innerRadiusRatio: 0.9,
-    innerRadiusOffset: 0,
+    return React__default.createElement(
+        reactMotion.TransitionMotion,
+        {
+            styles: arcs.map(function (arc) {
+                return {
+                    key: arc.key,
+                    data: arc,
+                    style: _extends({
+                        startAngle: reactMotion.spring(arc.startAngle, springConfig),
+                        endAngle: reactMotion.spring(arc.endAngle, springConfig),
+                        opacity: reactMotion.spring(getOpacity(arc), springConfig)
+                    }, core.colorMotionSpring(arc.color, springConfig))
+                };
+            })
+        },
+        function (interpolatedStyles) {
+            return React__default.createElement(
+                'g',
+                null,
+                interpolatedStyles.map(function (_ref2) {
+                    var key = _ref2.key,
+                        style = _ref2.style,
+                        arc = _ref2.data;
 
-    // arcs
-    arcOpacity: 1,
-    arcBorderWidth: 1,
-    arcBorderColor: 'inherit:darker(0.4)',
+                    var color = core.getInterpolatedColor(style);
 
-    // ribbons
-    ribbonOpacity: 0.5,
-    ribbonBorderWidth: 1,
-    ribbonBorderColor: 'inherit:darker(0.4)',
-
-    // labels
-    enableLabel: true,
-    label: 'id',
-    labelOffset: 12,
-    labelRotation: 0,
-    labelTextColor: 'inherit:darker(1)',
-
-    // colors
-    colors: 'nivo',
-
-    // interactivity
-    isInteractive: true,
-    arcHoverOpacity: 1,
-    arcHoverOthersOpacity: 0.15,
-    ribbonHoverOpacity: 0.85,
-    ribbonHoverOthersOpacity: 0.15,
-
-    // canvas specific
-    pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
-
-    legends: []
+                    return React__default.createElement('path', _extends({
+                        key: key,
+                        d: shapeGenerator({
+                            startAngle: style.startAngle,
+                            endAngle: style.endAngle
+                        }),
+                        fill: color,
+                        fillOpacity: style.opacity,
+                        stroke: getBorderColor(_extends({}, arc, { color: color })),
+                        strokeOpacity: style.opacity
+                    }, commonProps(arc)));
+                })
+            );
+        }
+    );
 };
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var enhance$1 = (function (Component$$1) {
-    return compose(defaultProps(ChordDefaultProps), withState('currentArc', 'setCurrentArc', null), withState('currentRibbon', 'setCurrentRibbon', null), core.withMotion(), core.withTheme(), core.withDimensions(), withPropsOnChange(['label'], function (_ref) {
-        var label = _ref.label;
-        return {
-            getLabel: core.getLabelGenerator(label)
-        };
-    }), withPropsOnChange(['padAngle'], function (_ref2) {
-        var padAngle = _ref2.padAngle;
-        return {
-            chord: d3Chord.chord().padAngle(padAngle)
-        };
-    }), withPropsOnChange(['labelTextColor'], function (_ref3) {
-        var labelTextColor = _ref3.labelTextColor;
-        return {
-            getLabelTextColor: core.getInheritedColorGenerator(labelTextColor, 'labels.textColor')
-        };
-    }), withPropsOnChange(['colors', 'keys'], function (_ref4) {
-        var colors = _ref4.colors,
-            keys = _ref4.keys;
+ChordArcs.propTypes = _extends({
+    arcs: PropTypes.array.isRequired,
+    shapeGenerator: PropTypes.func.isRequired,
+    borderWidth: PropTypes.number.isRequired,
+    getBorderColor: PropTypes.func.isRequired,
+    getOpacity: PropTypes.func.isRequired,
+    setCurrent: PropTypes.func.isRequired,
+    theme: PropTypes.object.isRequired,
+    showTooltip: PropTypes.func.isRequired,
+    hideTooltip: PropTypes.func.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+}, core.motionPropTypes);
 
-        var color = core.getColorRange(colors);
+var ChordArcs$1 = pure(ChordArcs);
 
-        return {
-            colorById: keys.reduce(function (acc, key) {
-                acc[key] = color(key);
-                return acc;
-            }, {})
-        };
-    }), withPropsOnChange(['width', 'height', 'innerRadiusRatio', 'innerRadiusOffset'], function (_ref5) {
-        var width = _ref5.width,
-            height = _ref5.height,
-            innerRadiusRatio = _ref5.innerRadiusRatio,
-            innerRadiusOffset = _ref5.innerRadiusOffset;
+var ChordLabels = function ChordLabels(_ref) {
+    var arcs = _ref.arcs,
+        radius = _ref.radius,
+        rotation = _ref.rotation,
+        getLabel = _ref.getLabel,
+        getColor = _ref.getColor,
+        theme = _ref.theme,
+        animate = _ref.animate,
+        motionDamping = _ref.motionDamping,
+        motionStiffness = _ref.motionStiffness;
 
-        var radius = Math.min(width, height) / 2;
-        var innerRadius = radius * innerRadiusRatio;
-        var ribbonRadius = radius * (innerRadiusRatio - innerRadiusOffset);
+    if (animate !== true) {
+        return React__default.createElement(
+            'g',
+            null,
+            arcs.map(function (arc) {
+                var color = getColor(arc, theme);
+                var angle = core.midAngle(arc);
+                var textProps = core.getPolarLabelProps(radius, angle, rotation);
 
-        var arcGenerator = d3Shape.arc().outerRadius(radius).innerRadius(innerRadius);
-        var ribbonGenerator = d3Chord.ribbon().radius(ribbonRadius);
+                return React__default.createElement(
+                    'text',
+                    {
+                        key: arc.key,
+                        transform: 'translate(' + textProps.x + ', ' + textProps.y + ') rotate(' + textProps.rotate + ')',
+                        style: { pointerEvents: 'none', fill: color },
+                        textAnchor: textProps.align,
+                        alignmentBaseline: textProps.baseline
+                    },
+                    getLabel(arc)
+                );
+            })
+        );
+    }
 
-        return { radius: radius, innerRadius: innerRadius, arcGenerator: arcGenerator, ribbonGenerator: ribbonGenerator };
-    }), withPropsOnChange(['arcOpacity', 'ribbonOpacity'], function (_ref6) {
-        var arcOpacity = _ref6.arcOpacity,
-            ribbonOpacity = _ref6.ribbonOpacity;
-        return {
-            getArcOpacity: function getArcOpacity() {
-                return arcOpacity;
-            },
-            getRibbonOpacity: function getRibbonOpacity() {
-                return ribbonOpacity;
-            }
-        };
-    }), withPropsOnChange(['isInteractive', 'currentArc', 'arcHoverOpacity', 'arcHoverOthersOpacity', 'currentRibbon', 'ribbonHoverOpacity', 'ribbonHoverOthersOpacity'], function (_ref7) {
-        var isInteractive = _ref7.isInteractive,
-            currentArc = _ref7.currentArc,
-            arcHoverOpacity = _ref7.arcHoverOpacity,
-            arcHoverOthersOpacity = _ref7.arcHoverOthersOpacity,
-            currentRibbon = _ref7.currentRibbon,
-            ribbonHoverOpacity = _ref7.ribbonHoverOpacity,
-            ribbonHoverOthersOpacity = _ref7.ribbonHoverOthersOpacity;
+    var springConfig = {
+        damping: motionDamping,
+        stiffness: motionStiffness
+    };
 
-        if (!isInteractive || !currentArc && !currentRibbon) return null;
+    return React__default.createElement(
+        reactMotion.TransitionMotion,
+        {
+            styles: arcs.map(function (arc) {
+                var angle = core.midAngle(arc);
 
-        var getArcOpacity = void 0;
-        var getRibbonOpacity = void 0;
-        if (isInteractive) {
-            if (currentArc) {
-                getArcOpacity = function getArcOpacity(arc$$1) {
-                    if (arc$$1.id === currentArc.id) return arcHoverOpacity;
-                    return arcHoverOthersOpacity;
+                return {
+                    key: arc.key,
+                    data: arc,
+                    style: {
+                        angle: reactMotion.spring(angle, springConfig)
+                    }
                 };
-                getRibbonOpacity = function getRibbonOpacity(ribbon$$1) {
-                    if (ribbon$$1.source.id === currentArc.id || ribbon$$1.target.id === currentArc.id) return ribbonHoverOpacity;
-                    return ribbonHoverOthersOpacity;
-                };
-            } else if (currentRibbon) {
-                getArcOpacity = function getArcOpacity(arc$$1) {
-                    if (arc$$1.id === currentRibbon.source.id || arc$$1.id === currentRibbon.target.id) return arcHoverOpacity;
-                    return arcHoverOthersOpacity;
-                };
-                getRibbonOpacity = function getRibbonOpacity(ribbon$$1) {
-                    if (ribbon$$1.source.id === currentRibbon.source.id && ribbon$$1.target.id === currentRibbon.target.id) return ribbonHoverOpacity;
-                    return ribbonHoverOthersOpacity;
-                };
-            }
-        }
+            })
+        },
+        function (interpolatedStyles) {
+            return React__default.createElement(
+                'g',
+                null,
+                interpolatedStyles.map(function (_ref2) {
+                    var key = _ref2.key,
+                        style = _ref2.style,
+                        arc = _ref2.data;
 
-        return { getArcOpacity: getArcOpacity, getRibbonOpacity: getRibbonOpacity };
-    }), withPropsOnChange(['chord', 'colorById', 'matrix', 'keys'], function (_ref8) {
-        var chord$$1 = _ref8.chord,
-            colorById = _ref8.colorById,
-            matrix = _ref8.matrix,
-            keys = _ref8.keys;
+                    var color = getColor(arc, theme);
+                    var textProps = core.getPolarLabelProps(radius, style.angle, rotation);
 
-        var ribbons = chord$$1(matrix);
-        ribbons.forEach(function (ribbon$$1) {
-            ribbon$$1.source.id = keys[ribbon$$1.source.index];
-            ribbon$$1.source.color = colorById[ribbon$$1.source.id];
-            ribbon$$1.target.id = keys[ribbon$$1.target.index];
-            ribbon$$1.target.color = colorById[ribbon$$1.target.id];
-            var ribbonKeys = [ribbon$$1.source.id, ribbon$$1.target.id];
-            ribbonKeys.sort();
-            ribbon$$1.key = ribbonKeys.sort().join('.');
-        });
+                    return React__default.createElement(
+                        'text',
+                        {
+                            key: key,
+                            transform: 'translate(' + textProps.x + ', ' + textProps.y + ') rotate(' + textProps.rotate + ')',
+                            style: { pointerEvents: 'none', fill: color },
+                            textAnchor: textProps.align,
+                            alignmentBaseline: textProps.baseline
+                        },
+                        getLabel(arc)
+                    );
+                })
+            );
+        }
+    );
+};
 
-        var arcs = ribbons.groups.map(function (arc$$1) {
-            arc$$1.key = arc$$1.id = keys[arc$$1.index];
-            arc$$1.color = colorById[arc$$1.id];
-            return arc$$1;
-        });
+ChordLabels.propTypes = _extends({
+    arcs: PropTypes.array.isRequired,
+    radius: PropTypes.number.isRequired,
+    rotation: PropTypes.number.isRequired,
+    getLabel: PropTypes.func.isRequired,
+    getColor: PropTypes.func.isRequired,
+    theme: PropTypes.object.isRequired
+}, core.motionPropTypes);
 
-        return { ribbons: ribbons, arcs: arcs };
-    }), withPropsOnChange(['arcBorderColor'], function (_ref9) {
-        var arcBorderColor = _ref9.arcBorderColor;
-        return {
-            getArcBorderColor: core.getInheritedColorGenerator(arcBorderColor)
-        };
-    }), withPropsOnChange(['ribbonBorderColor'], function (_ref10) {
-        var ribbonBorderColor = _ref10.ribbonBorderColor;
-        return {
-            getRibbonBorderColor: core.getInheritedColorGenerator(ribbonBorderColor)
-        };
-    }), pure)(Component$$1);
-});
-
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var ChordSvg = function ChordSvg(_ref) {
+var Chord = function Chord(_ref) {
     var margin = _ref.margin,
@@ -851,6 +795,6 @@ width = _ref.width,
 
-    var legendData = arcs.map(function (arc$$1) {
+    var legendData = arcs.map(function (arc) {
         return {
-            label: arc$$1.id,
-            fill: arc$$1.color
+            label: arc.id,
+            fill: arc.color
         };
@@ -872,3 +816,3 @@ });
                     { transform: 'translate(' + centerX + ', ' + centerY + ')' },
-                    React__default.createElement(ChordRibbonsSvg$1, _extends({
+                    React__default.createElement(ChordRibbons$1, _extends({
                         ribbons: ribbons,
@@ -885,3 +829,3 @@ shapeGenerator: ribbonGenerator,
                     }, motionProps)),
-                    React__default.createElement(ChordArcsSvg$1, _extends({
+                    React__default.createElement(ChordArcs$1, _extends({
                         arcs: arcs,
@@ -898,3 +842,3 @@ shapeGenerator: arcGenerator,
                     }, motionProps)),
-                    enableLabel && React__default.createElement(ChordLabelsSvg, _extends({
+                    enableLabel && React__default.createElement(ChordLabels, _extends({
                         arcs: arcs,
@@ -922,43 +866,6 @@ radius: radius + labelOffset,
 
-ChordSvg.propTypes = ChordPropTypes;
+Chord.propTypes = ChordPropTypes;
 
-var ChordSvg$1 = setDisplayName('ChordSvg')(enhance$1(ChordSvg));
+var Chord$1 = setDisplayName('Chord')(enhance(Chord));
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-var ResponsiveChordSvg = function ResponsiveChordSvg(props) {
-    return React__default.createElement(
-        core.ResponsiveWrapper,
-        null,
-        function (_ref) {
-            var width = _ref.width,
-                height = _ref.height;
-            return React__default.createElement(ChordSvg$1, _extends({ width: width, height: height }, props));
-        }
-    );
-};
-
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 var ChordCanvas = function (_Component) {
@@ -997,6 +904,6 @@ inherits(ChordCanvas, _Component);
 
-            var arc$$1 = core.getHoveredArc(centerX, centerY, radius, innerRadius, arcs, x, y);
-            if (arc$$1) {
-                setCurrentArc(arc$$1);
-                showTooltip(React__default.createElement(ChordArcTooltip$1, { arc: arc$$1, theme: theme }), event);
+            var arc = core.getHoveredArc(centerX, centerY, radius, innerRadius, arcs, x, y);
+            if (arc) {
+                setCurrentArc(arc);
+                showTooltip(React__default.createElement(ChordArcTooltip$1, { arc: arc, theme: theme }), event);
             } else {
@@ -1069,9 +976,9 @@ setCurrentArc(null);
         ribbonGenerator.context(this.ctx);
-        ribbons.forEach(function (ribbon$$1) {
+        ribbons.forEach(function (ribbon) {
             _this2.ctx.save();
-            _this2.ctx.globalAlpha = getRibbonOpacity(ribbon$$1);
+            _this2.ctx.globalAlpha = getRibbonOpacity(ribbon);
 
             _this2.ctx.beginPath();
-            ribbonGenerator(ribbon$$1);
-            _this2.ctx.fillStyle = ribbon$$1.source.color;
+            ribbonGenerator(ribbon);
+            _this2.ctx.fillStyle = ribbon.source.color;
             _this2.ctx.fill();
@@ -1083,9 +990,9 @@
         arcGenerator.context(this.ctx);
-        arcs.forEach(function (arc$$1) {
+        arcs.forEach(function (arc) {
             _this2.ctx.save();
-            _this2.ctx.globalAlpha = getArcOpacity(arc$$1);
+            _this2.ctx.globalAlpha = getArcOpacity(arc);
 
             _this2.ctx.beginPath();
-            arcGenerator(arc$$1);
-            _this2.ctx.fillStyle = arc$$1.color;
+            arcGenerator(arc);
+            _this2.ctx.fillStyle = arc.color;
             _this2.ctx.fill();
@@ -1096,4 +1003,4 @@
             if (enableLabel) {
-                var labelTextColor = getLabelTextColor(arc$$1, theme);
-                var angle = core.midAngle(arc$$1);
+                var labelTextColor = getLabelTextColor(arc, theme);
+                var angle = core.midAngle(arc);
                 var _props = core.getPolarLabelProps(radius + labelOffset, angle, labelRotation);
@@ -1108,3 +1015,3 @@
                 _this2.ctx.fillStyle = labelTextColor;
-                _this2.ctx.fillText(getLabel(arc$$1), 0, 0);
+                _this2.ctx.fillText(getLabel(arc), 0, 0);
 
@@ -1156,12 +1063,16 @@ _this2.ctx.restore();
 
-var ChordCanvas$1 = enhance$1(ChordCanvas);
+var ChordCanvas$1 = enhance(ChordCanvas);
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
+var ResponsiveChord = function ResponsiveChord(props) {
+    return React__default.createElement(
+        core.ResponsiveWrapper,
+        null,
+        function (_ref) {
+            var width = _ref.width,
+                height = _ref.height;
+            return React__default.createElement(Chord$1, _extends({ width: width, height: height }, props));
+        }
+    );
+};
+
 var ResponsiveChordCanvas = function ResponsiveChordCanvas(props) {
@@ -1179,28 +1090,7 @@ return React__default.createElement(
 
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-exports.ChordArcsSvg = ChordArcsSvg$1;
-exports.ChordLabelsSvg = ChordLabelsSvg;
-exports.ChordRibbonsSvg = ChordRibbonsSvg$1;
-exports.ChordSvg = ChordSvg$1;
-exports.ResponsiveChordSvg = ResponsiveChordSvg;
+exports.Chord = Chord$1;
 exports.ChordCanvas = ChordCanvas$1;
+exports.ResponsiveChord = ResponsiveChord;
 exports.ResponsiveChordCanvas = ResponsiveChordCanvas;
 exports.ChordPropTypes = ChordPropTypes;
 exports.ChordDefaultProps = ChordDefaultProps;

package.json

 {
   "name": "@nivo/chord",
-  "version": "0.34.0-1",
+  "version": "0.35.0",
   "license": "MIT",
@@ -12,4 +12,4 @@ "main": "./index.js",
   "dependencies": {
-    "@nivo/core": "0.34.0-1",
-    "@nivo/legends": "0.34.0-1",
+    "@nivo/core": "0.35.0",
+    "@nivo/legends": "0.35.0",
     "d3-chord": "^1.0.4",
@@ -21,16 +21,2 @@ "d3-format": "^1.2.0",
   },
-  "devDependencies": {
-    "@nivo/babel-preset": "0.34.0-1",
-    "@nivo/generators": "0.34.0-1",
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.3",
-    "babel-jest": "^20.0.3",
-    "cross-env": "^5.0.5",
-    "eslint": "^4.12.1",
-    "eslint-plugin-react": "^7.5.1",
-    "jest": "^21.0.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0"
-  },
   "peerDependencies": {
@@ -42,8 +28,3 @@ "prop-types": "^15.5.10",
     "access": "public"
-  },
-  "scripts": {
-    "lint": "eslint src stories tests",
-    "test": "jest --verbose ./tests",
-    "test:cover": "jest --verbose --coverage ./tests"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

39072

decreased by-9.6%

Lines of code

918

decreased by-10.44%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

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

• - Removed@nivo/core@0.34.0-1(transitive)

• Updated@nivo/core@0.35.0

• Updated@nivo/legends@0.35.0