victory-pie 36.8.2 → 36.8.3

package/lib/victory-pie.d.ts

@@ -0,0 +1,117 @@
+import React from "react";
+import { Data, ColorScalePropType, EventPropTypeInterface, NumberOrCallback, OriginType, SliceNumberOrCallback, StringOrNumberOrCallback, VictoryCommonProps, VictoryLabelableProps, VictoryMultiLabelableProps, VictoryStyleInterface, EventsMixinClass, VictoryDatableProps } from "victory-core";
+import { SliceProps, VictorySliceTTargetType, VictorySliceLabelPlacementType, VictorySliceLabelPositionType } from "./slice";
+export interface VictoryPieProps extends Omit<VictoryCommonProps, "polar">, VictoryDatableProps, VictoryLabelableProps, VictoryMultiLabelableProps {
+    colorScale?: ColorScalePropType;
+    cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
+    endAngle?: number;
+    events?: EventPropTypeInterface<VictorySliceTTargetType, StringOrNumberOrCallback | string[] | number[]>[];
+    eventKey?: StringOrNumberOrCallback;
+    innerRadius?: NumberOrCallback;
+    labelIndicator?: boolean | React.ReactElement;
+    labelIndicatorInnerOffset?: number;
+    labelIndicatorOuterOffset?: number;
+    labelPlacement?: VictorySliceLabelPlacementType | ((props: SliceProps) => VictorySliceLabelPlacementType);
+    labelPosition?: VictorySliceLabelPositionType | ((props: SliceProps) => VictorySliceLabelPositionType);
+    labelIndicatorComponent?: React.ReactElement;
+    labelRadius?: number | ((props: SliceProps) => number);
+    origin?: OriginType;
+    padAngle?: NumberOrCallback;
+    radius?: NumberOrCallback;
+    startAngle?: number;
+    style?: VictoryStyleInterface;
+}
+interface VictoryPieBase extends EventsMixinClass<VictoryPieProps> {
+}
+declare class VictoryPieBase extends React.Component<VictoryPieProps> {
+    static animationWhitelist: (keyof VictoryPieProps)[];
+    static displayName: string;
+    static role: string;
+    static defaultTransitions: {
+        onExit: {
+            duration: number;
+            before: () => {
+                _y: number;
+                label: string;
+            };
+        };
+        onEnter: {
+            duration: number;
+            before: () => {
+                _y: number;
+                label: string;
+            };
+            after: (datum: any) => {
+                y_: any;
+                label: any;
+            };
+        };
+    };
+    static defaultProps: VictoryPieProps;
+    static getBaseProps: (props: VictoryPieProps) => any;
+    static getData: typeof Data.getData;
+    static expectedComponents: (keyof VictoryPieProps)[];
+    shouldAnimate(): boolean;
+    renderComponents(props: VictoryPieProps, shouldRenderDatum?: (datum: any) => boolean): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement;
+}
+export declare const VictoryPie: {
+    new (props: import("victory-core").EventMixinCommonProps): {
+        state: {};
+        getEventState: (eventKey: string | number, namespace: string, childType?: string | undefined) => any;
+        getScopedEvents: (events: any, namespace: any, childType: any, baseProps: any) => {};
+        getEvents: (p: any, target: any, eventKey: any) => any;
+        externalMutations: {} | undefined;
+        calculatedState: {};
+        globalEvents: {};
+        prevGlobalEventKeys: string[];
+        boundGlobalEvents: {};
+        shouldComponentUpdate(nextProps: import("victory-core").EventMixinCommonProps): boolean;
+        componentDidMount(): void;
+        componentDidUpdate(prevProps: any): void;
+        componentWillUnmount(): void;
+        addGlobalListener(key: any): void;
+        removeGlobalListener(key: any): void;
+        getStateChanges(props: any): {};
+        applyExternalMutations(props: any, externalMutations: any): void;
+        getCalculatedValues(props: any): import("victory-core").EventMixinCalculatedValues;
+        getExternalMutations(props: import("victory-core").EventMixinCommonProps): {} | undefined;
+        cacheValues(obj: any): void;
+        getBaseProps(props: any, getSharedEventState: any): Record<string, object>;
+        getAllEvents(props: any): any;
+        getComponentProps(component: React.ReactNode, type: string, index: string | number): any;
+        renderContainer(component: any, children: any): React.DetailedReactHTMLElement<any, HTMLElement>;
+        animateComponent(props: import("victory-core").EventMixinCommonProps, defaultAnimationWhitelist: string[]): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        renderContinuousData(props: import("victory-core").EventMixinCommonProps): React.DetailedReactHTMLElement<any, HTMLElement>;
+        renderData(props: any, shouldRenderDatum?: ((datum: any) => boolean) | undefined): React.DetailedReactHTMLElement<any, HTMLElement>;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("victory-core").EventMixinCommonProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        render(): React.ReactNode;
+        readonly props: Readonly<import("victory-core").EventMixinCommonProps>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("victory-core").EventMixinCommonProps>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentEvents: import("victory-core/lib/victory-util/events").ComponentEvent[];
+        getSharedEventState: (key: string, value: string) => unknown;
+        baseProps: Record<string, object>;
+        dataKeys: string[];
+        hasEvents: unknown;
+        events: unknown;
+    };
+    getBaseProps?(props: import("victory-core").EventMixinCommonProps): Record<string, object>;
+    role?: string | undefined;
+    expectedComponents?: string[] | undefined;
+    getChildren?: ((props: import("victory-core").EventMixinCommonProps, childComponents?: React.ReactNode[] | undefined, calculatedProps?: import("victory-core").EventMixinCommonProps | undefined) => void) | undefined;
+    animationWhitelist?: string[] | undefined;
+} & typeof VictoryPieBase;
+export {};
+//# sourceMappingURL=victory-pie.d.ts.map

