victory-pie 30.6.1 → 31.2.0

package/src/helper-methods.js

@@ -1,13 +1,9 @@
 /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 135, 180, 225, 315] }]*/
-import { assign, isFunction, isPlainObject } from "lodash";
+import { assign, defaults, isFunction, isPlainObject, isNil } from "lodash";
 import * as d3Shape from "d3-shape";
 
 import { Helpers, Data, Style } from "victory-core";
 
-const degreesToRadians = (degrees) => {
-  return degrees * (Math.PI / 180);
-};
-
 const checkForValidText = (text) => {
   if (text === undefined || text === null) {
     return text;
@@ -24,13 +20,15 @@ const getColor = (style, colors, index) => {
 };
 
 const getRadius = (props, padding) => {
-  if (props.radius) {
+  if (typeof props.radius === "number") {
     return props.radius;
   }
-  return Math.min(
-    props.width - padding.left - padding.right,
-    props.height - padding.top - padding.bottom
-  ) / 2;
+  return (
+    Math.min(
+      props.width - padding.left - padding.right,
+      props.height - padding.top - padding.bottom
+    ) / 2
+  );
 };
 
 const getOrigin = (props, padding) => {
@@ -43,12 +41,15 @@ const getOrigin = (props, padding) => {
 };
 
 const getSlices = (props, data) => {
-  const layoutFunction = d3Shape.pie()
+  const layoutFunction = d3Shape
+    .pie()
     .sort(null)
-    .startAngle(degreesToRadians(props.startAngle))
-    .endAngle(degreesToRadians(props.endAngle))
-    .padAngle(degreesToRadians(props.padAngle))
-    .value((datum) => { return datum._y; });
+    .startAngle(Helpers.degreesToRadians(props.startAngle))
+    .endAngle(Helpers.degreesToRadians(props.endAngle))
+    .padAngle(Helpers.degreesToRadians(props.padAngle))
+    .value((datum) => {
+      return datum._y;
+    });
   return layoutFunction(data);
 };
 
@@ -58,15 +59,11 @@ const getCalculatedValues = (props) => {
   const style = Helpers.getStyles(props.style, styleObject, "auto", "100%");
   const colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
   const padding = Helpers.getPadding(props);
-  const radius = getRadius(props, padding);
+  const defaultRadius = getRadius(props, padding);
   const origin = getOrigin(props, padding);
   const data = Data.getData(props);
   const slices = getSlices(props, data);
-  const pathFunction = d3Shape.arc()
-    .cornerRadius(props.cornerRadius)
-    .outerRadius(radius)
-    .innerRadius(props.innerRadius);
-  return { style, colors, padding, radius, data, slices, pathFunction, origin };
+  return { style, colors, padding, defaultRadius, data, slices, origin };
 };
 
 const getSliceStyle = (index, calculatedValues) => {
@@ -88,9 +85,10 @@ const getLabelText = (props, datum, index) => {
 };
 
 const getLabelArc = (radius, labelRadius, style) => {
-  const padding = style && style.padding || 0;
+  const padding = (style && style.padding) || 0;
   const arcRadius = labelRadius || radius + padding;
-  return d3Shape.arc()
+  return d3Shape
+    .arc()
     .outerRadius(arcRadius)
     .innerRadius(arcRadius);
 };
@@ -138,16 +136,22 @@ const getVerticalAnchor = (orientation) => {
 
 const getLabelProps = (props, dataProps, calculatedValues) => {
   const { index, datum, data, slice } = dataProps;
-  const { style, radius, origin } = calculatedValues;
+  const { style, defaultRadius, origin } = calculatedValues;
   const labelStyle = Helpers.evaluateStyle(
-    assign({ padding: 0 }, style.labels), datum, props.active
+    assign({ padding: 0 }, style.labels),
+    datum,
+    props.active
   );
   const labelRadius = Helpers.evaluateProp(props.labelRadius, datum);
-  const labelArc = getLabelArc(radius, labelRadius, labelStyle);
+  const labelArc = getLabelArc(defaultRadius, labelRadius, labelStyle);
   const position = getLabelPosition(labelArc, slice, props.labelPosition);
   const orientation = getLabelOrientation(slice);
   return {
-    index, datum, data, slice, orientation,
+    index,
+    datum,
+    data,
+    slice,
+    orientation,
     style: labelStyle,
     x: Math.round(position[0]) + origin.x,
     y: Math.round(position[1]) + origin.y,
@@ -161,24 +165,48 @@ const getLabelProps = (props, dataProps, calculatedValues) => {
 export const getBaseProps = (props, fallbackProps) => {
   props = Helpers.modifyProps(props, fallbackProps, "pie");
   const calculatedValues = getCalculatedValues(props);
-  const { slices, style, pathFunction, data, origin } = calculatedValues;
-  const { labels, events, sharedEvents, height, width, standalone, name } = props;
+  const { slices, style, data, origin, defaultRadius } = calculatedValues;
+  const {
+    labels,
+    events,
+    sharedEvents,
+    height,
+    width,
+    standalone,
+    name,
+    innerRadius,
+    cornerRadius,
+    padAngle
+  } = props;
+  const radius = props.radius || defaultRadius;
   const initialChildProps = {
-    parent: { standalone, height, width, slices, pathFunction, name, style: style.parent }
+    parent: { standalone, height, width, slices, name, style: style.parent }
   };
 
   return slices.reduce((childProps, slice, index) => {
-    const datum = data[index];
-    const eventKey = datum.eventKey || index;
+    const datum = defaults({}, data[index], {
+      startAngle: Helpers.radiansToDegrees(slice.startAngle),
+      endAngle: Helpers.radiansToDegrees(slice.endAngle),
+      padAngle: Helpers.radiansToDegrees(slice.padAngle)
+    });
+    const eventKey = !isNil(datum.eventKey) ? datum.eventKey : index;
     const dataProps = {
-      index, slice, pathFunction, datum, data, origin,
+      index,
+      slice,
+      datum,
+      data,
+      origin,
+      innerRadius,
+      radius,
+      cornerRadius,
+      padAngle,
       style: getSliceStyle(index, calculatedValues)
     };
     childProps[eventKey] = {
       data: dataProps
     };
     const text = getLabelText(props, datum, index);
-    if (text !== undefined && text !== null || (labels && (events || sharedEvents))) {
+    if ((text !== undefined && text !== null) || (labels && (events || sharedEvents))) {
       childProps[eventKey].labels = getLabelProps(props, dataProps, calculatedValues);
     }
     return childProps;

package/src/slice.js

@@ -1,32 +1,75 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Helpers, CommonProps, Path } from "victory-core";
-import { isFunction } from "lodash";
+import { defaults, isFunction } from "lodash";
+import * as d3Shape from "d3-shape";
 
 export default class Slice extends React.Component {
   static propTypes = {
     ...CommonProps.primitiveProps,
+    cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
     datum: PropTypes.object,
+    innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+    padAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
     pathComponent: PropTypes.element,
     pathFunction: PropTypes.func,
-    slice: PropTypes.object
+    radius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+    slice: PropTypes.object,
+    sliceEndAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+    sliceStartAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
   };
 
   static defaultProps = {
-    pathComponent: <Path/>
+    pathComponent: <Path />
   };
 
+  getPath(props) {
+    const { datum, active, slice } = props;
+    if (isFunction(props.pathFunction)) {
+      return props.pathFunction(slice);
+    }
+    const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active);
+    const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active);
+    const radius = Helpers.evaluateProp(props.radius, datum, active);
+    const padAngle = Helpers.degreesToRadians(Helpers.evaluateProp(props.padAngle, datum, active));
+    const startAngle = Helpers.degreesToRadians(
+      Helpers.evaluateProp(props.sliceStartAngle, datum, active)
+    );
+    const endAngle = Helpers.degreesToRadians(
+      Helpers.evaluateProp(props.sliceEndAngle, datum, active)
+    );
+    const pathFunction = d3Shape
+      .arc()
+      .cornerRadius(cornerRadius)
+      .outerRadius(radius)
+      .innerRadius(innerRadius);
+    return pathFunction(defaults({ startAngle, endAngle, padAngle }, slice));
+  }
+
   render() {
     const {
-      datum, slice, active, role, shapeRendering, className,
-      origin, events, pathComponent, pathFunction, style, clipPath
+      datum,
+      active,
+      role,
+      shapeRendering,
+      className,
+      origin,
+      events,
+      pathComponent,
+      style,
+      clipPath
     } = this.props;
     const defaultTransform = origin ? `translate(${origin.x}, ${origin.y})` : undefined;
     const transform = this.props.transform || defaultTransform;
     return React.cloneElement(pathComponent, {
-      className, role, shapeRendering, events, transform, clipPath,
+      className,
+      role,
+      shapeRendering,
+      events,
+      transform,
+      clipPath,
       style: Helpers.evaluateStyle(style, datum, active),
-      d: isFunction(pathFunction) ? pathFunction(slice) : undefined
+      d: this.getPath(this.props)
     });
   }
 }

package/src/victory-pie.js

@@ -2,7 +2,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  addEvents, Helpers, Data, PropTypes as CustomPropTypes, VictoryContainer, VictoryLabel,
+  addEvents,
+  Helpers,
+  Data,
+  PropTypes as CustomPropTypes,
+  VictoryContainer,
+  VictoryLabel,
   VictoryTheme
 } from "victory-core";
 import Slice from "./slice";
@@ -31,12 +36,21 @@ const fallbackProps = {
   labelPosition: "centroid"
 };
 
-const animationWhitelist = [
-  "data", "endAngle", "height", "innerRadius", "cornerRadius", "padAngle", "padding",
-  "colorScale", "startAngle", "style", "width"
-];
-
 class VictoryPie extends React.Component {
+  static animationWhitelist = [
+    "data",
+    "endAngle",
+    "height",
+    "innerRadius",
+    "cornerRadius",
+    "padAngle",
+    "padding",
+    "colorScale",
+    "startAngle",
+    "style",
+    "width"
+  ];
+
   static displayName = "VictoryPie";
 
   static role = "pie";
@@ -49,7 +63,10 @@ class VictoryPie extends React.Component {
     onEnter: {
       duration: 500,
       before: () => ({ _y: 0, label: " " }),
-      after: (datum) => ({ y_: datum._y, label: datum.label })
+      after: (datum) => ({
+        y_: datum._y,
+        label: datum.label
+      })
     }
   };
 
@@ -58,11 +75,18 @@ class VictoryPie extends React.Component {
     colorScale: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.string),
       PropTypes.oneOf([
-        "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"
+        "grayscale",
+        "qualitative",
+        "heatmap",
+        "warm",
+        "cool",
+        "red",
+        "green",
+        "blue"
       ])
     ]),
     containerComponent: PropTypes.element,
-    cornerRadius: CustomPropTypes.nonNegative,
+    cornerRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     data: PropTypes.array,
     dataComponent: PropTypes.element,
     endAngle: PropTypes.number,
@@ -71,53 +95,53 @@ class VictoryPie extends React.Component {
       CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
       PropTypes.string
     ]),
-    events: PropTypes.arrayOf(PropTypes.shape({
-      target: PropTypes.oneOf(["data", "labels", "parent"]),
-      eventKey: PropTypes.oneOfType([
-        PropTypes.func,
-        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-        PropTypes.string
-      ]),
-      eventHandlers: PropTypes.object
-    })),
-    externalEventMutations: PropTypes.arrayOf(PropTypes.shape({
-      callback: PropTypes.function,
-      childName: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array
-      ]),
-      eventKey: PropTypes.oneOfType([
-        PropTypes.array,
-        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-        PropTypes.string
-      ]),
-      mutation: PropTypes.function,
-      target: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array
-      ])
-    })),
+    events: PropTypes.arrayOf(
+      PropTypes.shape({
+        target: PropTypes.oneOf(["data", "labels", "parent"]),
+        eventKey: PropTypes.oneOfType([
+          PropTypes.func,
+          CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
+          PropTypes.string
+        ]),
+        eventHandlers: PropTypes.object
+      })
+    ),
+    externalEventMutations: PropTypes.arrayOf(
+      PropTypes.shape({
+        callback: PropTypes.function,
+        childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+        eventKey: PropTypes.oneOfType([
+          PropTypes.array,
+          CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
+          PropTypes.string
+        ]),
+        mutation: PropTypes.function,
+        target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+      })
+    ),
     groupComponent: PropTypes.element,
     height: CustomPropTypes.nonNegative,
-    innerRadius: CustomPropTypes.nonNegative,
+    innerRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     labelComponent: PropTypes.element,
     labelPosition: PropTypes.oneOf(["startAngle", "centroid", "endAngle"]),
-    labelRadius: PropTypes.oneOfType([ CustomPropTypes.nonNegative, PropTypes.func ]),
-    labels: PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]),
+    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: 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
+        top: PropTypes.number,
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+        right: PropTypes.number
       })
     ]),
