victory-pie - npm Package Compare versions

Comparing version 36.8.2 to 36.8.3

CHANGELOG.md

 # victory-pie
 
+## 36.8.3
+
+### Patch Changes
+
+- Migrate victory-pie to TypeScript ([#2740](https://github.com/FormidableLabs/victory/pull/2740))
+
 ## 36.8.2
@@ -4,0 +10,0 @@

es/helper-methods.js

@@ -54,3 +54,3 @@ import _isNil from "lodash/isNil";
   var styleObject = Helpers.getDefaultStyles(props, "pie");
-  var style = Helpers.getStyles(props.style, styleObject, "auto", "100%");
+  var style = Helpers.getStyles(props.style, styleObject);
   var colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
@@ -96,6 +96,9 @@ var padding = Helpers.getPadding(props);
 
-var getLabelArc = function (radius, labelRadius, style) {
+var getLabelArc = function (labelRadius) {
+  return d3Shape.arc().outerRadius(labelRadius).innerRadius(labelRadius);
+};
+
+var getCalculatedLabelRadius = function (radius, labelRadius, style) {
   var padding = style && style.padding || 0;
-  var arcRadius = labelRadius || radius + padding;
-  return d3Shape.arc().outerRadius(arcRadius).innerRadius(arcRadius);
+  return labelRadius || radius + padding;
 };
@@ -205,3 +208,4 @@
   }, dataProps));
-  var labelArc = getLabelArc(defaultRadius, labelRadius, evaluatedStyle);
+  var calculatedLabelRadius = getCalculatedLabelRadius(defaultRadius, labelRadius, evaluatedStyle);
+  var labelArc = getLabelArc(calculatedLabelRadius);
   var position = getLabelPosition(labelArc, slice, labelPosition);
@@ -227,3 +231,4 @@ var baseAngle = getBaseLabelAngle(slice, labelPosition, labelStyle);
     verticalAnchor: verticalAnchor,
-    angle: labelAngle
+    angle: labelAngle,
+    calculatedLabelRadius: calculatedLabelRadius
   };
@@ -239,4 +244,53 @@
 
