@nivo/pie - npm Package Compare versions

Comparing version 0.40.0 to 0.42.0

cjs/nivo-pie.js

@@ -10,11 +10,10 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
+var d3Shape = require('d3-shape');
+var setDisplayName = _interopDefault(require('recompose/setDisplayName'));
 var compose = _interopDefault(require('recompose/compose'));
+var pure = _interopDefault(require('recompose/pure'));
+var defaultProps = _interopDefault(require('recompose/defaultProps'));
 var withPropsOnChange = _interopDefault(require('recompose/withPropsOnChange'));
-var pure = _interopDefault(require('recompose/pure'));
 var core = require('@nivo/core');
-var reactMotion = require('react-motion');
-var d3Shape = require('d3-shape');
-require('lodash/merge');
 var legends = require('@nivo/legends');
-var defaultProps = _interopDefault(require('recompose/defaultProps'));
 
@@ -75,4 +74,14 @@ var classCallCheck = function (instance, Constructor) {
 
+var objectWithoutProperties = function (obj, keys) {
+  var target = {};
 
+  for (var i in obj) {
+    if (keys.indexOf(i) >= 0) continue;
+    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+    target[i] = obj[i];
+  }
 
+  return target;
+};
+
 var possibleConstructorReturn = function (self, call) {
@@ -86,2 +95,299 @@ if (!self) {
 
+var PieLayout = function (_Component) {
+    inherits(PieLayout, _Component);
+
+    function PieLayout() {
+        classCallCheck(this, PieLayout);
+        return possibleConstructorReturn(this, _Component.apply(this, arguments));
+    }
+
+    PieLayout.prototype.render = function render() {
+        var _props = this.props,
+            arcs = _props.arcs,
+            arcGenerator = _props.arcGenerator,
+            startAngle = _props.startAngle,
+            endAngle = _props.endAngle,
+            width = _props.width,
+            height = _props.height,
+            centerX = _props.centerX,
+            centerY = _props.centerY,
+            radius = _props.radius,
+            innerRadius = _props.innerRadius,
+            debug = _props.debug,
+            render = _props.children;
+
+
+        return render({
+            arcs: arcs,
+            arcGenerator: arcGenerator,
+            startAngle: startAngle,
+            endAngle: endAngle,
+            width: width,
+            height: height,
+            centerX: centerX,
+            centerY: centerY,
+            radius: radius,
+            innerRadius: innerRadius,
+            debug: debug
+        });
+    };
+
+    return PieLayout;
+}(React.Component);
+
+PieLayout.propTypes = {
+    data: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        value: PropTypes.number.isRequired
+    })).isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    fit: PropTypes.bool.isRequired,
+    sortByValue: PropTypes.bool.isRequired,
+    startAngle: PropTypes.number.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    padAngle: PropTypes.number.isRequired,
+    arcs: PropTypes.array.isRequired, // computed
+    arcGenerator: PropTypes.func.isRequired, // computed
+    centerX: PropTypes.number.isRequired, // computed
+    centerY: PropTypes.number.isRequired, // computed
+    radius: PropTypes.number.isRequired, // computed
+    innerRadius: PropTypes.number.isRequired, // re-computed
+    cornerRadius: PropTypes.number.isRequired,
+    debug: PropTypes.shape({
+        points: PropTypes.array.isRequired,
+        box: PropTypes.shape({
+            x: PropTypes.number.isRequired,
+            y: PropTypes.number.isRequired,
+            width: PropTypes.number.isRequired,
+            height: PropTypes.number.isRequired
+        }).isRequired,
+        ratio: PropTypes.number.isRequired
+    }), // computed
+    children: PropTypes.func.isRequired
+};
+
+
+var PieLayoutDefaultProps = {
+    fit: true,
+    sortByValue: false,
+    innerRadius: 0,
+    startAngle: 0,
+    endAngle: 360,
+    padAngle: 0,
+    cornerRadius: 0
+};
+
+var enhance = function enhance(Component) {
+    return compose(defaultProps(PieLayoutDefaultProps), core.withColors(), withPropsOnChange(['width', 'height', 'innerRadius', 'startAngle', 'endAngle', 'fit', 'cornerRadius'], function (_ref) {
+        var width = _ref.width,
+            height = _ref.height,
+            _innerRadius = _ref.innerRadius,
+            startAngle = _ref.startAngle,
+            endAngle = _ref.endAngle,
+            fit = _ref.fit,
+            cornerRadius = _ref.cornerRadius;
+
+        var radius = Math.min(width, height) / 2;
+        var innerRadius = radius * Math.min(_innerRadius, 1);
+
+        var centerX = width / 2;
+        var centerY = height / 2;
+
+        var boundingBox = void 0;
+        if (fit === true) {
+            var _computeArcBoundingBo = core.computeArcBoundingBox(centerX, centerY, radius, startAngle - 90, endAngle - 90),
+                points = _computeArcBoundingBo.points,
+                box = objectWithoutProperties(_computeArcBoundingBo, ['points']);
+
+            var ratio = Math.min(width / box.width, height / box.height);
+
+            var adjustedBox = {
+                width: box.width * ratio,
+                height: box.height * ratio
+            };
+            adjustedBox.x = (width - adjustedBox.width) / 2;
+            adjustedBox.y = (height - adjustedBox.height) / 2;
+
+            centerX = (centerX - box.x) / box.width * box.width * ratio + adjustedBox.x;
+            centerY = (centerY - box.y) / box.height * box.height * ratio + adjustedBox.y;
+
+            boundingBox = { box: box, ratio: ratio, points: points };
+
+            radius = radius * ratio;
+            innerRadius = innerRadius * ratio;
+        }
+
+        var arcGenerator = d3Shape.arc().outerRadius(radius).innerRadius(innerRadius).cornerRadius(cornerRadius);
+
+        return {
+            centerX: centerX,
+            centerY: centerY,
+            radius: radius,
+            innerRadius: innerRadius,
+            arcGenerator: arcGenerator,
+            debug: boundingBox
+        };
+    }), withPropsOnChange(['sortByValue', 'padAngle', 'startAngle', 'endAngle'], function (_ref2) {
+        var sortByValue = _ref2.sortByValue,
+            padAngle = _ref2.padAngle,
+            startAngle = _ref2.startAngle,
+            endAngle = _ref2.endAngle;
+
+        var pie = d3Shape.pie().value(function (d) {
+            return d.value;
+        }).padAngle(core.degreesToRadians(padAngle)).startAngle(core.degreesToRadians(startAngle)).endAngle(core.degreesToRadians(endAngle));
+
+        if (sortByValue !== true) pie.sortValues(null);
+
+        return { pie: pie };
+    }), withPropsOnChange(['pie', 'data'], function (_ref3) {
+        var pie = _ref3.pie,
+            data = _ref3.data;
+        return {
+            arcs: pie(data).map(function (arc) {
+                var angle = Math.abs(arc.endAngle - arc.startAngle);
+
+                return _extends({}, arc, {
+                    angle: angle,
+                    angleDeg: core.radiansToDegrees(angle)
+                });
+            })
+        };
+    }), withPropsOnChange(['arcs', 'getColor'], function (_ref4) {
+        var arcs = _ref4.arcs,
+            getColor = _ref4.getColor;
+        return {
+            arcs: arcs.map(function (arc) {
+                return _extends({}, arc, {
+                    color: getColor(arc.data)
+                });
+            })
+        };
+    }), pure)(Component);
+};
+
+var PieLayout$1 = setDisplayName('PieLayout')(enhance(PieLayout));
+
+var arcPropType = PropTypes.shape({
+    startAngle: PropTypes.number.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    angle: PropTypes.number.isRequired,
+    angleDeg: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+    data: PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        value: PropTypes.number.isRequired
+    }).isRequired
+});
+
+var PiePropTypes = {
+    data: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        value: PropTypes.number.isRequired
+    })).isRequired,
+
+    // layout
+    startAngle: PropTypes.number.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    fit: PropTypes.bool.isRequired,
+    padAngle: PropTypes.number.isRequired,
+    sortByValue: PropTypes.bool.isRequired,
+    innerRadius: PropTypes.number.isRequired,
+    cornerRadius: PropTypes.number.isRequired,
+
+    // border
+    borderWidth: PropTypes.number.isRequired,
+    borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+    // radial labels
+    enableRadialLabels: PropTypes.bool.isRequired,
+    radialLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    radialLabelsSkipAngle: PropTypes.number,
+    radialLabelsTextXOffset: PropTypes.number,
+    radialLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    radialLabelsLinkOffset: PropTypes.number,
+    radialLabelsLinkDiagonalLength: PropTypes.number,
+    radialLabelsLinkHorizontalLength: PropTypes.number,
+    radialLabelsLinkStrokeWidth: PropTypes.number,
+    radialLabelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+    // slices labels
+    enableSlicesLabels: PropTypes.bool.isRequired,
+    sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    slicesLabelsSkipAngle: PropTypes.number,
+    slicesLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+    // styling
+    defs: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired
+    })).isRequired,
+    fill: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string,
+        match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired
+    })).isRequired,
+    //boundDefs: PropTypes.array.isRequired, // computed
+
+    // interactivity
+    isInteractive: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+
+    // tooltip
+    lockTooltip: PropTypes.bool.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    tooltip: PropTypes.func,
+
+    // legends
+    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
+    /*
+    legendData: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            fill: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    */
+};
+
+var PieDefaultProps = {
+    sortByValue: false,
+    innerRadius: 0,
+    padAngle: 0,
+    cornerRadius: 0,
+
+    // layout
+    startAngle: 0,
+    endAngle: core.radiansToDegrees(Math.PI * 2),
+    fit: true,
+
+    // border
+    borderWidth: 0,
+    borderColor: 'inherit:darker(1)',
+
+    // radial labels
+    enableRadialLabels: true,
+    radialLabel: 'id',
+    radialLabelsTextColor: 'theme',
+    radialLabelsLinkColor: 'theme',
+
+    // slices labels
+    enableSlicesLabels: true,
+    sliceLabel: 'value',
+    slicesLabelsTextColor: 'theme',
+
+    // styling
+    defs: [],
+    fill: [],
+
+    // interactivity
+    isInteractive: true,
+    onClick: core.noop,
+
+    // tooltip
+    lockTooltip: true,
+
+    // legends
+    legends: []
+};
+
 var PieSlice = function PieSlice(_ref) {
@@ -149,3 +455,3 @@ var data = _ref.data,
 
-var enhance = compose(withPropsOnChange(['data', 'onClick'], function (_ref2) {
+var enhance$1 = compose(withPropsOnChange(['data', 'onClick'], function (_ref2) {
     var data = _ref2.data,
@@ -160,4 +466,49 @@ _onClick = _ref2.onClick;
 
-var PieSlice$1 = enhance(PieSlice);
+var PieSlice$1 = enhance$1(PieSlice);
 
+var computeRadialLabels = function computeRadialLabels(arcs, _ref) {
+    var getLabel = _ref.getLabel,
+        radius = _ref.radius,
+        skipAngle = _ref.skipAngle,
+        linkOffset = _ref.linkOffset,
+        linkDiagonalLength = _ref.linkDiagonalLength,
+        linkHorizontalLength = _ref.linkHorizontalLength,
+        textXOffset = _ref.textXOffset;
+    return arcs.filter(function (arc) {
+        return skipAngle === 0 || arc.angleDeg > skipAngle;
+    }).map(function (arc) {
+        var angle = core.absoluteAngleRadians(core.midAngle(arc) - Math.PI / 2);
+        var positionA = core.positionFromAngle(angle, radius + linkOffset);
+        var positionB = core.positionFromAngle(angle, radius + linkOffset + linkDiagonalLength);
+
+        var positionC = void 0;
+        var labelPosition = void 0;
+        var textAlign = void 0;
+
+        if (core.absoluteAngleDegrees(core.radiansToDegrees(angle)) < 90 || core.absoluteAngleDegrees(core.radiansToDegrees(angle)) >= 270) {
+            positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y };
+            labelPosition = {
+                x: positionB.x + linkHorizontalLength + textXOffset,
+                y: positionB.y
+            };
+            textAlign = 'left';
+        } else {
+            positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y };
+            labelPosition = {
+                x: positionB.x - linkHorizontalLength - textXOffset,
+                y: positionB.y
+            };
+            textAlign = 'right';
+        }
+
+        return {
+            arc: arc,
+            text: getLabel(arc.data),
+            position: labelPosition,
+            align: textAlign,
+            line: [positionA, positionB, positionC]
+        };
+    });
+};
+
 var lineGenerator = d3Shape.line().x(function (d) {
@@ -179,3 +530,3 @@ return d.x;
         var _props = this.props,
-            data = _props.data,
+            arcs = _props.arcs,
             label = _props.label,
@@ -194,58 +545,40 @@ radius = _props.radius,
 
-        return React__default.createElement(
-            'g',
-            null,
-            data.filter(function (d) {
-                return skipAngle === 0 || d.angleDegrees > skipAngle;
-            }).map(function (d) {
-                var angle = core.midAngle(d) - Math.PI / 2;
-                var positionA = core.positionFromAngle(angle, radius + linkOffset);
-                var positionB = core.positionFromAngle(angle, radius + linkOffset + linkDiagonalLength);
-                var positionC = void 0;
-                var labelPosition = void 0;
-                var textAnchor = void 0;
-                if (angle + Math.PI / 2 < Math.PI) {
-                    positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y };
-                    labelPosition = {
-                        x: positionB.x + linkHorizontalLength + textXOffset,
-                        y: positionB.y
-                    };
-                    textAnchor = 'start';
-                } else {
-                    positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y };
-                    labelPosition = {
-                        x: positionB.x - linkHorizontalLength - textXOffset,
-                        y: positionB.y
-                    };
-                    textAnchor = 'end';
-                }
+        var labels = computeRadialLabels(arcs, {
+            getLabel: label,
+            radius: radius,
+            skipAngle: skipAngle,
+            linkOffset: linkOffset,
+            linkDiagonalLength: linkDiagonalLength,
+            linkHorizontalLength: linkHorizontalLength,
+            textXOffset: textXOffset
+        });
 
-                return React__default.createElement(
+        return labels.map(function (label) {
+            return React__default.createElement(
+                React.Fragment,
+                { key: label.arc.data.id },
+                React__default.createElement('path', {
+                    d: lineGenerator(label.line),
+                    fill: 'none',
+                    style: { fill: 'none', stroke: linkColor(label.arc, theme) },
+                    strokeWidth: linkStrokeWidth
+                }),
+                React__default.createElement(
                     'g',
-                    { key: d.data.id },
-                    React__default.createElement('path', {
-                        d: lineGenerator([positionA, positionB, positionC]),
-                        fill: 'none',
-                        style: { fill: 'none', stroke: linkColor(d.data, theme) },
-                        strokeWidth: linkStrokeWidth
-                    }),
+                    { transform: 'translate(' + label.position.x + ', ' + label.position.y + ')' },
                     React__default.createElement(
-                        'g',
-                        { transform: 'translate(' + labelPosition.x + ', ' + labelPosition.y + ')' },
-                        React__default.createElement(
-                            'text',
-                            {
-                                textAnchor: textAnchor,
-                                dy: '0.3em',
-                                style: {
-                                    fill: textColor(d.data, theme),
-                                    fontSize: theme.axis.fontSize
-                                }
-                            },
-                            label(d.data)
-                        )
+                        'text',
+                        {
+                            textAnchor: core.textPropsByEngine.svg.align[label.align],
+                            dy: '0.3em',
+                            style: {
+                                fill: textColor(label.arc.data, theme),
+                                fontSize: theme.axis.fontSize
+                            }
+                        },
+                        label.text
                     )
-                );
-            })
-        );
+                )
+            );
+        });
     };
@@ -257,2 +590,3 @@
 PieRadialLabels.propTypes = {
+    arcs: PropTypes.arrayOf(arcPropType).isRequired,
     label: PropTypes.func.isRequired,
@@ -298,3 +632,3 @@ skipAngle: PropTypes.number.isRequired,
         var _props = this.props,
-            data = _props.data,
+            arcs = _props.arcs,
             label = _props.label,
@@ -311,8 +645,8 @@ radius = _props.radius,
         return React__default.createElement(
-            'g',
+            React.Fragment,
             null,
-            data.filter(function (d) {
-                return skipAngle === 0 || d.angleDegrees > skipAngle;
-            }).map(function (d) {
-                var angle = core.midAngle(d) - Math.PI / 2;
+            arcs.filter(function (arc) {
+                return skipAngle === 0 || arc.angleDeg > skipAngle;
+            }).map(function (arc) {
+                var angle = core.midAngle(arc) - Math.PI / 2;
                 var position = core.positionFromAngle(angle, centerRadius);
@@ -323,3 +657,3 @@
                     {
-                        key: d.data.id,
+                        key: arc.data.id,
                         transform: 'translate(' + position.x + ', ' + position.y + ')',
@@ -333,7 +667,7 @@ style: sliceStyle
                             style: {
-                                fill: textColor(d.data, theme),
+                                fill: textColor(arc.data, theme),
                                 fontSize: theme.axis.fontSize
                             }
                         },
-                        label(d.data)
+                        label(arc.data)
                     )
@@ -349,2 +683,3 @@ );
 PieSlicesLabels.propTypes = {
+    arcs: PropTypes.arrayOf(arcPropType).isRequired,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
@@ -366,283 +701,670 @@ skipAngle: PropTypes.number.isRequired,
 
-var PiePropTypes = {
-    data: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        value: PropTypes.number.isRequired
-    })).isRequired,
+var PieLegends = function (_Component) {
+    inherits(PieLegends, _Component);
 
-    sortByValue: PropTypes.bool.isRequired,
-    innerRadius: PropTypes.number.isRequired,
-    padAngle: PropTypes.number.isRequired,
-    cornerRadius: PropTypes.number.isRequired,
+    function PieLegends() {
+        classCallCheck(this, PieLegends);
+        return possibleConstructorReturn(this, _Component.apply(this, arguments));
+    }
 
-    // border
-    borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    PieLegends.prototype.render = function render() {
+        var _props = this.props,
+            width = _props.width,
+            height = _props.height,
+            legends$$1 = _props.legends,
+            data = _props.data;
 
-    // radial labels
-    enableRadialLabels: PropTypes.bool.isRequired,
-    radialLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    radialLabelsSkipAngle: PropTypes.number,
-    radialLabelsTextXOffset: PropTypes.number,
-    radialLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    radialLabelsLinkOffset: PropTypes.number,
-    radialLabelsLinkDiagonalLength: PropTypes.number,
-    radialLabelsLinkHorizontalLength: PropTypes.number,
-    radialLabelsLinkStrokeWidth: PropTypes.number,
-    radialLabelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
-    // slices labels
-    enableSlicesLabels: PropTypes.bool.isRequired,
-    sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    slicesLabelsSkipAngle: PropTypes.number,
-    slicesLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+        return legends$$1.map(function (legend, i) {
+            return React__default.createElement(legends.BoxLegendSvg, _extends({
+                key: i
+            }, legend, {
+                containerWidth: width,
+                containerHeight: height,
+                data: data
+            }));
+        });
+    };
 
-    // styling
-    defs: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired
+    return PieLegends;
+}(React.Component);
+
+PieLegends.propTypes = {
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    arcs: PropTypes.arrayOf(arcPropType).isRequired,
+    data: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        fill: PropTypes.string.isRequired
     })).isRequired,
-    fill: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string,
-        match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired
-    })).isRequired,
+    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
+};
 
-    // interactivity
-    isInteractive: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    tooltip: PropTypes.func,
 
-    // legends
-    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
+var enhance$2 = function enhance(Component) {
+    return compose(withPropsOnChange(['arcs'], function (_ref) {
+        var arcs = _ref.arcs;
+        return {
+            data: arcs.map(function (arc) {
+                return {
+                    label: arc.data.id,
+                    fill: arc.color
+                };
+            })
+        };
+    }), pure)(Component);
 };
 
-var PieDefaultProps = {
-    sortByValue: false,
-    innerRadius: 0,
-    padAngle: 0,
-    cornerRadius: 0,
+var PieLegends$1 = setDisplayName('PieLegends')(enhance$2(PieLegends));
 
-    // border
-    borderWidth: 0,
-    borderColor: 'inherit:darker(1)',
+var Pie = function (_Component) {
+    inherits(Pie, _Component);
 
-    // radial labels
-    enableRadialLabels: true,
-    radialLabel: 'id',
-    radialLabelsTextColor: 'theme',
-    radialLabelsLinkColor: 'theme',
+    function Pie() {
+        classCallCheck(this, Pie);
+        return possibleConstructorReturn(this, _Component.apply(this, arguments));
+    }
 
-    // slices labels
-    enableSlicesLabels: true,
-    sliceLabel: 'value',
-    slicesLabelsTextColor: 'theme',
+    Pie.prototype.render = function render() {
+        var _props = this.props,
+            data = _props.data,
+            sortByValue = _props.sortByValue,
+            startAngle = _props.startAngle,
+            endAngle = _props.endAngle,
+            padAngle = _props.padAngle,
+            fit = _props.fit,
+            innerRadius = _props.innerRadius,
+            cornerRadius = _props.cornerRadius,
+            margin = _props.margin,
+            width = _props.width,
+            height = _props.height,
+            outerWidth = _props.outerWidth,
+            outerHeight = _props.outerHeight,
+            colors = _props.colors,
+            colorBy = _props.colorBy,
+            borderWidth = _props.borderWidth,
+            _borderColor = _props.borderColor,
+            enableRadialLabels = _props.enableRadialLabels,
+            getRadialLabel = _props.getRadialLabel,
+            radialLabelsSkipAngle = _props.radialLabelsSkipAngle,
+            radialLabelsLinkOffset = _props.radialLabelsLinkOffset,
+            radialLabelsLinkDiagonalLength = _props.radialLabelsLinkDiagonalLength,
+            radialLabelsLinkHorizontalLength = _props.radialLabelsLinkHorizontalLength,
+            radialLabelsLinkStrokeWidth = _props.radialLabelsLinkStrokeWidth,
+            radialLabelsTextXOffset = _props.radialLabelsTextXOffset,
+            radialLabelsTextColor = _props.radialLabelsTextColor,
+            radialLabelsLinkColor = _props.radialLabelsLinkColor,
+            enableSlicesLabels = _props.enableSlicesLabels,
+            getSliceLabel = _props.getSliceLabel,
+            slicesLabelsSkipAngle = _props.slicesLabelsSkipAngle,
+            slicesLabelsTextColor = _props.slicesLabelsTextColor,
+            theme = _props.theme,
+            defs = _props.defs,
+            fill = _props.fill,
+            isInteractive = _props.isInteractive,
+            onClick = _props.onClick,
+            tooltipFormat = _props.tooltipFormat,
+            tooltip = _props.tooltip,
+            legends$$1 = _props.legends;
 
-    // styling
-    defs: [],
-    fill: [],
 
-    // interactivity
-    isInteractive: true,
-    onClick: core.noop,
+        var borderColor = core.getInheritedColorGenerator(_borderColor);
 
-    legends: []
+        return React__default.createElement(
+            PieLayout$1,
+            {
+                width: width,
+                height: height,
+                data: data,
+                sortByValue: sortByValue,
+                startAngle: startAngle,
+                endAngle: endAngle,
+                fit: fit,
+                padAngle: padAngle,
+                innerRadius: innerRadius,
+                cornerRadius: cornerRadius,
+                colors: colors,
+                colorBy: colorBy
+            },
+            function (_ref) {
+                var centerX = _ref.centerX,
+                    centerY = _ref.centerY,
+                    radius = _ref.radius,
+                    innerRadius = _ref.innerRadius,
+                    arcs = _ref.arcs,
+                    arcGenerator = _ref.arcGenerator;
+
+                var boundDefs = core.bindDefs(defs, arcs, fill, {
+                    dataKey: 'data'
+                });
+
+                return React__default.createElement(
+                    core.Container,
+                    { isInteractive: isInteractive, theme: theme },
+                    function (_ref2) {
+                        var showTooltip = _ref2.showTooltip,
+                            hideTooltip = _ref2.hideTooltip;
+                        return React__default.createElement(
+                            core.SvgWrapper,
+                            {
+                                width: outerWidth,
+                                height: outerHeight,
+                                margin: margin,
+                                defs: boundDefs
+                            },
+                            React__default.createElement(
+                                'g',
+                                { transform: 'translate(' + centerX + ',' + centerY + ')' },
+                                arcs.map(function (arc) {
+                                    return React__default.createElement(PieSlice$1, {
+                                        key: arc.data.id,
+                                        data: arc.data,
+                                        path: arcGenerator(arc),
+                                        color: arc.color,
+                                        fill: arc.fill ? arc.fill : arc.color,
+                                        borderWidth: borderWidth,
+                                        borderColor: borderColor(arc),
+                                        showTooltip: showTooltip,
+                                        hideTooltip: hideTooltip,
+                                        tooltipFormat: tooltipFormat,
+                                        tooltip: tooltip,
+                                        onClick: onClick,
+                                        theme: theme
+                                    });
+                                }),
+                                enableRadialLabels && React__default.createElement(PieRadialLabels, {
+                                    arcs: arcs,
+                                    radius: radius,
+                                    label: getRadialLabel,
+                                    skipAngle: radialLabelsSkipAngle,
+                                    linkOffset: radialLabelsLinkOffset,
+                                    linkDiagonalLength: radialLabelsLinkDiagonalLength,
+                                    linkHorizontalLength: radialLabelsLinkHorizontalLength,
+                                    linkStrokeWidth: radialLabelsLinkStrokeWidth,
+                                    textXOffset: radialLabelsTextXOffset,
+                                    textColor: core.getInheritedColorGenerator(radialLabelsTextColor, 'labels.textColor'),
+                                    linkColor: core.getInheritedColorGenerator(radialLabelsLinkColor, 'axis.tickColor'),
+                                    theme: theme
+                                }),
+                                enableSlicesLabels && React__default.createElement(PieSlicesLabels, {
+                                    arcs: arcs,
+                                    radius: radius,
+                                    innerRadius: innerRadius,
+                                    theme: theme,
+                                    label: getSliceLabel,
+                                    skipAngle: slicesLabelsSkipAngle,
+                                    textColor: core.getInheritedColorGenerator(slicesLabelsTextColor, 'labels.textColor')
+                                })
+                            ),
+                            React__default.createElement(PieLegends$1, {
+                                width: width,
+                                height: height,
+                                arcs: arcs,
+                                legends: legends$$1
+                            })
+                        );
+                    }
+                );
+            }
+        );
+    };
+
+    return Pie;
+}(React.Component);
+
+Pie.propTypes = PiePropTypes;
+
+
+var enhance$3 = function enhance$$1(Component) {
+    return compose(defaultProps(PieDefaultProps), core.withTheme(), core.withDimensions(), withPropsOnChange(['radialLabel'], function (_ref3) {
+        var radialLabel = _ref3.radialLabel;
+        return {
+            getRadialLabel: core.getLabelGenerator(radialLabel)
+        };
+    }), withPropsOnChange(['sliceLabel'], function (_ref4) {
+        var sliceLabel = _ref4.sliceLabel;
+        return {
+            getSliceLabel: core.getLabelGenerator(sliceLabel)
+        };
+    }), pure)(Component);
 };
 
-var enhance$1 = (function (Component) {
-    return compose(defaultProps(PieDefaultProps), core.withTheme(), core.withDimensions(), core.withColors(), pure)(Component);
+var Pie$1 = setDisplayName('Pie')(enhance$3(Pie));
+
+var ResponsivePie = function ResponsivePie(props) {
+    return React__default.createElement(
+        core.ResponsiveWrapper,
+        null,
+        function (_ref) {
+            var width = _ref.width,
+                height = _ref.height;
+            return React__default.createElement(Pie$1, _extends({ width: width, height: height }, props));
+        }
+    );
+};
+
+var enhance$4 = (function (Component) {
+    return compose(defaultProps(PieDefaultProps), core.withTheme(), core.withDimensions(),
+    /*
+    withPropsOnChange(
+        ['enhancedData', 'defs', 'fill'],
+        ({ enhancedData: _enhancedData, defs, fill }) => {
+            const enhancedData = _enhancedData.map(datum => ({ ...datum }))
+            const boundDefs = bindDefs(defs, enhancedData, fill)
+             return {
+                enhancedData,
+                boundDefs,
+                legendData: enhancedData.map(datum => ({
+                    label: datum.label,
+                    fill: datum.fill || datum.color,
+                })),
+            }
+        }
+    ),
+    */
+    pure)(Component);
 });
 
-var Pie = function Pie(_ref) {
+var drawSliceLabels = function drawSliceLabels(ctx, arcs, _ref) {
+    var arcGenerator = _ref.arcGenerator,
+        getLabel = _ref.getLabel,
+        skipAngle = _ref.skipAngle,
+        getTextColor = _ref.getTextColor,
+        theme = _ref.theme;
+
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    arcs.filter(function (arc) {
+        return skipAngle === 0 || arc.angleDeg > skipAngle;
+    }).forEach(function (arc) {
+        var _arcGenerator$centroi = arcGenerator.centroid(arc),
+            centroidX = _arcGenerator$centroi[0],
+            centroidY = _arcGenerator$centroi[1];
+
+        var sliceLabel = getLabel(arc.data);
+        var textColor = getTextColor(arc, theme);
+
+        ctx.save();
+        ctx.translate(centroidX, centroidY);
+        ctx.fillStyle = textColor;
+        ctx.fillText(sliceLabel, 0, 0);
+        ctx.restore();
+    });
+};
+
+var drawRadialLabels = function drawRadialLabels(ctx, arcs, _ref2) {
+    var radius = _ref2.radius,
+        getLabel = _ref2.getLabel,
+        skipAngle = _ref2.skipAngle,
+        linkOffset = _ref2.linkOffset,
+        linkDiagonalLength = _ref2.linkDiagonalLength,
+        linkHorizontalLength = _ref2.linkHorizontalLength,
+        linkStrokeWidth = _ref2.linkStrokeWidth,
+        textXOffset = _ref2.textXOffset,
+        getTextColor = _ref2.getTextColor,
+        getLinkColor = _ref2.getLinkColor,
+        theme = _ref2.theme;
+
+    var radialLabels = computeRadialLabels(arcs, {
+        getLabel: getLabel,
+        radius: radius,
+        skipAngle: skipAngle,
+        linkOffset: linkOffset,
+        linkDiagonalLength: linkDiagonalLength,
+        linkHorizontalLength: linkHorizontalLength,
+        textXOffset: textXOffset
+    });
+
+    ctx.textBaseline = 'middle';
+
+    radialLabels.forEach(function (label) {
+        var dataWithColor = _extends({}, label.arc.data, {
+            color: label.arc.color
+        });
+
+        ctx.save();
+        ctx.translate(label.position.x, label.position.y);
+        ctx.fillStyle = getTextColor(dataWithColor, theme);
+        ctx.textAlign = core.textPropsByEngine.canvas.align[label.align];
+        ctx.fillText(label.text, 0, 0);
+        ctx.restore();
+
+        ctx.beginPath();
+        ctx.strokeStyle = getLinkColor(dataWithColor, theme);
+        ctx.lineWidth = linkStrokeWidth;
+        label.line.forEach(function (point, index) {
+            if (index === 0) ctx.moveTo(point.x, point.y);else ctx.lineTo(point.x, point.y);
+        });
+        if (linkStrokeWidth > 0) ctx.stroke();
+    });
+};
+
+var PieTooltip = function PieTooltip(_ref) {
     var data = _ref.data,
-        margin = _ref.margin,
-        width = _ref.width,
-        height = _ref.height,
-        outerWidth = _ref.outerWidth,
-        outerHeight = _ref.outerHeight,
-        sortByValue = _ref.sortByValue,
-        _innerRadius = _ref.innerRadius,
-        _padAngle = _ref.padAngle,
-        cornerRadius = _ref.cornerRadius,
-        borderWidth = _ref.borderWidth,
-        _borderColor = _ref.borderColor,
-        enableRadialLabels = _ref.enableRadialLabels,
-        radialLabel = _ref.radialLabel,
-        radialLabelsSkipAngle = _ref.radialLabelsSkipAngle,
-        radialLabelsLinkOffset = _ref.radialLabelsLinkOffset,
-        radialLabelsLinkDiagonalLength = _ref.radialLabelsLinkDiagonalLength,
-        radialLabelsLinkHorizontalLength = _ref.radialLabelsLinkHorizontalLength,
-        radialLabelsLinkStrokeWidth = _ref.radialLabelsLinkStrokeWidth,
-        radialLabelsTextXOffset = _ref.radialLabelsTextXOffset,
-        radialLabelsTextColor = _ref.radialLabelsTextColor,
-        radialLabelsLinkColor = _ref.radialLabelsLinkColor,
-        enableSlicesLabels = _ref.enableSlicesLabels,
-        sliceLabel = _ref.sliceLabel,
-        slicesLabelsSkipAngle = _ref.slicesLabelsSkipAngle,
-        slicesLabelsTextColor = _ref.slicesLabelsTextColor,
-        theme = _ref.theme,
-        getColor = _ref.getColor,
-        defs = _ref.defs,
-        fill = _ref.fill,
-        animate = _ref.animate,
-        motionStiffness = _ref.motionStiffness,
-        motionDamping = _ref.motionDamping,
-        isInteractive = _ref.isInteractive,
-        onClick = _ref.onClick,
+        color = _ref.color,
         tooltipFormat = _ref.tooltipFormat,
         tooltip = _ref.tooltip,
-        legends$$1 = _ref.legends;
+        theme = _ref.theme;
 
-    var centerX = width / 2;
-    var centerY = height / 2;
+    return React__default.createElement(core.BasicTooltip, {
+        id: data.label,
+        value: data.value,
+        enableChip: true,
+        color: color,
+        theme: theme,
+        format: tooltipFormat,
+        renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: color }, data)) : null
+    });
+};
 
-    var padAngle = core.degreesToRadians(_padAngle);
+PieTooltip.propTypes = {
+    data: PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        value: PropTypes.number.isRequired
+    }).isRequired,
+    color: PropTypes.string.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    tooltip: PropTypes.func,
+    theme: PropTypes.shape({
+        tooltip: PropTypes.shape({}).isRequired
+    }).isRequired
+};
 