-    radius: CustomPropTypes.nonNegative,
+    radius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     sharedEvents: PropTypes.shape({
       events: PropTypes.array,
       getEventState: PropTypes.func
@@ -132,7 +156,9 @@ class VictoryPie extends React.Component {
     standalone: PropTypes.bool,
     startAngle: PropTypes.number,
     style: PropTypes.shape({
-      parent: PropTypes.object, data: PropTypes.object, labels: PropTypes.object
+      parent: PropTypes.object,
+      data: PropTypes.object,
+      labels: PropTypes.object
     }),
     theme: PropTypes.object,
     width: CustomPropTypes.nonNegative,
@@ -159,10 +185,10 @@ class VictoryPie extends React.Component {
       { x: "E", y: 2 }
     ],
     standalone: true,
-    dataComponent: <Slice/>,
-    labelComponent: <VictoryLabel/>,
-    containerComponent: <VictoryContainer/>,
-    groupComponent: <g/>,
+    dataComponent: <Slice />,
+    labelComponent: <VictoryLabel />,
+    containerComponent: <VictoryContainer />,
+    groupComponent: <g />,
     sortOrder: "ascending",
     theme: VictoryTheme.grayscale
   };
@@ -170,7 +196,10 @@ class VictoryPie extends React.Component {
   static getBaseProps = (props) => getBaseProps(props, fallbackProps);
   static getData = Data.getData;
   static expectedComponents = [
-    "dataComponent", "labelComponent", "groupComponent", "containerComponent"
+    "dataComponent",
+    "labelComponent",
+    "groupComponent",
+    "containerComponent"
   ];
 
   // Overridden in victory-native
@@ -179,8 +208,9 @@ class VictoryPie extends React.Component {
   }
 
   render() {
-    const { role } = this.constructor;
+    const { animationWhitelist, role } = VictoryPie;
     const props = Helpers.modifyProps(this.props, fallbackProps, role);
+
     if (this.shouldAnimate()) {
       return this.animateComponent(props, animationWhitelist);
     }