-export var getBaseProps = function (props, fallbackProps) {
-  props = Helpers.modifyProps(props, fallbackProps, "pie");
+export var getXOffsetMultiplayerByAngle = function (angle) {
+  return Math.cos(angle - Helpers.degreesToRadians(90));
+};
+export var getYOffsetMultiplayerByAngle = function (angle) {
+  return Math.sin(angle - Helpers.degreesToRadians(90));
+};
+export var getXOffset = function (offset, angle) {
+  return offset * getXOffsetMultiplayerByAngle(angle);
+};
+export var getYOffset = function (offset, angle) {
+  return offset * getYOffsetMultiplayerByAngle(angle);
+};
+export var getAverage = function (array) {
+  return array.reduce(function (acc, cur) {
+    return acc + cur;
+  }, 0) / array.length;
+};
+export var getLabelIndicatorPropsForLineSegment = function (props, calculatedValues, labelProps) {
+  var innerRadius = props.innerRadius,
+      radius = props.radius,
+      _props$slice = props.slice,
+      startAngle = _props$slice.startAngle,
+      endAngle = _props$slice.endAngle,
+      labelIndicatorInnerOffset = props.labelIndicatorInnerOffset,
+      labelIndicatorOuterOffset = props.labelIndicatorOuterOffset,
+      index = props.index;
+  var height = calculatedValues.height,
+      width = calculatedValues.width;
+  var calculatedLabelRadius = labelProps.calculatedLabelRadius; // calculation
+
+  var middleRadius = getAverage([innerRadius, radius]);
+  var midAngle = getAverage([endAngle, startAngle]);
+  var centerX = width / 2;
+  var centerY = height / 2;
+  var innerOffset = middleRadius + labelIndicatorInnerOffset;
+  var outerOffset = calculatedLabelRadius - labelIndicatorOuterOffset;
+  var x1 = centerX + getXOffset(innerOffset, midAngle);
+  var y1 = centerY + getYOffset(innerOffset, midAngle);
+  var x2 = centerX + getXOffset(outerOffset, midAngle);
+  var y2 = centerY + getYOffset(outerOffset, midAngle);
+  var labelIndicatorProps = {
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
+    index: index
+  };
+  return _defaults({}, labelIndicatorProps);
+};
+export var getBaseProps = function (initialProps, fallbackProps) {
+  var props = Helpers.modifyProps(initialProps, fallbackProps, "pie");
   var calculatedValues = getCalculatedValues(props);
@@ -258,3 +312,4 @@ var slices = calculatedValues.slices,
       padAngle = calculatedValues.padAngle,
-      disableInlineStyles = calculatedValues.disableInlineStyles;
+      disableInlineStyles = calculatedValues.disableInlineStyles,
+      labelIndicator = calculatedValues.labelIndicator;
   var radius = props.radius || defaultRadius;
@@ -300,2 +355,10 @@ var initialChildProps = {
       childProps[eventKey].labels = getLabelProps(evaluatedText, _assign({}, props, dataProps), calculatedValues);
+
+      if (labelIndicator) {
+        var labelProps = childProps[eventKey].labels;
+
+        if (labelProps.calculatedLabelRadius > radius) {
+          childProps[eventKey].labelIndicators = getLabelIndicatorPropsForLineSegment(_assign({}, props, dataProps), calculatedValues, labelProps);
+        }
+      }
     }
@@ -302,0 +365,0 @@

es/index.d.ts

@@ -1,83 +0,3 @@
-import * as React from "react";
-import {
-  CategoryPropType,
-  ColorScalePropType,
-  DataGetterPropType,
-  EventPropTypeInterface,
-  StringOrCallback,
-  NumberOrCallback,
-  OriginType,
-  SliceNumberOrCallback,
-  StringOrNumberOrCallback,
-  VictoryCommonProps,
-  VictoryLabelableProps,
-  VictoryMultiLabelableProps,
-  VictoryStyleInterface,
-} from "victory-core";
-
-export type VictorySliceLabelPositionType =
-  | "startAngle"
-  | "centroid"
-  | "endAngle";
-export type VictorySliceLabelPlacementType =
-  | "vertical"
-  | "parallel"
-  | "perpendicular";
-export type VictorySliceTTargetType = "data" | "labels" | "parent";
-
-export interface SliceProps extends VictoryCommonProps {
-  ariaLabel?: StringOrCallback;
-  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
-  datum?: any;
-  innerRadius?: NumberOrCallback;
-  padAngle?: SliceNumberOrCallback<SliceProps, "padAngle">;
-  pathComponent?: React.ReactElement;
-  pathFunction?: (props: SliceProps) => string;
-  radius?: SliceNumberOrCallback<SliceProps, "radius">;
-  slice?: {
-    startAngle?: number;
-    endAngle?: number;
-    padAngle?: number;
-    data?: any[];
-  };
-  sliceEndAngle?: SliceNumberOrCallback<SliceProps, "sliceEndAngle">;
-  sliceStartAngle?: SliceNumberOrCallback<SliceProps, "sliceStartAngle">;
-  style?: VictoryStyleInterface;
-  tabIndex?: NumberOrCallback;
-}
-
-export class Slice extends React.Component<SliceProps, any> {}
-
-export interface VictoryPieProps
-  extends Omit<VictoryCommonProps, "polar">,
-    VictoryLabelableProps,
-    VictoryMultiLabelableProps {
-  categories?: CategoryPropType;
-  colorScale?: ColorScalePropType;
-  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
-  data?: any[];
-  dataComponent?: React.ReactElement;
-  endAngle?: number;
-  events?: EventPropTypeInterface<
-    VictorySliceTTargetType,
-    StringOrNumberOrCallback | string[] | number[]
-  >[];
-  eventKey?: StringOrNumberOrCallback;
-  innerRadius?: NumberOrCallback;
-  labelPlacement?:
-    | VictorySliceLabelPlacementType
-    | ((props: SliceProps) => VictorySliceLabelPlacementType);
-  labelPosition?:
-    | VictorySliceLabelPositionType
-    | ((props: SliceProps) => VictorySliceLabelPositionType);
-  labelRadius?: number | ((props: SliceProps) => number);
-  origin?: OriginType;
-  padAngle?: NumberOrCallback;
-  radius?: NumberOrCallback;
-  startAngle?: number;
-  style?: VictoryStyleInterface;
-  x?: DataGetterPropType;
-  y?: DataGetterPropType;
-}
-
-export class VictoryPie extends React.Component<VictoryPieProps, any> {}
+export * from "./victory-pie";
+export * from "./slice";
+//# sourceMappingURL=index.d.ts.map

es/index.js

@@ -1,2 +0,2 @@
-export { default as VictoryPie } from "./victory-pie";
-export { default as Slice } from "./slice";
+export * from "./victory-pie";
+export * from "./slice";

es/slice.js

@@ -87,5 +87,4 @@ import _assign from "lodash/assign";
 };
-
-var Slice = function (props) {
-  props = evaluateProps(_objectSpread(_objectSpread({}, defaultProps), props));
+export var Slice = function (initialProps) {
+  var props = evaluateProps(_objectSpread(_objectSpread({}, defaultProps), initialProps));
   var defaultTransform = props.origin ? "translate(".concat(props.origin.x, ", ").concat(props.origin.y, ")") : undefined;
@@ -104,3 +103,2 @@ return /*#__PURE__*/React.cloneElement(props.pathComponent, _objectSpread(_objectSpread({}, props.events), {}, {
 };
-
 Slice.propTypes = _objectSpread(_objectSpread({}, CommonProps.primitiveProps), {}, {
@@ -117,3 +115,2 @@ cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
   sliceStartAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
-});
-export default Slice;
+});

es/victory-pie.js

@@ -0,1 +1,15 @@
+import _isNil from "lodash/isNil";
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -21,8 +35,6 @@
 
-/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import React from "react";
-import PropTypes from "prop-types";
-import { addEvents, Helpers, Data, PropTypes as CustomPropTypes, VictoryContainer, VictoryLabel, VictoryTheme, UserProps } from "victory-core";
-import Slice from "./slice";
+import { addEvents, Helpers, Data, LineSegment, VictoryContainer, VictoryLabel, VictoryTheme, UserProps } from "victory-core";
 import { getBaseProps } from "./helper-methods";
+import { Slice } from "./slice";
 var fallbackProps = {
@@ -38,17 +50,24 @@ endAngle: 360,
   colorScale: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd", "#969696", "#737373", "#525252", "#252525", "#000000"],
-  labelPosition: "centroid"
+  labelPosition: "centroid",
+  labelIndicatorInnerOffset: 15,
+  labelIndicatorOuterOffset: 5
 };
 
-var VictoryPie = /*#__PURE__*/function (_React$Component) {
-  _inherits(VictoryPie, _React$Component);
+var datumHasXandY = function (datum) {
+  return !_isNil(datum._x) && !_isNil(datum._y);
+}; // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
-  var _super = _createSuper(VictoryPie);
 
-  function VictoryPie() {
-    _classCallCheck(this, VictoryPie);
+var VictoryPieBase = /*#__PURE__*/function (_React$Component) {
+  _inherits(VictoryPieBase, _React$Component);
 
+  var _super = _createSuper(VictoryPieBase);
+
+  function VictoryPieBase() {
+    _classCallCheck(this, VictoryPieBase);
+
     return _super.apply(this, arguments);
   }
 
-  _createClass(VictoryPie, [{
+  _createClass(VictoryPieBase, [{
     key: "shouldAnimate",
@@ -60,2 +79,67 @@ value: // Overridden in victory-native
   }, {
+    key: "renderComponents",
+    value: function renderComponents(props) {
+      var _this = this;
+
+      var shouldRenderDatum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : datumHasXandY;
+      var dataComponent = props.dataComponent,
+          labelComponent = props.labelComponent,
+          groupComponent = props.groupComponent,
+          labelIndicator = props.labelIndicator,
+          labelPosition = props.labelPosition;
+
+      if (!groupComponent) {
+        throw new Error("VictoryPie expects a groupComponent prop");
+      }
+
+      var showIndicator = labelIndicator && labelPosition === "centroid";
+      var children = [];
+
+      if (dataComponent) {
+        var dataComponents = this.dataKeys.reduce(function (validDataComponents, _dataKey, index) {
+          var dataProps = _this.getComponentProps(dataComponent, "data", index);
+
+          if (shouldRenderDatum(dataProps.datum)) {
+            validDataComponents.push( /*#__PURE__*/React.cloneElement(dataComponent, dataProps));
+          }
+
+          return validDataComponents;
+        }, []);
+        children.push.apply(children, _toConsumableArray(dataComponents));
+      }
+
+      if (labelComponent) {
+        var labelComponents = this.dataKeys.map(function (_dataKey, index) {
+          var labelProps = _this.getComponentProps(labelComponent, "labels", index);
+
+          if (labelProps.text !== undefined && labelProps.text !== null) {
+            return /*#__PURE__*/React.cloneElement(labelComponent, labelProps);
+          }
+
+          return undefined;
+        }).filter(function (comp) {
+          return comp !== undefined;
+        });
+        children.push.apply(children, _toConsumableArray(labelComponents));
+      }
+
+      if (showIndicator && labelIndicator) {
+        var labelIndicatorComponent = /*#__PURE__*/React.createElement(LineSegment, null);
+
+        if (typeof labelIndicator === "object") {
+          // pass user provided react component
+          labelIndicatorComponent = labelIndicator;
+        }
+
+        var labelIndicatorComponents = this.dataKeys.map(function (_dataKey, index) {
+          var labelIndicatorProps = _this.getComponentProps(labelIndicatorComponent, "labelIndicators", index);
+
+          return /*#__PURE__*/React.cloneElement(labelIndicatorComponent, labelIndicatorProps);
+        });
+        children.push.apply(children, _toConsumableArray(labelIndicatorComponents));
+      }
+
+      return this.renderContainer(groupComponent, children);
+    }
+  }, {
     key: "render",
@@ -71,3 +155,3 @@ value: function render() {
 
-      var children = this.renderData(props);
+      var children = this.renderComponents(props);
       var component = props.standalone ? this.renderContainer(props.containerComponent, children) : children;
@@ -78,9 +162,9 @@ return UserProps.withSafeUserProps(component, props);
 
-  return VictoryPie;
+  return VictoryPieBase;
 }(React.Component);
 
-VictoryPie.animationWhitelist = ["data", "endAngle", "height", "innerRadius", "cornerRadius", "padAngle", "padding", "colorScale", "startAngle", "style", "width"];
-VictoryPie.displayName = "VictoryPie";
-VictoryPie.role = "pie";
-VictoryPie.defaultTransitions = {
+VictoryPieBase.animationWhitelist = ["data", "endAngle", "height", "innerRadius", "cornerRadius", "padAngle", "padding", "colorScale", "startAngle", "style", "width"];
+VictoryPieBase.displayName = "VictoryPie";
+VictoryPieBase.role = "pie";
+VictoryPieBase.defaultTransitions = {
   onExit: {
@@ -111,64 +195,3 @@ duration: 500,
 };
-VictoryPie.propTypes = {
-  animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  colorScale: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.oneOf(["grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
-  containerComponent: PropTypes.element,
-  cornerRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
-  data: PropTypes.array,
-  dataComponent: PropTypes.element,
-  disableInlineStyes: PropTypes.bool,
-  endAngle: PropTypes.number,
-  eventKey: PropTypes.oneOfType([PropTypes.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string]),
-  events: PropTypes.arrayOf(PropTypes.shape({
-    target: PropTypes.oneOf(["data", "labels", "parent"]),
-    eventKey: PropTypes.oneOfType([PropTypes.array, PropTypes.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string]),
-    eventHandlers: PropTypes.object
-  })),
-  externalEventMutations: PropTypes.arrayOf(PropTypes.shape({
-    callback: PropTypes.func,
-    childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-    eventKey: PropTypes.oneOfType([PropTypes.array, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string]),
-    mutation: PropTypes.func,
-    target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
-  })),
-  groupComponent: PropTypes.element,
-  height: CustomPropTypes.nonNegative,
-  innerRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
-  labelComponent: PropTypes.element,
-  labelPlacement: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(["parallel", "perpendicular", "vertical"])]),
-  labelPosition: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(["startAngle", "centroid", "endAngle"])]),
-  labelRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
-  labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
-  name: PropTypes.string,
-  origin: PropTypes.shape({
-    x: CustomPropTypes.nonNegative,
-    y: CustomPropTypes.nonNegative
-  }),
-  padAngle: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    top: PropTypes.number,
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number
-  })]),
-  radius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
-  sharedEvents: PropTypes.shape({
-    events: PropTypes.array,
-    getEventState: PropTypes.func
-  }),
-  sortKey: PropTypes.oneOfType([PropTypes.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  sortOrder: PropTypes.oneOf(["ascending", "descending"]),
-  standalone: PropTypes.bool,
-  startAngle: PropTypes.number,
-  style: PropTypes.shape({
-    parent: PropTypes.object,
-    data: PropTypes.object,
-    labels: PropTypes.object
-  }),
-  theme: PropTypes.object,
-  width: CustomPropTypes.nonNegative,
-  x: PropTypes.oneOfType([PropTypes.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  y: PropTypes.oneOfType([PropTypes.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
-};
-VictoryPie.defaultProps = {
+VictoryPieBase.defaultProps = {
   data: [{
@@ -199,8 +222,8 @@ x: "A",
 
-VictoryPie.getBaseProps = function (props) {
+VictoryPieBase.getBaseProps = function (props) {
   return getBaseProps(props, fallbackProps);
 };
 
-VictoryPie.getData = Data.getData;
-VictoryPie.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
-export default addEvents(VictoryPie);
+VictoryPieBase.getData = Data.getData;
+VictoryPieBase.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent", "labelIndicatorComponent"];
+export var VictoryPie = addEvents(VictoryPieBase);

lib/helper-methods.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.getBaseProps = void 0;
+exports.getYOffsetMultiplayerByAngle = exports.getYOffset = exports.getXOffsetMultiplayerByAngle = exports.getXOffset = exports.getLabelIndicatorPropsForLineSegment = exports.getBaseProps = exports.getAverage = void 0;
 
@@ -76,3 +76,3 @@ var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
 
-  var style = _victoryCore.Helpers.getStyles(props.style, styleObject, "auto", "100%");
+  var style = _victoryCore.Helpers.getStyles(props.style, styleObject);
 
@@ -123,6 +123,9 @@ var colors = Array.isArray(colorScale) ? colorScale : _victoryCore.Style.getColorScale(colorScale);
 
-var getLabelArc = function (radius, labelRadius, style) {
+var getLabelArc = function (labelRadius) {
+  return d3Shape.arc().outerRadius(labelRadius).innerRadius(labelRadius);
+};
+
+var getCalculatedLabelRadius = function (radius, labelRadius, style) {
   var padding = style && style.padding || 0;
-  var arcRadius = labelRadius || radius + padding;
-  return d3Shape.arc().outerRadius(arcRadius).innerRadius(arcRadius);
+  return labelRadius || radius + padding;
 };
@@ -232,3 +235,4 @@
 
-  var labelArc = getLabelArc(defaultRadius, labelRadius, evaluatedStyle);
+  var calculatedLabelRadius = getCalculatedLabelRadius(defaultRadius, labelRadius, evaluatedStyle);
+  var labelArc = getLabelArc(calculatedLabelRadius);
   var position = getLabelPosition(labelArc, slice, labelPosition);
@@ -254,3 +258,4 @@ var baseAngle = getBaseLabelAngle(slice, labelPosition, labelStyle);
     verticalAnchor: verticalAnchor,
-    angle: labelAngle
+    angle: labelAngle,
+    calculatedLabelRadius: calculatedLabelRadius
   };
@@ -266,4 +271,72 @@
 
-var getBaseProps = function (props, fallbackProps) {
-  props = _victoryCore.Helpers.modifyProps(props, fallbackProps, "pie");
+var getXOffsetMultiplayerByAngle = function (angle) {
+  return Math.cos(angle - _victoryCore.Helpers.degreesToRadians(90));
+};
+
+exports.getXOffsetMultiplayerByAngle = getXOffsetMultiplayerByAngle;
+
+var getYOffsetMultiplayerByAngle = function (angle) {
+  return Math.sin(angle - _victoryCore.Helpers.degreesToRadians(90));
+};
+
+exports.getYOffsetMultiplayerByAngle = getYOffsetMultiplayerByAngle;
+
+var getXOffset = function (offset, angle) {
+  return offset * getXOffsetMultiplayerByAngle(angle);
+};
+
+exports.getXOffset = getXOffset;
+
+var getYOffset = function (offset, angle) {
+  return offset * getYOffsetMultiplayerByAngle(angle);
+};
+
+exports.getYOffset = getYOffset;
+
+var getAverage = function (array) {
+  return array.reduce(function (acc, cur) {
+    return acc + cur;
+  }, 0) / array.length;
+};
+
+exports.getAverage = getAverage;
+
+var getLabelIndicatorPropsForLineSegment = function (props, calculatedValues, labelProps) {
+  var innerRadius = props.innerRadius,
+      radius = props.radius,
+      _props$slice = props.slice,
+      startAngle = _props$slice.startAngle,
+      endAngle = _props$slice.endAngle,
+      labelIndicatorInnerOffset = props.labelIndicatorInnerOffset,
+      labelIndicatorOuterOffset = props.labelIndicatorOuterOffset,
+      index = props.index;
+  var height = calculatedValues.height,
+      width = calculatedValues.width;
+  var calculatedLabelRadius = labelProps.calculatedLabelRadius; // calculation
+
+  var middleRadius = getAverage([innerRadius, radius]);
+  var midAngle = getAverage([endAngle, startAngle]);
+  var centerX = width / 2;
+  var centerY = height / 2;
+  var innerOffset = middleRadius + labelIndicatorInnerOffset;
+  var outerOffset = calculatedLabelRadius - labelIndicatorOuterOffset;
+  var x1 = centerX + getXOffset(innerOffset, midAngle);
+  var y1 = centerY + getYOffset(innerOffset, midAngle);
+  var x2 = centerX + getXOffset(outerOffset, midAngle);
+  var y2 = centerY + getYOffset(outerOffset, midAngle);
+  var labelIndicatorProps = {
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
+    index: index
+  };
+  return (0, _defaults2.default)({}, labelIndicatorProps);
+};
+
+exports.getLabelIndicatorPropsForLineSegment = getLabelIndicatorPropsForLineSegment;
+
+var getBaseProps = function (initialProps, fallbackProps) {
+  var props = _victoryCore.Helpers.modifyProps(initialProps, fallbackProps, "pie");
+
   var calculatedValues = getCalculatedValues(props);
@@ -285,3 +358,4 @@ var slices = calculatedValues.slices,
       padAngle = calculatedValues.padAngle,
-      disableInlineStyles = calculatedValues.disableInlineStyles;
+      disableInlineStyles = calculatedValues.disableInlineStyles,
+      labelIndicator = calculatedValues.labelIndicator;
   var radius = props.radius || defaultRadius;
@@ -327,2 +401,10 @@ var initialChildProps = {
       childProps[eventKey].labels = getLabelProps(evaluatedText, (0, _assign2.default)({}, props, dataProps), calculatedValues);
+
+      if (labelIndicator) {
+        var labelProps = childProps[eventKey].labels;
+
+        if (labelProps.calculatedLabelRadius > radius) {
+          childProps[eventKey].labelIndicators = getLabelIndicatorPropsForLineSegment((0, _assign2.default)({}, props, dataProps), calculatedValues, labelProps);
+        }
+      }
     }
@@ -329,0 +411,0 @@

lib/index.d.ts

@@ -1,83 +0,3 @@
-import * as React from "react";
-import {
-  CategoryPropType,
-  ColorScalePropType,
-  DataGetterPropType,
-  EventPropTypeInterface,
-  StringOrCallback,
-  NumberOrCallback,
-  OriginType,
-  SliceNumberOrCallback,
-  StringOrNumberOrCallback,
-  VictoryCommonProps,
-  VictoryLabelableProps,
-  VictoryMultiLabelableProps,
-  VictoryStyleInterface,
-} from "victory-core";
-
-export type VictorySliceLabelPositionType =
-  | "startAngle"
-  | "centroid"
-  | "endAngle";
-export type VictorySliceLabelPlacementType =
-  | "vertical"
-  | "parallel"
-  | "perpendicular";
-export type VictorySliceTTargetType = "data" | "labels" | "parent";
-
-export interface SliceProps extends VictoryCommonProps {
-  ariaLabel?: StringOrCallback;
-  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
-  datum?: any;
-  innerRadius?: NumberOrCallback;
-  padAngle?: SliceNumberOrCallback<SliceProps, "padAngle">;
-  pathComponent?: React.ReactElement;
-  pathFunction?: (props: SliceProps) => string;
-  radius?: SliceNumberOrCallback<SliceProps, "radius">;
-  slice?: {
-    startAngle?: number;
-    endAngle?: number;
-    padAngle?: number;
-    data?: any[];
-  };
-  sliceEndAngle?: SliceNumberOrCallback<SliceProps, "sliceEndAngle">;
-  sliceStartAngle?: SliceNumberOrCallback<SliceProps, "sliceStartAngle">;
-  style?: VictoryStyleInterface;
-  tabIndex?: NumberOrCallback;
-}
-
-export class Slice extends React.Component<SliceProps, any> {}
-
-export interface VictoryPieProps
-  extends Omit<VictoryCommonProps, "polar">,
-    VictoryLabelableProps,
-    VictoryMultiLabelableProps {
-  categories?: CategoryPropType;
-  colorScale?: ColorScalePropType;
-  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
-  data?: any[];
-  dataComponent?: React.ReactElement;
-  endAngle?: number;
-  events?: EventPropTypeInterface<
-    VictorySliceTTargetType,
-    StringOrNumberOrCallback | string[] | number[]
-  >[];
-  eventKey?: StringOrNumberOrCallback;
-  innerRadius?: NumberOrCallback;
-  labelPlacement?:
-    | VictorySliceLabelPlacementType
-    | ((props: SliceProps) => VictorySliceLabelPlacementType);
-  labelPosition?:
-    | VictorySliceLabelPositionType
-    | ((props: SliceProps) => VictorySliceLabelPositionType);
-  labelRadius?: number | ((props: SliceProps) => number);
-  origin?: OriginType;
-  padAngle?: NumberOrCallback;
-  radius?: NumberOrCallback;
-  startAngle?: number;
-  style?: VictoryStyleInterface;
-  x?: DataGetterPropType;
-  y?: DataGetterPropType;
-}
-
-export class VictoryPie extends React.Component<VictoryPieProps, any> {}
+export * from "./victory-pie";
+export * from "./slice";
+//# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -6,19 +6,27 @@ "use strict";
 });
-Object.defineProperty(exports, "Slice", {
-  enumerable: true,
-  get: function () {
-    return _slice.default;
-  }
+
+var _victoryPie = require("./victory-pie");
+
+Object.keys(_victoryPie).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _victoryPie[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _victoryPie[key];
+    }
+  });
 });
-Object.defineProperty(exports, "VictoryPie", {
-  enumerable: true,
-  get: function () {
-    return _victoryPie.default;
-  }
-});
 
-var _victoryPie = _interopRequireDefault(require("./victory-pie"));
+var _slice = require("./slice");
 
-var _slice = _interopRequireDefault(require("./slice"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Object.keys(_slice).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slice[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slice[key];
+    }
+  });
+});

lib/slice.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.Slice = void 0;
 
@@ -120,4 +120,4 @@ var _assign2 = _interopRequireDefault(require("lodash/assign"));
 
-var Slice = function (props) {
-  props = evaluateProps(_objectSpread(_objectSpread({}, defaultProps), props));
+var Slice = function (initialProps) {
+  var props = evaluateProps(_objectSpread(_objectSpread({}, defaultProps), initialProps));
   var defaultTransform = props.origin ? "translate(".concat(props.origin.x, ", ").concat(props.origin.y, ")") : undefined;
@@ -137,2 +137,3 @@ return /*#__PURE__*/_react.default.cloneElement(props.pathComponent, _objectSpread(_objectSpread({}, props.events), {}, {
 
+exports.Slice = Slice;
 Slice.propTypes = _objectSpread(_objectSpread({}, _victoryCore.CommonProps.primitiveProps), {}, {
@@ -149,4 +150,2 @@ cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
   sliceStartAngle: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func])
-});
-var _default = Slice;
-exports.default = _default;
+});

lib/victory-pie.js

@@ -6,16 +6,28 @@ "use strict";
 });
-exports.default = void 0;
+exports.VictoryPie = void 0;
 
+var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _victoryCore = require("victory-core");
 
-var _slice = _interopRequireDefault(require("./slice"));
-
 var _helperMethods = require("./helper-methods");
 
+var _slice = require("./slice");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -51,17 +63,24 @@
   colorScale: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd", "#969696", "#737373", "#525252", "#252525", "#000000"],
-  labelPosition: "centroid"
+  labelPosition: "centroid",
+  labelIndicatorInnerOffset: 15,
+  labelIndicatorOuterOffset: 5
 };
 
-var VictoryPie = /*#__PURE__*/function (_React$Component) {
-  _inherits(VictoryPie, _React$Component);
+var datumHasXandY = function (datum) {
+  return !(0, _isNil2.default)(datum._x) && !(0, _isNil2.default)(datum._y);
+}; // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
-  var _super = _createSuper(VictoryPie);
 
-  function VictoryPie() {
-    _classCallCheck(this, VictoryPie);
+var VictoryPieBase = /*#__PURE__*/function (_React$Component) {
+  _inherits(VictoryPieBase, _React$Component);
 
+  var _super = _createSuper(VictoryPieBase);
+
+  function VictoryPieBase() {
+    _classCallCheck(this, VictoryPieBase);
+
     return _super.apply(this, arguments);
   }
 
-  _createClass(VictoryPie, [{
+  _createClass(VictoryPieBase, [{
     key: "shouldAnimate",
@@ -73,2 +92,67 @@ value: // Overridden in victory-native
   }, {
+    key: "renderComponents",
+    value: function renderComponents(props) {
+      var _this = this;
+
+      var shouldRenderDatum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : datumHasXandY;
+      var dataComponent = props.dataComponent,
+          labelComponent = props.labelComponent,
+          groupComponent = props.groupComponent,
+          labelIndicator = props.labelIndicator,
+          labelPosition = props.labelPosition;
+
+      if (!groupComponent) {
+        throw new Error("VictoryPie expects a groupComponent prop");
+      }
+
+      var showIndicator = labelIndicator && labelPosition === "centroid";
+      var children = [];
+
+      if (dataComponent) {
+        var dataComponents = this.dataKeys.reduce(function (validDataComponents, _dataKey, index) {
+          var dataProps = _this.getComponentProps(dataComponent, "data", index);
+
+          if (shouldRenderDatum(dataProps.datum)) {
+            validDataComponents.push( /*#__PURE__*/_react.default.cloneElement(dataComponent, dataProps));
+          }
+
+          return validDataComponents;
+        }, []);
+        children.push.apply(children, _toConsumableArray(dataComponents));
+      }
+
+      if (labelComponent) {
+        var labelComponents = this.dataKeys.map(function (_dataKey, index) {
+          var labelProps = _this.getComponentProps(labelComponent, "labels", index);
+
+          if (labelProps.text !== undefined && labelProps.text !== null) {
+            return /*#__PURE__*/_react.default.cloneElement(labelComponent, labelProps);
+          }
+
+          return undefined;
+        }).filter(function (comp) {
+          return comp !== undefined;
+        });
+        children.push.apply(children, _toConsumableArray(labelComponents));
+      }
+
+      if (showIndicator && labelIndicator) {
+        var labelIndicatorComponent = /*#__PURE__*/_react.default.createElement(_victoryCore.LineSegment, null);
+
+        if (typeof labelIndicator === "object") {
+          // pass user provided react component
+          labelIndicatorComponent = labelIndicator;
+        }
+
+        var labelIndicatorComponents = this.dataKeys.map(function (_dataKey, index) {
+          var labelIndicatorProps = _this.getComponentProps(labelIndicatorComponent, "labelIndicators", index);
+
+          return /*#__PURE__*/_react.default.cloneElement(labelIndicatorComponent, labelIndicatorProps);
+        });
+        children.push.apply(children, _toConsumableArray(labelIndicatorComponents));
+      }
+
+      return this.renderContainer(groupComponent, children);
+    }
+  }, {
     key: "render",
@@ -85,3 +169,3 @@ value: function render() {
 
-      var children = this.renderData(props);
+      var children = this.renderComponents(props);
       var component = props.standalone ? this.renderContainer(props.containerComponent, children) : children;
@@ -92,9 +176,9 @@ return _victoryCore.UserProps.withSafeUserProps(component, props);
 
-  return VictoryPie;
+  return VictoryPieBase;
 }(_react.default.Component);
 
-VictoryPie.animationWhitelist = ["data", "endAngle", "height", "innerRadius", "cornerRadius", "padAngle", "padding", "colorScale", "startAngle", "style", "width"];
-VictoryPie.displayName = "VictoryPie";
-VictoryPie.role = "pie";
-VictoryPie.defaultTransitions = {
+VictoryPieBase.animationWhitelist = ["data", "endAngle", "height", "innerRadius", "cornerRadius", "padAngle", "padding", "colorScale", "startAngle", "style", "width"];
+VictoryPieBase.displayName = "VictoryPie";
+VictoryPieBase.role = "pie";
+VictoryPieBase.defaultTransitions = {
   onExit: {
@@ -125,64 +209,3 @@ duration: 500,
 };
-VictoryPie.propTypes = {
-  animate: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
-  colorScale: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.oneOf(["grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
-  containerComponent: _propTypes.default.element,
-  cornerRadius: _propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.func]),
-  data: _propTypes.default.array,
-  dataComponent: _propTypes.default.element,
-  disableInlineStyes: _propTypes.default.bool,
-  endAngle: _propTypes.default.number,
-  eventKey: _propTypes.default.oneOfType([_propTypes.default.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string]),
-  events: _propTypes.default.arrayOf(_propTypes.default.shape({
-    target: _propTypes.default.oneOf(["data", "labels", "parent"]),
-    eventKey: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string]),
-    eventHandlers: _propTypes.default.object
-  })),
-  externalEventMutations: _propTypes.default.arrayOf(_propTypes.default.shape({
-    callback: _propTypes.default.func,
-    childName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
-    eventKey: _propTypes.default.oneOfType([_propTypes.default.array, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string]),
-    mutation: _propTypes.default.func,
-    target: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array])
-  })),
-  groupComponent: _propTypes.default.element,
-  height: _victoryCore.PropTypes.nonNegative,
-  innerRadius: _propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.func]),
-  labelComponent: _propTypes.default.element,
-  labelPlacement: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(["parallel", "perpendicular", "vertical"])]),
-  labelPosition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(["startAngle", "centroid", "endAngle"])]),
-  labelRadius: _propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.func]),
-  labels: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.array]),
-  name: _propTypes.default.string,
-  origin: _propTypes.default.shape({
-    x: _victoryCore.PropTypes.nonNegative,
-    y: _victoryCore.PropTypes.nonNegative
-  }),
-  padAngle: _propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.func]),
-  padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-    top: _propTypes.default.number,
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number
-  })]),
-  radius: _propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.func]),
-  sharedEvents: _propTypes.default.shape({
-    events: _propTypes.default.array,
-    getEventState: _propTypes.default.func
-  }),
-  sortKey: _propTypes.default.oneOfType([_propTypes.default.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  sortOrder: _propTypes.default.oneOf(["ascending", "descending"]),
-  standalone: _propTypes.default.bool,
-  startAngle: _propTypes.default.number,
-  style: _propTypes.default.shape({
-    parent: _propTypes.default.object,
-    data: _propTypes.default.object,
-    labels: _propTypes.default.object
-  }),
-  theme: _propTypes.default.object,
-  width: _victoryCore.PropTypes.nonNegative,
-  x: _propTypes.default.oneOfType([_propTypes.default.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  y: _propTypes.default.oneOfType([_propTypes.default.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)])
-};
-VictoryPie.defaultProps = {
+VictoryPieBase.defaultProps = {
   data: [{
@@ -205,3 +228,3 @@ x: "A",
   standalone: true,
-  dataComponent: /*#__PURE__*/_react.default.createElement(_slice.default, null),
+  dataComponent: /*#__PURE__*/_react.default.createElement(_slice.Slice, null),
   labelComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryLabel, null),
@@ -214,11 +237,9 @@ containerComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, null),
 
-VictoryPie.getBaseProps = function (props) {
+VictoryPieBase.getBaseProps = function (props) {
   return (0, _helperMethods.getBaseProps)(props, fallbackProps);
 };
 
-VictoryPie.getData = _victoryCore.Data.getData;
-VictoryPie.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
-
-var _default = (0, _victoryCore.addEvents)(VictoryPie);
-
-exports.default = _default;
+VictoryPieBase.getData = _victoryCore.Data.getData;
+VictoryPieBase.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent", "labelIndicatorComponent"];
+var VictoryPie = (0, _victoryCore.addEvents)(VictoryPieBase);
+exports.VictoryPie = VictoryPie;

package.json

 {
   "name": "victory-pie",
-  "version": "36.8.2",
+  "version": "36.8.3",
   "description": "Pie Component for Victory",
@@ -25,4 +25,4 @@ "keywords": [
     "prop-types": "^15.8.1",
-    "victory-core": "^36.8.2",
-    "victory-vendor": "^36.8.2"
+    "victory-core": "^36.8.3",
+    "victory-vendor": "^36.8.3"
   },
@@ -29,0 +29,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1422621

increased by2.77%

Number of package files

26

increased by23.81%

Lines of code

23962

increased by2.52%

Dependency changes

• Updatedvictory-core@^36.8.3

• Updatedvictory-vendor@^36.8.3