package/lib/victory-pie.js

@@ -3,20 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VictoryPie = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 
 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"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -47,26 +59,98 @@ var fallbackProps = {
   width: 400,
   startAngle: 0,
   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);
+var VictoryPieBase = /*#__PURE__*/function (_React$Component) {
+  _inherits(VictoryPieBase, _React$Component);
 
-  function VictoryPie() {
-    _classCallCheck(this, VictoryPie);
+  var _super = _createSuper(VictoryPieBase);
+
+  function VictoryPieBase() {
+    _classCallCheck(this, VictoryPieBase);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(VictoryPie, [{
+  _createClass(VictoryPieBase, [{
     key: "shouldAnimate",
     value: // Overridden in victory-native
     function shouldAnimate() {
       return Boolean(this.props.animate);
     }
+  }, {
+    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",
     value: function render() {
@@ -79,19 +163,19 @@ var VictoryPie = /*#__PURE__*/function (_React$Component) {
         return this.animateComponent(props, animationWhitelist);
       }
 
-      var children = this.renderData(props);
+      var children = this.renderComponents(props);
       var component = props.standalone ? this.renderContainer(props.containerComponent, children) : children;
       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: {
     duration: 500,
     before: function () {
@@ -117,68 +201,7 @@ VictoryPie.defaultTransitions = {
     }
   }
 };
-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: [{
     x: "A",
     y: 1
@@ -196,7 +219,7 @@ VictoryPie.defaultProps = {
     y: 2
   }],
   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),
   containerComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, null),
   groupComponent: /*#__PURE__*/_react.default.createElement("g", null),
@@ -204,13 +227,11 @@ VictoryPie.defaultProps = {
   theme: _victoryCore.VictoryTheme.grayscale
 };
 
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-pie",
-  "version": "36.8.2",
+  "version": "36.8.3",
   "description": "Pie Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,8 +22,8 @@
   "dependencies": {
     "lodash": "^4.17.19",
     "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"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

package/src/{helper-methods.js → helper-methods.ts}

@@ -53,7 +53,7 @@ const getSlices = (props, data) => {
     .startAngle(Helpers.degreesToRadians(props.startAngle))
     .endAngle(Helpers.degreesToRadians(props.endAngle))
     .padAngle(Helpers.degreesToRadians(padAngle))
-    .value((datum) => {
+    .value((datum: any) => {
       return datum._y;
     });
   return layoutFunction(data);
@@ -62,7 +62,7 @@ const getSlices = (props, data) => {
 const getCalculatedValues = (props) => {
   const { colorScale } = props;
   const styleObject = Helpers.getDefaultStyles(props, "pie");
-  const style = Helpers.getStyles(props.style, styleObject, "auto", "100%");
+  const style = Helpers.getStyles(props.style, styleObject);
   const colors = Array.isArray(colorScale)
     ? colorScale
     : Style.getColorScale(colorScale);
@@ -100,10 +100,13 @@ const getLabelText = (props, datum, index) => {
   return checkForValidText(text);
 };
 
-const getLabelArc = (radius, labelRadius, style) => {
+const getLabelArc = (labelRadius) => {
+  return d3Shape.arc().outerRadius(labelRadius).innerRadius(labelRadius);
+};
+
+const getCalculatedLabelRadius = (radius, labelRadius, style) => {
   const padding = (style && style.padding) || 0;
-  const arcRadius = labelRadius || radius + padding;
-  return d3Shape.arc().outerRadius(arcRadius).innerRadius(arcRadius);
+  return labelRadius || radius + padding;
 };
 
 const getLabelPosition = (arc, slice, position) => {
@@ -195,7 +198,12 @@ const getLabelProps = (text, dataProps, calculatedValues) => {
     labelStyle,
     assign({ labelRadius, text }, dataProps),
   );
-  const labelArc = getLabelArc(defaultRadius, labelRadius, evaluatedStyle);
+  const calculatedLabelRadius = getCalculatedLabelRadius(
+    defaultRadius,
+    labelRadius,
+    evaluatedStyle,
+  );
+  const labelArc = getLabelArc(calculatedLabelRadius);
   const position = getLabelPosition(labelArc, slice, labelPosition);
   const baseAngle = getBaseLabelAngle(slice, labelPosition, labelStyle);
   const labelAngle = getLabelAngle(baseAngle, labelPlacement);
@@ -219,6 +227,7 @@ const getLabelProps = (text, dataProps, calculatedValues) => {
     textAnchor,
     verticalAnchor,
     angle: labelAngle,
+    calculatedLabelRadius,
   };
 
   if (!Helpers.isTooltip(labelComponent)) {
@@ -228,8 +237,59 @@ const getLabelProps = (text, dataProps, calculatedValues) => {
   return defaults({}, labelProps, Helpers.omit(tooltipTheme, ["style"]));
 };
 
-export const getBaseProps = (props, fallbackProps) => {
-  props = Helpers.modifyProps(props, fallbackProps, "pie");
+export const getXOffsetMultiplayerByAngle = (angle) =>
+  Math.cos(angle - Helpers.degreesToRadians(90));
+export const getYOffsetMultiplayerByAngle = (angle) =>
+  Math.sin(angle - Helpers.degreesToRadians(90));
+export const getXOffset = (offset, angle) =>
+  offset * getXOffsetMultiplayerByAngle(angle);
+export const getYOffset = (offset, angle) =>
+  offset * getYOffsetMultiplayerByAngle(angle);
+export const getAverage = (array) =>
+  array.reduce((acc, cur) => acc + cur, 0) / array.length;
+
+export const getLabelIndicatorPropsForLineSegment = (
+  props,
+  calculatedValues,
+  labelProps,
+) => {
+  const {
+    innerRadius,
+    radius,
+    slice: { startAngle, endAngle },
+    labelIndicatorInnerOffset,
+    labelIndicatorOuterOffset,
+    index,
+  } = props;
+
+  const { height, width } = calculatedValues;
+  const { calculatedLabelRadius } = labelProps;
+  // calculation
+  const middleRadius = getAverage([innerRadius, radius]);
+  const midAngle = getAverage([endAngle, startAngle]);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const innerOffset = middleRadius + labelIndicatorInnerOffset;
+  const outerOffset = calculatedLabelRadius - labelIndicatorOuterOffset;
+
+  const x1 = centerX + getXOffset(innerOffset, midAngle);
+  const y1 = centerY + getYOffset(innerOffset, midAngle);
+
+  const x2 = centerX + getXOffset(outerOffset, midAngle);
+  const y2 = centerY + getYOffset(outerOffset, midAngle);
+
+  const labelIndicatorProps = {
+    x1,
+    y1,
+    x2,
+    y2,
+    index,
+  };
+  return defaults({}, labelIndicatorProps);
+};
+
+export const getBaseProps = (initialProps, fallbackProps) => {
+  const props = Helpers.modifyProps(initialProps, fallbackProps, "pie");
   const calculatedValues = getCalculatedValues(props);
   const {
     slices,
@@ -248,6 +308,7 @@ export const getBaseProps = (props, fallbackProps) => {
     cornerRadius,
     padAngle,
     disableInlineStyles,
+    labelIndicator,
   } = calculatedValues;
   const radius = props.radius || defaultRadius;
   const initialChildProps = {
@@ -288,6 +349,17 @@ export const getBaseProps = (props, fallbackProps) => {
         assign({}, props, dataProps),
         calculatedValues,
       );
+      if (labelIndicator) {
+        const labelProps = childProps[eventKey].labels;
+        if (labelProps.calculatedLabelRadius > radius) {
+          childProps[eventKey].labelIndicators =
+            getLabelIndicatorPropsForLineSegment(
+              assign({}, props, dataProps),
+              calculatedValues,
+              labelProps,
+            );
+        }
+      }
     }
     return childProps;
   }, initialChildProps);

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./victory-pie";
+export * from "./slice";

package/src/{slice.js → slice.tsx}

@@ -1,9 +1,51 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Helpers, CommonProps, Path } from "victory-core";
+import {
+  Helpers,
+  CommonProps,
+  Path,
+  NumberOrCallback,
+  SliceNumberOrCallback,
+  StringOrCallback,
+  VictoryCommonProps,
+  VictoryStyleInterface,
+} from "victory-core";
 import { defaults, isFunction, assign } from "lodash";
 import * as d3Shape from "victory-vendor/d3-shape";
 
+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;
+  role?: string;
+  shapeRendering?: string;
+}
+
 const getPath = (props) => {
   const { slice, radius, innerRadius, cornerRadius } = props;
   if (isFunction(props.pathFunction)) {
@@ -68,14 +110,14 @@ const evaluateProps = (props) => {
   });
 };
 
-const defaultProps = {
+const defaultProps: SliceProps = {
   pathComponent: <Path />,
   role: "presentation",
   shapeRendering: "auto",
 };
 
-const Slice = (props) => {
-  props = evaluateProps({ ...defaultProps, ...props });
+export const Slice = (initialProps: SliceProps) => {
+  const props = evaluateProps({ ...defaultProps, ...initialProps });
   const defaultTransform = props.origin
     ? `translate(${props.origin.x}, ${props.origin.y})`
     : undefined;
@@ -107,5 +149,3 @@ Slice.propTypes = {
   sliceEndAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
   sliceStartAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
 };
-
-export default Slice;