-    var borderColor = core.getInheritedColorGenerator(_borderColor);
+var PieTooltip$1 = pure(PieTooltip);
 
-    var motionProps = {
-        animate: animate,
-        motionDamping: motionDamping,
-        motionStiffness: motionStiffness
+var PieCanvasRenderer = function (_Component) {
+    inherits(PieCanvasRenderer, _Component);
+
+    function PieCanvasRenderer() {
+        var _temp, _this, _ret;
+
+        classCallCheck(this, PieCanvasRenderer);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.getArcFromMouse = function (event) {
+            var _getRelativeCursor = core.getRelativeCursor(_this.surface, event),
+                x = _getRelativeCursor[0],
+                y = _getRelativeCursor[1];
+
+            var _this$props = _this.props,
+                centerX = _this$props.centerX,
+                centerY = _this$props.centerY,
+                margin = _this$props.margin,
+                radius = _this$props.radius,
+                innerRadius = _this$props.innerRadius,
+                arcs = _this$props.arcs;
+
+
+            return core.getHoveredArc(margin.left + centerX, margin.top + centerY, radius, innerRadius, arcs, x, y);
+        }, _this.handleMouseHover = function (showTooltip, hideTooltip) {
+            return function (event) {
+                if (_this.props.isInteractive !== true) return;
+
+                var arc = _this.getArcFromMouse(event);
+                if (arc) {
+                    showTooltip(React__default.createElement(PieTooltip$1, { data: arc.data, color: arc.color, theme: _this.props.theme }), event);
+                } else {
+                    hideTooltip();
+                }
+            };
+        }, _this.handleMouseLeave = function (hideTooltip) {
+            return function () {
+                if (_this.props.isInteractive !== true) return;
+
+                hideTooltip();
+            };
+        }, _this.handleClick = function (event) {
+            var arc = _this.getArcFromMouse(event);
+            if (arc) _this.props.onClick(arc.data, event);
+        }, _temp), possibleConstructorReturn(_this, _ret);
+    }
+
+    PieCanvasRenderer.prototype.componentDidMount = function componentDidMount() {
+        this.ctx = this.surface.getContext('2d');
+        this.draw(this.props);
     };
 
-    var radialLabelsProps = {
-        label: core.getLabelGenerator(radialLabel),
-        skipAngle: radialLabelsSkipAngle,
-        linkOffset: radialLabelsLinkOffset,
-        linkDiagonalLength: radialLabelsLinkDiagonalLength,
-        linkHorizontalLength: radialLabelsLinkHorizontalLength,
-        linkStrokeWidth: radialLabelsLinkStrokeWidth,
-        textXOffset: radialLabelsTextXOffset,
-        textColor: core.getInheritedColorGenerator(radialLabelsTextColor, 'labels.textColor'),
-        linkColor: core.getInheritedColorGenerator(radialLabelsLinkColor, 'axis.tickColor')
+    PieCanvasRenderer.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) {
+        // only update if the DOM needs to be updated
+        if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) {
+            return true;
+        }
+
+        this.draw(props);
+        return false;
     };
 
-    var slicesLabelsProps = {
-        label: core.getLabelGenerator(sliceLabel),
-        skipAngle: slicesLabelsSkipAngle,
-        textColor: core.getInheritedColorGenerator(slicesLabelsTextColor, 'labels.textColor')
+    PieCanvasRenderer.prototype.componentDidUpdate = function componentDidUpdate() {
+        this.ctx = this.surface.getContext('2d');
+        this.draw(this.props);
     };
 
-    var radius = Math.min(width, height) / 2;
-    var innerRadius = radius * Math.min(_innerRadius, 1);
+    PieCanvasRenderer.prototype.draw = function draw(props) {
+        var _this2 = this;
 
-    var pie = d3Shape.pie();
-    pie.value(function (d) {
-        return d.value;
-    });
-    if (sortByValue !== true) pie.sortValues(null);
+        var arcs = props.arcs,
+            arcGenerator = props.arcGenerator,
+            width = props.width,
+            height = props.height,
+            centerX = props.centerX,
+            centerY = props.centerY,
+            radius = props.radius,
+            outerWidth = props.outerWidth,
+            outerHeight = props.outerHeight,
+            pixelRatio = props.pixelRatio,
+            margin = props.margin,
+            borderWidth = props.borderWidth,
+            borderColor = props.borderColor,
+            enableSlicesLabels = props.enableSlicesLabels,
+            enableRadialLabels = props.enableRadialLabels,
+            legends$$1 = props.legends,
+            theme = props.theme;
 
-    var arc = d3Shape.arc();
-    arc.outerRadius(radius);
 
-    var enhancedData = data.map(function (d) {
-        return _extends({}, d, {
-            color: getColor(d)
+        this.surface.width = outerWidth * pixelRatio;
+        this.surface.height = outerHeight * pixelRatio;
+
+        this.ctx.scale(pixelRatio, pixelRatio);
+        this.ctx.clearRect(0, 0, outerWidth, outerHeight);
+        this.ctx.save();
+        this.ctx.translate(margin.left, margin.top);
+
+        arcGenerator.context(this.ctx);
+
+        this.ctx.save();
+        this.ctx.translate(centerX, centerY);
+
+        var getBorderColor = core.getInheritedColorGenerator(borderColor);
+
+        arcs.forEach(function (arc) {
+            _this2.ctx.beginPath();
+            _this2.ctx.fillStyle = arc.color;
+            _this2.ctx.strokeStyle = getBorderColor(_extends({}, arc.data, { color: arc.color }));
+            _this2.ctx.lineWidth = borderWidth;
+            arcGenerator(arc);
+            _this2.ctx.fill();
+            if (borderWidth > 0) _this2.ctx.stroke();
         });
-    });
 
-    var legendData = enhancedData.map(function (d) {
-        return {
-            label: d.label,
-            fill: d.color
-        };
-    });
+        if (enableSlicesLabels === true) {
+            var sliceLabel = props.sliceLabel,
+                slicesLabelsSkipAngle = props.slicesLabelsSkipAngle,
+                slicesLabelsTextColor = props.slicesLabelsTextColor;
 
-    var boundDefs = core.bindDefs(defs, enhancedData, fill);
 
-    return React__default.createElement(
-        core.Container,
-        { isInteractive: isInteractive, theme: theme },
-        function (_ref2) {
-            var showTooltip = _ref2.showTooltip,
-                hideTooltip = _ref2.hideTooltip;
-            return React__default.createElement(
-                core.SvgWrapper,
-                {
-                    width: outerWidth,
-                    height: outerHeight,
-                    margin: margin,
-                    defs: boundDefs
-                },
-                React__default.createElement(
-                    reactMotion.Motion,
-                    {
-                        style: {
-                            centerX: reactMotion.spring(centerX, motionProps),
-                            centerY: reactMotion.spring(centerY, motionProps),
-                            innerRadius: reactMotion.spring(innerRadius),
-                            padAngle: reactMotion.spring(padAngle, motionProps),
-                            cornerRadius: reactMotion.spring(cornerRadius, motionProps)
-                        }
+            drawSliceLabels(this.ctx, arcs, {
+                arcGenerator: arcGenerator,
+                skipAngle: slicesLabelsSkipAngle,
+                getLabel: core.getLabelGenerator(sliceLabel),
+                getTextColor: core.getInheritedColorGenerator(slicesLabelsTextColor, 'labels.textColor'),
+                theme: theme
+            });
+        }
+
+        if (enableRadialLabels === true) {
+            var radialLabel = props.radialLabel,
+                radialLabelsSkipAngle = props.radialLabelsSkipAngle,
+                radialLabelsLinkOffset = props.radialLabelsLinkOffset,
+                radialLabelsLinkStrokeWidth = props.radialLabelsLinkStrokeWidth,
+                radialLabelsLinkDiagonalLength = props.radialLabelsLinkDiagonalLength,
+                radialLabelsLinkHorizontalLength = props.radialLabelsLinkHorizontalLength,
+                radialLabelsTextXOffset = props.radialLabelsTextXOffset,
+                radialLabelsTextColor = props.radialLabelsTextColor,
+                radialLabelsLinkColor = props.radialLabelsLinkColor;
+
+
+            drawRadialLabels(this.ctx, arcs, {
+                radius: radius,
+                getLabel: core.getLabelGenerator(radialLabel),
+                skipAngle: radialLabelsSkipAngle,
+                linkOffset: radialLabelsLinkOffset,
+                linkDiagonalLength: radialLabelsLinkDiagonalLength,
+                linkHorizontalLength: radialLabelsLinkHorizontalLength,
+                linkStrokeWidth: radialLabelsLinkStrokeWidth,
+                textXOffset: radialLabelsTextXOffset,
+                getTextColor: core.getInheritedColorGenerator(radialLabelsTextColor, 'labels.textColor'),
+                getLinkColor: core.getInheritedColorGenerator(radialLabelsLinkColor, 'axis.tickColor'),
+                theme: theme
+            });
+        }
+
+        this.ctx.restore();
+
+        legends$$1.forEach(function (legend) {
+            legends.renderLegendToCanvas(_this2.ctx, _extends({}, legend, {
+                data: arcs.map(function (arc) {
+                    return {
+                        label: arc.data.id,
+                        fill: arc.color
+                    };
+                }),
+                containerWidth: width,
+                containerHeight: height
+            }));
+        });
+    };
+
+    PieCanvasRenderer.prototype.render = function render() {
+        var _this3 = this;
+
+        var _props = this.props,
+            outerWidth = _props.outerWidth,
+            outerHeight = _props.outerHeight,
+            pixelRatio = _props.pixelRatio,
+            isInteractive = _props.isInteractive,
+            theme = _props.theme;
+
+
+        return React__default.createElement(
+            core.Container,
+            { isInteractive: isInteractive, theme: theme },
+            function (_ref) {
+                var showTooltip = _ref.showTooltip,
+                    hideTooltip = _ref.hideTooltip;
+                return React__default.createElement('canvas', {
+                    ref: function ref(surface) {
+                        _this3.surface = surface;
                     },
-                    function (interpolatingStyle) {
-                        var interpolatedPie = pie.padAngle(interpolatingStyle.padAngle);
-                        var interpolatedArc = arc.cornerRadius(interpolatingStyle.cornerRadius).innerRadius(interpolatingStyle.innerRadius);
+                    width: outerWidth * pixelRatio,
+                    height: outerHeight * pixelRatio,
+                    style: {
+                        width: outerWidth,
+                        height: outerHeight
+                    },
+                    onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip),
+                    onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip),
+                    onMouseLeave: _this3.handleMouseLeave(hideTooltip),
+                    onClick: _this3.handleClick
+                });
+            }
+        );
+    };
 
-                        var arcsData = interpolatedPie(enhancedData).map(function (d) {
-                            var angle = d.endAngle - d.startAngle;
+    return PieCanvasRenderer;
+}(React.Component);
 
-                            return _extends({}, d, {
-                                angle: angle,
-                                angleDegrees: core.radiansToDegrees(angle),
-                                data: d.data
-                            });
-                        });
+PieCanvasRenderer.propTypes = {
+    arcs: PropTypes.arrayOf(arcPropType).isRequired,
+    arcGenerator: PropTypes.func.isRequired,
 
-                        return React__default.createElement(
-                            'g',
-                            {
-                                transform: 'translate(' + interpolatingStyle.centerX + ', ' + interpolatingStyle.centerY + ')'
-                            },
-                            arcsData.map(function (d) {
-                                return React__default.createElement(PieSlice$1, {
-                                    key: d.data.id,
-                                    data: d.data,
-                                    path: interpolatedArc(d),
-                                    color: d.data.color,
-                                    fill: d.data.fill ? d.data.fill : d.data.color,
-                                    borderWidth: borderWidth,
-                                    borderColor: borderColor(d.data),
-                                    showTooltip: showTooltip,
-                                    hideTooltip: hideTooltip,
-                                    tooltipFormat: tooltipFormat,
-                                    tooltip: tooltip,
-                                    theme: theme,
-                                    onClick: onClick
-                                });
-                            }),
-                            enableSlicesLabels && React__default.createElement(PieSlicesLabels, _extends({
-                                data: arcsData,
-                                radius: radius,
-                                innerRadius: interpolatingStyle.innerRadius,
-                                theme: theme
-                            }, slicesLabelsProps)),
-                            enableRadialLabels && React__default.createElement(PieRadialLabels, _extends({
-                                data: arcsData,
-                                radius: radius,
-                                theme: theme
-                            }, radialLabelsProps))
-                        );
-                    }
-                ),
-                legends$$1.map(function (legend, i) {
-                    return React__default.createElement(legends.BoxLegendSvg, _extends({
-                        key: i
-                    }, legend, {
-                        containerWidth: width,
-                        containerHeight: height,
-                        data: legendData
-                    }));
-                })
-            );
-        }
-    );
+    // resolution
+    pixelRatio: PropTypes.number.isRequired,
+
+    // dimensions/layout
+    outerWidth: PropTypes.number.isRequired,
+    outerHeight: PropTypes.number.isRequired,
+    centerX: PropTypes.number.isRequired,
+    centerY: PropTypes.number.isRequired,
+    margin: PropTypes.object.isRequired,
+    radius: PropTypes.number.isRequired,
+    innerRadius: PropTypes.number.isRequired,
+
+    // interactivity
+    isInteractive: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+
+    // theming
+    theme: PropTypes.object.isRequired
 };
 
-Pie.propTypes = PiePropTypes;
+var PieCanvas = function (_Component) {
+    inherits(PieCanvas, _Component);
 
-var enhancedPie = enhance$1(Pie);
-enhancedPie.displayName = 'enhance(Pie)';
+    function PieCanvas() {
+        classCallCheck(this, PieCanvas);
+        return possibleConstructorReturn(this, _Component.apply(this, arguments));
+    }
 
-var ResponsivePie = (function (props) {
+    PieCanvas.prototype.render = function render() {
+        var _props = this.props,
+            data = _props.data,
+            sortByValue = _props.sortByValue,
+            startAngle = _props.startAngle,
+            endAngle = _props.endAngle,
+            fit = _props.fit,
+            padAngle = _props.padAngle,
+            innerRadius = _props.innerRadius,
+            cornerRadius = _props.cornerRadius,
+            width = _props.width,
+            height = _props.height,
+            colors = _props.colors,
+            colorBy = _props.colorBy,
+            topProps = objectWithoutProperties(_props, ['data', 'sortByValue', 'startAngle', 'endAngle', 'fit', 'padAngle', 'innerRadius', 'cornerRadius', 'width', 'height', 'colors', 'colorBy']);
+
+
+        return React__default.createElement(
+            PieLayout$1,
+            {
+                width: width,
+                height: height,
+                data: data,
+                sortByValue: sortByValue,
+                startAngle: startAngle,
+                endAngle: endAngle,
+                fit: fit,
+                padAngle: padAngle,
+                innerRadius: innerRadius,
+                cornerRadius: cornerRadius,
+                colors: colors,
+                colorBy: colorBy
+            },
+            function (props) {
+                return React__default.createElement(PieCanvasRenderer, _extends({}, topProps, props));
+            }
+        );
+    };
+
+    return PieCanvas;
+}(React.Component);
+
+PieCanvas.propTypes = PiePropTypes;
+
+
+var PieCanvas$1 = setDisplayName('PieCanvas')(enhance$4(PieCanvas));
+
+var ResponsivePieCanvas = function ResponsivePieCanvas(props) {
     return React__default.createElement(
@@ -654,10 +1376,14 @@ core.ResponsiveWrapper,
                 height = _ref.height;
-            return React__default.createElement(enhancedPie, _extends({ width: width, height: height }, props));
+            return React__default.createElement(PieCanvas$1, _extends({ width: width, height: height }, props));
         }
     );
-});
+};
 
-exports.Pie = enhancedPie;
+exports.PieLayout = PieLayout$1;
+exports.Pie = Pie$1;
 exports.ResponsivePie = ResponsivePie;
+exports.PieCanvas = PieCanvas$1;
+exports.ResponsivePieCanvas = ResponsivePieCanvas;
+exports.arcPropType = arcPropType;
 exports.PiePropTypes = PiePropTypes;
 exports.PieDefaultProps = PieDefaultProps;

index.d.ts

@@ -0,126 +1,79 @@
+import * as React from 'react'
+import { Box, Dimensions, Theme, MotionProps, ColorProps, GetColor, SvgDefsAndFill } from '@nivo/core'
+import { LegendProps } from '@nivo/legends'
+
 declare module '@nivo/pie' {
-    export class Pie extends React.Component<Data & PieProps & Dimensions>{ }
-    export class ResponsivePie extends React.Component<Data & PieProps>{ }
+    export interface PieDatum {
+        id: string | number
+        value: number
+        [key: string]: string | number
+    }
 
-    export type LegendItemDirection =
-        | 'left-to-right'
-        | 'right-to-left'
-        | 'top-to-bottom'
-        | 'bottom-to-top';
+    export type PieDatumWithColor = PieDatum & {
+        color: string
+    }
 
-    export type Anchor =
-        | 'top'
-        | 'top-right'
-        | 'right'
-        | 'bottom-right'
-        | 'bottom'
-        | 'bottom-left'
-        | 'left'
-        | 'top-left'
-        | 'center';
+    export type AccessorFunc = (datum: PieDatum) => string
 
-    export type LegendDirection = 'row' | 'column';
+    export type ValueFormatter = (value: number) => string | number
 
-    export type Legend = {
-
-        data: Array<{ label: string | number; fill: string; }>;
-
-        // position & layout
-        anchor: Anchor;
-
-        translateX: number; // default 0
-        translateY: number; // default 0
-        direction: LegendDirection;
-
-        // items
-        itemWidth: number;
-        itemHeight: number;
-        itemDirection?: LegendItemDirection; // default left-to-right
-        itemsSpacing?: number; // default 0
-        symbolSize?: number; // default 16
-        symbolSpacing?: number; // default 8
-        symbolShape?: "circle" | "diamond" | "square" | "triangle", // default square
-        textColor?: string; // default black
+    export interface Data {
+        data: PieDatum[]
     }
 
-    export interface PieDataItem {
-        id: string;
-        value: string;
-    }
+    export type CommonPieProps = MotionProps & ColorProps<PieDatum> & Partial<{
+        margin: Box
+        sortByValue: boolean
+        innerRadius: number
+        padAngle: number
+        cornerRadius: number
+        startAngle: number
+        endAngle: number
+        fit: boolean
 
-    export type SettingsGetterFunc = (dataSlize: PieDataItem) => string;
-
-    export type Data = { data: Array<PieDataItem> };
-
-    export type PieProps = Partial<{
-        sortByValue: boolean;
-        innerRadius: number;
-        padAngle: number;
-        cornerRadius: number;
-
         // border
-        borderWidth: number;
-        borderColor: string | SettingsGetterFunc;
+        // styling
+        theme: Theme
+        borderWidth: number
+        borderColor: string | GetColor<PieDatum>
 
         // radial labels
-        enableRadialLabels: boolean;
-        radialLabel: string | SettingsGetterFunc;
-        radialLabelsSkipAngle: number;
-        radialLabelsTextXOffset: number;
-        radialLabelsTextColor: string | SettingsGetterFunc;
-        radialLabelsLinkOffset: number;
-        radialLabelsLinkDiagonalLength: number;
-        radialLabelsLinkHorizontalLength: number;
-        radialLabelsLinkStrokeWidth: number;
-        radialLabelsLinkColor: string | SettingsGetterFunc;
+        enableRadialLabels: boolean
+        radialLabel: string | AccessorFunc
+        radialLabelsSkipAngle: number
+        radialLabelsTextXOffset: number
+        radialLabelsTextColor: string | GetColor<PieDatumWithColor>
+        radialLabelsLinkOffset: number
+        radialLabelsLinkDiagonalLength: number
+        radialLabelsLinkHorizontalLength: number
+        radialLabelsLinkStrokeWidth: number
+        radialLabelsLinkColor: string | GetColor<PieDatumWithColor>
 
         // slices labels
-        enableSlicesLabels: boolean;
-        sliceLabel: string | SettingsGetterFunc;
-        slicesLabelsSkipAngle: number;
-        slicesLabelsTextColor: string | SettingsGetterFunc;
+        enableSlicesLabels: boolean
+        sliceLabel: string | AccessorFunc
+        slicesLabelsSkipAngle: number
+        slicesLabelsTextColor: string | GetColor<PieDatumWithColor>
 
+        // interactivity
+        isInteractive: boolean
+        onClick: (datum: PieDatum, event: React.MouseEvent<SVGPathElement>) => void
+        tooltipFormat: string | ValueFormatter
+        tooltip: React.StatelessComponent<PieDatumWithColor>
 
-        colors: string | string[] | Function;
-        colorBy: string | Function;
+        legends: LegendProps[]
+    }>
 
-        margin: Box;
+    export type PieSvgProps = Data & CommonPieProps & SvgDefsAndFill<PieDatum>
 
+    export class Pie extends React.Component<PieSvgProps & Dimensions> {}
+    export class ResponsivePie extends React.Component<PieSvgProps> {}
 
-        isInteractive: boolean;
-        onClick: (dataSlize: PieDataItem, event: React.MouseEvent<SVGPathElement>) => void;
-        tooltipFormat: string | Function;
-        tooltip: Function;
+    export type PieCanvasProps = Data & CommonPieProps & Partial<{
+        pixelRatio: number
+    }>
 
-        theme: Theme;
+    export class PieCanvas extends React.Component<PieCanvasProps & Dimensions> {}
+    export class ResponsivePieCanvas extends React.Component<PieCanvasProps> {}
 
-        legends: Array<Legend>;
-    }>;
-
-    export interface Dimensions {
-        height: number;
-        width: number;
-    }
-
-    export type Theme = Partial<{
-        axis: React.CSSProperties;
-        grid: React.CSSProperties;
-        markers: React.CSSProperties;
-        dots: React.CSSProperties;
-        tooltip: Partial<{
-            basic: React.CSSProperties;
-            container: React.CSSProperties;
-            table: React.CSSProperties;
-            tableCell: React.CSSProperties;
-        }>;
-        labels: React.CSSProperties;
-        sankey: Partial<{ label: React.CSSProperties }>;
-    }>
-
-    export type Box = Partial<{
-        bottom: number;
-        left: number;
-        right: number;
-        top: number;
-    }>
-}
+}

package.json

 {
   "name": "@nivo/pie",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "license": "MIT",
@@ -13,4 +13,4 @@ "main": "./index.js",
   "dependencies": {
-    "@nivo/core": "0.36.0",
-    "@nivo/legends": "0.35.2",
+    "@nivo/core": "0.42.0",
+    "@nivo/legends": "0.42.0",
     "d3-shape": "^1.2.0",
@@ -17,0 +17,0 @@ "lodash": "^4.17.4",

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51460

increased by92.57%

Lines of code

1238

increased by89.59%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

• + Added@nivo/legends@0.42.0(transitive)

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

• - Removed@nivo/legends@0.35.2(transitive)

• Updated@nivo/core@0.42.0

• Updated@nivo/legends@0.42.0