victory-bar 31.0.0 → 31.2.0

package/README.md

@@ -1,4 +1,3 @@
-
 # VictoryBar
 
 `victory-bar@^30.0.0` exports `VictoryBar` and `Bar` components
@@ -99,7 +98,7 @@ containerComponent={<VictoryVoronoiContainer/>}
 
 `type: function || number || { top: number || function, bottom: number || function }`
 
-The `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaulated with the arguments `datum`, and `active`.
+The `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaluated with the arguments `datum`, and `active`.
 
 ```playground
 <VictoryChart
@@ -151,13 +150,12 @@ In addition to svg style properties and `label`, `VictoryBar` will also preferen
 
 See the [Custom Components Guide][] for more detail on creating your own `dataComponents`
 
-*default:* `<Bar/>`
+_default:_ `<Bar/>`
 
 ```jsx
 dataComponent={<Bar events={{ onClick: handleClick }}/>}
 ```
 
-
 ### domain
 
 `type: array[low, high] || { x: [low, high], y: [low, high] }`
@@ -185,7 +183,7 @@ domainPadding={{x: [10, -10], y: 5}}
 `VictoryBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey)
 
 ```jsx
-eventKey="x"
+eventKey = "x";
 ```
 
 ### events
@@ -236,7 +234,7 @@ See the [Events Guide][] for more information on defining events.
 
 `VictoryBar` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent)
 
-*default:* `<g/>`
+_default:_ `<g/>`
 
 ```jsx
 groupComponent={<g transform="translate(10, 10)" />}
@@ -248,7 +246,7 @@ groupComponent={<g transform="translate(10, 10)" />}
 
 `VictoryBar` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height)
 
-*default (provided by default theme):* `height={300}`
+_default (provided by default theme):_ `height={300}`
 
 ```jsx
 height={400}
@@ -260,7 +258,7 @@ height={400}
 
 The horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.
 
-*default:* horizontal={false}
+_default:_ horizontal={false}
 
 ```playground
 <VictoryChart
@@ -282,7 +280,7 @@ The horizontal prop determines whether the bars will be laid vertically or horiz
 
 `VictoryBar` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent)
 
-*default:* `<VictoryLabel/>`
+_default:_ `<VictoryLabel/>`
 
 ```playground
 <VictoryBar
@@ -312,7 +310,6 @@ The horizontal prop determines whether the bars will be laid vertically or horiz
 
 `VictoryBar` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain)
 
-
 ```playground
 <VictoryChart maxDomain={{ x: 3 }}>
   <VictoryBar data={sampleData}/>
@@ -325,7 +322,6 @@ The horizontal prop determines whether the bars will be laid vertically or horiz
 
 `VictoryBar` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain)
 
-
 ```playground
 <VictoryChart minDomain={{ x: 2 }}>
   <VictoryBar data={sampleData}/>
@@ -339,7 +335,7 @@ The horizontal prop determines whether the bars will be laid vertically or horiz
 The `name` prop is used to reference a component instance when defining shared events.
 
 ```jsx
-name="series-1"
+name = "series-1";
 ```
 
 ### origin
@@ -356,7 +352,7 @@ name="series-1"
 
 `VictoryBar` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding)
 
-*default (provided by default theme):* `padding={50}`
+_default (provided by default theme):_ `padding={50}`
 
 ```jsx
 padding={{ top: 20, bottom: 60 }}
@@ -400,7 +396,7 @@ padding={{ top: 20, bottom: 60 }}
 
 `VictoryBar` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples)
 
-*default:* `samples={50}`
+_default:_ `samples={50}`
 
 ```jsx
 samples={100}
@@ -413,7 +409,7 @@ samples={100}
 `VictoryBar` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale)
 Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options.
 
-*default:* `scale="linear"`
+_default:_ `scale="linear"`
 
 ```jsx
 scale={{x: "linear", y: "log"}}
@@ -433,13 +429,12 @@ scale={{x: "linear", y: "log"}}
 
 `type: string || integer || array[string] || function`
 
-
 `VictoryBar` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey)
 
 See the [Data Accessors Guide][] for more detail on formatting and processing data.
 
 ```jsx
-sortKey="x"
+sortKey = "x";
 ```
 
 ### sortOrder
@@ -448,7 +443,7 @@ sortKey="x"
 
 The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.
 
-*default:* `sortOrder="ascending"`
+_default:_ `sortOrder="ascending"`
 
 ### standalone
 
@@ -458,7 +453,7 @@ The `sortOrder` prop specifies whether sorted data should be returned in ascendi
 
 **note:** When `VictoryBar` is nested within a component like `VictoryChart`, this prop will be set to `false`
 
-*default:* `standalone={true}`
+_default:_ `standalone={true}`
 
 ```playground
 <svg width={300} height={300}>
@@ -477,7 +472,7 @@ The `sortOrder` prop specifies whether sorted data should be returned in ascendi
 
 `VictoryBar` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style)
 
-*default (provided by default theme):* See [grayscale theme][] for more detail
+_default (provided by default theme):_ See [grayscale theme][] for more detail
 
 ```playground
   <VictoryBar
@@ -506,7 +501,7 @@ The `sortOrder` prop specifies whether sorted data should be returned in ascendi
 
 See the [Themes Guide][] for information about creating custom themes.
 
-*default:* `theme={VictoryTheme.grayscale}`
+_default:_ `theme={VictoryTheme.grayscale}`
 
 ```jsx
 theme={VictoryTheme.material}
@@ -518,7 +513,7 @@ theme={VictoryTheme.material}
 
 `VictoryBar` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width)
 
-*default (provided by default theme):* `width={450}`
+_default (provided by default theme):_ `width={450}`
 
 ```jsx
 width={400}
@@ -528,13 +523,12 @@ width={400}
 
 `type: string || integer || array[string] || function`
 
-
 `VictoryBar` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x)
 
 See the [Data Accessors Guide][] for more detail on formatting and processing data.
 
 ```jsx
-x="employee.name"
+x = "employee.name";
 ```
 
 ### y
@@ -566,10 +560,10 @@ See the [Data Accessors Guide][] for more detail on formatting and processing da
 </VictoryChart>
 ```
 
-[Animations Guide]: https://formidable.com/open-source/victory/guides/animations
-[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors
-[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components
-[Events Guide]: https://formidable.com/open-source/victory/guides/events
-[Themes Guide]: https://formidable.com/open-source/victory/guides/themes
-[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart
+[animations guide]: https://formidable.com/open-source/victory/guides/animations
+[data accessors guide]: https://formidable.com/open-source/victory/guides/data-accessors
+[custom components guide]: https://formidable.com/open-source/victory/guides/custom-components
+[events guide]: https://formidable.com/open-source/victory/guides/events
+[themes guide]: https://formidable.com/open-source/victory/guides/themes
+[`victorychart`]: https://formidable.com/open-source/victory/docs/victory-chart
 [grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js

package/es/bar.js

@@ -97,7 +97,7 @@ function (_React$Component) {
       updateCornerRadius("topLeft", "top");
       updateCornerRadius("topRight", "top");
       updateCornerRadius("bottomLeft", "bottom");
-      updateCornerRadius("bottomRight", "right");
+      updateCornerRadius("bottomRight", "bottom");
       return realCornerRadius;
     }
   }, {

package/es/helper-methods.js

@@ -1,3 +1,4 @@
+import _isNil from "lodash/isNil";
 import _assign from "lodash/assign";
 import { Helpers, LabelHelpers, Data, Domain, Scale } from "victory-core";
 
@@ -90,7 +91,7 @@ var getBaseProps = function (props, fallbackProps) {
     }
   };
   return data.reduce(function (childProps, datum, index) {
-    var eventKey = datum.eventKey || index;
+    var eventKey = !_isNil(datum.eventKey) ? datum.eventKey : index;
 
     var _getBarPosition = getBarPosition(props, datum),
         x = _getBarPosition.x,

package/es/victory-bar.js

@@ -37,7 +37,6 @@ var defaultData = [{
   x: 4,
   y: 4
 }];
-var animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
 
 var VictoryBar =
 /*#__PURE__*/
@@ -59,7 +58,8 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var role = this.constructor.role;
+      var animationWhitelist = VictoryBar.animationWhitelist,
+          role = VictoryBar.role;
       var props = Helpers.modifyProps(this.props, fallbackProps, role);
 
       if (this.shouldAnimate()) {
@@ -74,6 +74,12 @@ function (_React$Component) {
   return VictoryBar;
 }(React.Component);
 
+Object.defineProperty(VictoryBar, "animationWhitelist", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: ["data", "domain", "height", "padding", "style", "width"]
+});
 Object.defineProperty(VictoryBar, "displayName", {
   configurable: true,
   enumerable: true,

package/lib/bar.js

@@ -112,7 +112,7 @@ function (_React$Component) {
       updateCornerRadius("topLeft", "top");
       updateCornerRadius("topRight", "top");
       updateCornerRadius("bottomLeft", "bottom");
-      updateCornerRadius("bottomRight", "right");
+      updateCornerRadius("bottomRight", "bottom");
       return realCornerRadius;
     }
   }, {

package/lib/helper-methods.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getBaseProps = void 0;
 
+var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
+
 var _assign2 = _interopRequireDefault(require("lodash/assign"));
 
 var _victoryCore = require("victory-core");
@@ -107,7 +109,7 @@ var getBaseProps = function (props, fallbackProps) {
     }
   };
   return data.reduce(function (childProps, datum, index) {
-    var eventKey = datum.eventKey || index;
+    var eventKey = !(0, _isNil2.default)(datum.eventKey) ? datum.eventKey : index;
 
     var _getBarPosition = getBarPosition(props, datum),
         x = _getBarPosition.x,

package/lib/victory-bar.js

@@ -51,7 +51,6 @@ var defaultData = [{
   x: 4,
   y: 4
 }];
-var animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
 
 var VictoryBar =
 /*#__PURE__*/
@@ -73,7 +72,8 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var role = this.constructor.role;
+      var animationWhitelist = VictoryBar.animationWhitelist,
+          role = VictoryBar.role;
 
       var props = _victoryCore.Helpers.modifyProps(this.props, fallbackProps, role);
 
@@ -89,6 +89,12 @@ function (_React$Component) {
   return VictoryBar;
 }(_react.default.Component);
 
+Object.defineProperty(VictoryBar, "animationWhitelist", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: ["data", "domain", "height", "padding", "style", "width"]
+});
 Object.defineProperty(VictoryBar, "displayName", {
   configurable: true,
   enumerable: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-bar",
-  "version": "31.0.0",
+  "version": "31.2.0",
   "description": "Bar Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,7 +22,7 @@
     "d3-shape": "^1.2.0",
     "lodash": "^4.17.5",
     "prop-types": "^15.5.8",
-    "victory-core": "^31.0.0"
+    "victory-core": "^31.2.0"
   },
   "scripts": {
     "temp-version": "webpack --bail --config ../../config/webpack/webpack.config.js --colors"

package/src/bar.js

@@ -11,15 +11,11 @@ import {
 } from "./path-helper-methods";
 
 export default class Bar extends React.Component {
-
   static propTypes = {
     ...CommonProps.primitiveProps,
     alignment: PropTypes.oneOf(["start", "middle", "end"]),
     barRatio: PropTypes.number,
-    barWidth: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.func
-    ]),
+    barWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
     cornerRadius: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.func,
@@ -43,7 +39,7 @@ export default class Bar extends React.Component {
   };
 
   static defaultProps = {
-    pathComponent: <Path/>,
+    pathComponent: <Path />,
     defaultBarWidth: 8
   };
 
@@ -51,9 +47,9 @@ export default class Bar extends React.Component {
     if (props.getPath) {
       return getCustomBarPath(props, width);
     }
-    return props.horizontal ?
-      getHorizontalBarPath(props, width, cornerRadius) :
-      getVerticalBarPath(props, width, cornerRadius);
+    return props.horizontal
+      ? getHorizontalBarPath(props, width, cornerRadius)
+      : getVerticalBarPath(props, width, cornerRadius);
   }
 
   getPolarBarPath(props, cornerRadius) {
@@ -89,7 +85,7 @@ export default class Bar extends React.Component {
     updateCornerRadius("topLeft", "top");
     updateCornerRadius("topRight", "top");
     updateCornerRadius("bottomLeft", "bottom");
-    updateCornerRadius("bottomRight", "right");
+    updateCornerRadius("bottomRight", "bottom");
     return realCornerRadius;
   }
 
@@ -109,20 +105,36 @@ export default class Bar extends React.Component {
 
   render() {
     const {
-      role, datum, active, shapeRendering, className, origin, polar, pathComponent, events, clipPath
+      role,
+      datum,
+      active,
+      shapeRendering,
+      className,
+      origin,
+      polar,
+      pathComponent,
+      events,
+      clipPath
     } = this.props;
-    const stroke = this.props.style && this.props.style.fill || "black";
+    const stroke = (this.props.style && this.props.style.fill) || "black";
     const baseStyle = { fill: "black", stroke };
     const style = Helpers.evaluateStyle(assign(baseStyle, this.props.style), datum, active);
     const width = this.getBarWidth(this.props, style);
     const cornerRadius = this.getCornerRadius(this.props);
-    const path = polar ?
-      this.getPolarBarPath(this.props, cornerRadius) :
-      this.getBarPath(this.props, width, cornerRadius);
+    const path = polar
+      ? this.getPolarBarPath(this.props, cornerRadius)
+      : this.getBarPath(this.props, width, cornerRadius);
     const defaultTransform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
     const transform = this.props.transform || defaultTransform;
     return React.cloneElement(pathComponent, {
-      d: path, transform, className, style, role, shapeRendering, events, clipPath
+      d: path,
+      transform,
+      className,
+      style,
+      role,
+      shapeRendering,
+      events,
+      clipPath
     });
   }
 }

package/src/geometry-helper-methods.js

@@ -4,7 +4,7 @@
  * @param {number} y - y coordinate
  * @returns {object} - point object
  */
-const point = function (x, y) {
+const point = function(x, y) {
   return {
     x,
     y,
@@ -42,7 +42,7 @@ const point = function (x, y) {
  * @param {number} radius - radius of circle
  * @returns {object} - point object
  */
-const circle = function (center, radius) {
+const circle = function(center, radius) {
   return {
     center,
     radius,
@@ -72,7 +72,8 @@ const circle = function (center, radius) {
     // "Intersection of two circles" by Paul Bourke
     // Left-most point is returned as 0th element of array
     // Right-most point is returned as 1st elemennt of array
-    intersection(circle1) { // eslint-disable-line max-statements
+    intersection(circle1) {
+      // eslint-disable-line max-statements
       const P0 = this.center;
       const P1 = circle1.center;
       const r0 = this.radius;
@@ -83,24 +84,28 @@ const circle = function (center, radius) {
       }
       const a = (Math.pow(r0, 2) - Math.pow(r1, 2) + Math.pow(d, 2)) / (2 * d);
       const h = Math.sqrt(Math.pow(r0, 2) - Math.pow(a, 2));
-      const P2 = P0.add(P1.subtract(P0).scalarMult(a).scalarDivide(d));
+      const P2 = P0.add(
+        P1.subtract(P0)
+          .scalarMult(a)
+          .scalarDivide(d)
+      );
       const { x: x0, y: y0 } = P0;
       const { x: x1, y: y1 } = P1;
       const { x: x2, y: y2 } = P2;
       const P3s = [
-        point(x2 - h * (y1 - y0) / d, y2 + h * (x1 - x0) / d),
-        point(x2 + h * (y1 - y0) / d, y2 - h * (x1 - x0) / d)
+        point(x2 - (h * (y1 - y0)) / d, y2 + (h * (x1 - x0)) / d),
+        point(x2 + (h * (y1 - y0)) / d, y2 - (h * (x1 - x0)) / d)
       ];
       P3s.sort((Point1, Point2) => Point1.x - Point2.x);
       return P3s;
     },
     solveX(y) {
       const sqrt = Math.sqrt(Math.pow(this.radius, 2) - Math.pow(y - this.center.y, 2));
-      return [ this.center.x - sqrt, this.center.x + sqrt ];
+      return [this.center.x - sqrt, this.center.x + sqrt];
     },
     solveY(x) {
       const sqrt = Math.sqrt(Math.pow(this.radius, 2) - Math.pow(x - this.center.x, 2));
-      return [ this.center.y - sqrt, this.center.y + sqrt ];
+      return [this.center.y - sqrt, this.center.y + sqrt];
     }
   };
 };

package/src/helper-methods.js

@@ -1,10 +1,9 @@
-import { assign } from "lodash";
+import { assign, isNil } from "lodash";
 import { Helpers, LabelHelpers, Data, Domain, Scale } from "victory-core";
 
 const getBarPosition = (props, datum) => {
   const getDefaultMin = (axis) => {
-    const defaultMin = Scale.getType(props.scale[axis]) === "log" ?
-      1 / Number.MAX_SAFE_INTEGER : 0;
+    const defaultMin = Scale.getType(props.scale[axis]) === "log" ? 1 / Number.MAX_SAFE_INTEGER : 0;
     return datum[`_${axis}`] instanceof Date ? new Date(defaultMin) : defaultMin;
   };
   const _y0 = datum._y0 !== undefined ? datum._y0 : getDefaultMin("y");
@@ -25,8 +24,12 @@ const getCalculatedValues = (props) => {
     x: Domain.getDomainWithZero(props, "x"),
     y: Domain.getDomainWithZero(props, "y")
   };
-  const xScale = Scale.getBaseScale(props, "x").domain(domain.x).range(range.x);
-  const yScale = Scale.getBaseScale(props, "y").domain(domain.y).range(range.y);
+  const xScale = Scale.getBaseScale(props, "x")
+    .domain(domain.x)
+    .range(range.x);
+  const yScale = Scale.getBaseScale(props, "y")
+    .domain(domain.y)
+    .range(range.y);
   const scale = {
     x: horizontal ? yScale : xScale,
     y: horizontal ? xScale : yScale
@@ -39,20 +42,68 @@ const getBaseProps = (props, fallbackProps) => {
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, "bar");
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
   const {
-    alignment, barRatio, cornerRadius, data, domain, events, height, horizontal, origin, padding,
-    polar, scale, sharedEvents, standalone, style, theme, width, labels, name, barWidth, getPath
+    alignment,
+    barRatio,
+    cornerRadius,
+    data,
+    domain,
+    events,
+    height,
+    horizontal,
+    origin,
+    padding,
+    polar,
+    scale,
+    sharedEvents,
+    standalone,
+    style,
+    theme,
+    width,
+    labels,
+    name,
+    barWidth,
+    getPath
   } = props;
-  const initialChildProps = { parent: {
-    domain, scale, width, height, data, standalone, name,
-    theme, polar, origin, padding, style: style.parent
-  } };
+  const initialChildProps = {
+    parent: {
+      domain,
+      scale,
+      width,
+      height,
+      data,
+      standalone,
+      name,
+      theme,
+      polar,
+      origin,
+      padding,
+      style: style.parent
+    }
+  };
 
   return data.reduce((childProps, datum, index) => {
-    const eventKey = datum.eventKey || index;
+    const eventKey = !isNil(datum.eventKey) ? datum.eventKey : index;
     const { x, y, y0, x0 } = getBarPosition(props, datum);
     const dataProps = {
-      alignment, barRatio, cornerRadius, data, datum, horizontal, index, polar, origin,
-      scale, style: style.data, width, height, x, y, y0, x0, barWidth, getPath
+      alignment,
+      barRatio,
+      cornerRadius,
+      data,
+      datum,
+      horizontal,
+      index,
+      polar,
+      origin,
+      scale,
+      style: style.data,
+      width,
+      height,
+      x,
+      y,
+      y0,
+      x0,
+      barWidth,
+      getPath
     };
 
     childProps[eventKey] = {
@@ -60,7 +111,7 @@ const getBaseProps = (props, fallbackProps) => {
     };
 
     const text = LabelHelpers.getText(props, datum, index);
-    if (text !== undefined && text !== null || (labels && (events || sharedEvents))) {
+    if ((text !== undefined && text !== null) || (labels && (events || sharedEvents))) {
       childProps[eventKey].labels = LabelHelpers.getProps(props, index);
     }
     return childProps;

package/src/path-helper-methods.js

@@ -9,8 +9,8 @@ const getPosition = (props, width) => {
   const size = alignment === "middle" ? width / 2 : width;
   const sign = horizontal ? -1 : 1;
   return {
-    x0: alignment === "start" ? x : x - (sign * size),
-    x1: alignment === "end" ? x : x + (sign * size),
+    x0: alignment === "start" ? x : x - sign * size,
+    x1: alignment === "end" ? x : x + sign * size,
     y0,
     y1: y
   };
@@ -31,7 +31,7 @@ const getAngularWidth = (props, width) => {
 };
 
 const transformAngle = (angle) => {
-  return -1 * angle + (Math.PI / 2);
+  return -1 * angle + Math.PI / 2;
 };
 
 export const getCustomBarPath = (props, width) => {
@@ -44,10 +44,9 @@ const getStartAngle = (props, index) => {
   const { data, scale, alignment } = props;
   const currentAngle = getAngle(props, index);
   const angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]);
-  const previousAngle = index === 0 ?
-    getAngle(props, data.length - 1) - (Math.PI * 2) :
-    getAngle(props, index - 1);
-  if (index === 0 && angularRange < (2 * Math.PI)) {
+  const previousAngle =
+    index === 0 ? getAngle(props, data.length - 1) - Math.PI * 2 : getAngle(props, index - 1);
+  if (index === 0 && angularRange < 2 * Math.PI) {
     return scale.x.range()[0];
   } else if (alignment === "start" || alignment === "end") {
     return alignment === "start" ? previousAngle : currentAngle;
@@ -60,11 +59,11 @@ const getEndAngle = (props, index) => {
   const { data, scale, alignment } = props;
   const currentAngle = getAngle(props, index);
   const angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]);
-  const lastAngle = scale.x.range()[1] === (2 * Math.PI) ?
-    getAngle(props, 0) + (Math.PI * 2) : scale.x.range()[1];
-  const nextAngle = index === data.length - 1 ?
-    getAngle(props, 0) + (Math.PI * 2) : getAngle(props, index + 1);
-  if (index === data.length - 1 && angularRange < (2 * Math.PI)) {
+  const lastAngle =
+    scale.x.range()[1] === 2 * Math.PI ? getAngle(props, 0) + Math.PI * 2 : scale.x.range()[1];
+  const nextAngle =
+    index === data.length - 1 ? getAngle(props, 0) + Math.PI * 2 : getAngle(props, index + 1);
+  if (index === data.length - 1 && angularRange < 2 * Math.PI) {
     return lastAngle;
   } else if (alignment === "start" || alignment === "end") {
     return alignment === "start" ? currentAngle : nextAngle;
@@ -80,8 +79,14 @@ const mapPointsToPath = (coords, cornerRadius, direction) => {
   const bottomRightPath = `${cornerRadius.bottomRight} ${cornerRadius.bottomRight} ${direction}`;
 
   const commands = [
-    "M", `A ${bottomLeftPath},`, "L", `A ${topLeftPath},`,
-    "L", `A ${topRightPath},`, "L", `A ${bottomRightPath},`
+    "M",
+    `A ${bottomLeftPath},`,
+    "L",
+    `A ${topLeftPath},`,
+    "L",
+    `A ${topRightPath},`,
+    "L",
+    `A ${bottomRightPath},`
   ];
   const path = commands.reduce((acc, command, i) => {
     acc += `${command} ${coords[i].x}, ${coords[i].y} \n`;
@@ -91,7 +96,6 @@ const mapPointsToPath = (coords, cornerRadius, direction) => {
 };
 
 const getVerticalBarPoints = (position, sign, cr) => {
-
   const { x0, x1, y0, y1 } = position;
 
   // eslint-disable-next-line max-statements, max-len
@@ -103,9 +107,10 @@ const getVerticalBarPoints = (position, sign, cr) => {
     let bottomMiddlePoint = { x, y: y0 - sign * cr[`bottom${side}`] };
     let topMiddlePoint = { x, y: y1 + sign * cr[`top${side}`] };
     let topPoint = { x: x + signL * cr[`top${side}`], y: y1 };
-    const hasIntersection = sign === 1 ?
-      y0 - cr[`bottom${side}`] < y1 + cr[`top${side}`] :
-      y0 + cr[`bottom${side}`] > y1 - cr[`top${side}`];
+    const hasIntersection =
+      sign === 1
+        ? y0 - cr[`bottom${side}`] < y1 + cr[`top${side}`]
+        : y0 + cr[`bottom${side}`] > y1 - cr[`top${side}`];
 
     if (hasIntersection) {
       const topCenter = point(x + signL * cr[`top${side}`], y1 + sign * cr[`top${side}`]);
@@ -133,7 +138,7 @@ const getVerticalBarPoints = (position, sign, cr) => {
         }
       }
     }
-    const points = [ bottomPoint, bottomMiddlePoint, topMiddlePoint, topPoint ];
+    const points = [bottomPoint, bottomMiddlePoint, topMiddlePoint, topPoint];
     return isLeft ? points : points.reverse();
   };
 
@@ -142,18 +147,15 @@ const getVerticalBarPoints = (position, sign, cr) => {
 
 // eslint-disable-next-line max-statements, max-len
 export const getVerticalBarPath = (props, width, cornerRadius) => {
-
   const position = getPosition(props, width);
   const sign = position.y0 > position.y1 ? 1 : -1;
   const direction = sign > 0 ? "0 0 1" : "0 0 0";
   const points = getVerticalBarPoints(position, sign, cornerRadius);
 
   return mapPointsToPath(points, cornerRadius, direction);
-
 };
 
 const getHorizontalBarPoints = (position, sign, cr) => {
-
   const { x0, x1, y0, y1 } = position;
 
   // eslint-disable-next-line max-statements, max-len
@@ -165,9 +167,10 @@ const getHorizontalBarPoints = (position, sign, cr) => {
     let bottomMiddlePoint = { y: x, x: y0 + sign * cr[`bottom${side}`] };
     let topMiddlePoint = { y: x, x: y1 - sign * cr[`top${side}`] };
     let topPoint = { y: x + signL * cr[`top${side}`], x: y1 };
-    const hasIntersection = sign === 1 ?
-      y0 + cr[`bottom${side}`] > y1 - cr[`top${side}`] :
-      y0 - cr[`bottom${side}`] < y1 + cr[`top${side}`];
+    const hasIntersection =
+      sign === 1
+        ? y0 + cr[`bottom${side}`] > y1 - cr[`top${side}`]
+        : y0 - cr[`bottom${side}`] < y1 + cr[`top${side}`];
     if (hasIntersection) {
       const topCenter = point(y1 - sign * cr[`top${side}`], x + signL * cr[`top${side}`]);
       const topCircle = circle(topCenter, cr[`top${side}`]);
@@ -194,7 +197,7 @@ const getHorizontalBarPoints = (position, sign, cr) => {
         }
       }
     }
-    const points = [ bottomPoint, bottomMiddlePoint, topMiddlePoint, topPoint ];
+    const points = [bottomPoint, bottomMiddlePoint, topMiddlePoint, topPoint];
     return isLeft ? points : points.reverse();
   };
 
@@ -203,14 +206,12 @@ const getHorizontalBarPoints = (position, sign, cr) => {
 
 // eslint-disable-next-line max-statements, max-len
 export const getHorizontalBarPath = (props, width, cornerRadius) => {
-
   const position = getPosition(props, width);
   const sign = position.y1 > position.y0 ? 1 : -1;
   const direction = sign > 0 ? "0 0 1" : "0 0 0";
   const points = getHorizontalBarPoints(position, sign, cornerRadius);
 
   return mapPointsToPath(points, cornerRadius, direction);
-
 };
 
 // eslint-disable-next-line max-statements, max-len
@@ -233,12 +234,13 @@ export const getVerticalPolarBarPath = (props, cornerRadius) => {
   }
 
   const getPath = (edge) => {
-    const pathFunction = d3Shape.arc()
-    .innerRadius(r1)
-    .outerRadius(r2)
-    .startAngle(transformAngle(start))
-    .endAngle(transformAngle(end))
-    .cornerRadius(cornerRadius[edge]);
+    const pathFunction = d3Shape
+      .arc()
+      .innerRadius(r1)
+      .outerRadius(r2)
+      .startAngle(transformAngle(start))
+      .endAngle(transformAngle(end))
+      .cornerRadius(cornerRadius[edge]);
     return pathFunction();
   };
 
@@ -254,13 +256,13 @@ export const getVerticalPolarBarPath = (props, cornerRadius) => {
     return { rightMoves, rightCoords, rightMiddle, leftMoves, leftCoords, leftMiddle };
   };
 
-   // eslint-disable-next-line max-statements
+  // eslint-disable-next-line max-statements
   const getTopPath = () => {
     const { topRight, topLeft } = cornerRadius;
     const arcLength = r2 * Math.abs(end - start);
-    const {
-      rightMoves, rightCoords, rightMiddle, leftMoves, leftCoords, leftMiddle
-    } = getPathData("top");
+    const { rightMoves, rightCoords, rightMiddle, leftMoves, leftCoords, leftMiddle } = getPathData(
+      "top"
+    );
     let moves;
     let coords;
     if (topRight === topLeft || arcLength < 2 * topRight + 2 * topLeft) {
@@ -292,9 +294,9 @@ export const getVerticalPolarBarPath = (props, cornerRadius) => {
   const getBottomPath = () => {
     const { bottomRight, bottomLeft } = cornerRadius;
     const arcLength = r1 * Math.abs(end - start);
-    const {
-      rightMoves, rightCoords, rightMiddle, leftMoves, leftCoords, leftMiddle
-    } = getPathData("bottom");
+    const { rightMoves, rightCoords, rightMiddle, leftMoves, leftCoords, leftMiddle } = getPathData(
+      "bottom"
+    );
     let moves;
     let coords;
     if (bottomRight === bottomLeft || arcLength < 2 * bottomRight + 2 * bottomLeft) {
@@ -303,8 +305,10 @@ export const getVerticalPolarBarPath = (props, cornerRadius) => {
     } else {
       // eslint-disable-next-line no-magic-numbers
       const isShort = (m, middle) => m.length - middle < 4;
-      const shortPath = bottomRight > bottomLeft ?
-        isShort(rightMoves, rightMiddle) : isShort(leftMoves, leftMiddle);
+      const shortPath =
+        bottomRight > bottomLeft
+          ? isShort(rightMoves, rightMiddle)
+          : isShort(leftMoves, leftMiddle);
       // eslint-disable-next-line no-magic-numbers
       const rightOffset = shortPath ? -1 : -3;
 
@@ -319,7 +323,7 @@ export const getVerticalPolarBarPath = (props, cornerRadius) => {
 
   const topPath = getTopPath();
   const bottomPath = getBottomPath();
-  const moves = [ ...topPath, ...bottomPath];
+  const moves = [...topPath, ...bottomPath];
   const path = moves.reduce((memo, move) => {
     memo += `${move.command} ${move.coords.join()}`;
     return memo;

package/src/victory-bar.js

@@ -3,7 +3,14 @@ import React from "react";
 import { getBaseProps } from "./helper-methods";
 import Bar from "./bar";
 import {
-  Helpers, VictoryLabel, VictoryContainer, VictoryTheme, CommonProps, addEvents, Data, Domain
+  Helpers,
+  VictoryLabel,
+  VictoryContainer,
+  VictoryTheme,
+  CommonProps,
+  addEvents,
+  Data,
+  Domain
 } from "victory-core";
 
 const fallbackProps = {
@@ -12,16 +19,11 @@ const fallbackProps = {
   padding: 50
 };
 
-const defaultData = [
-  { x: 1, y: 1 },
-  { x: 2, y: 2 },
-  { x: 3, y: 3 },
-  { x: 4, y: 4 }
-];
-
-const animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
+const defaultData = [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }, { x: 4, y: 4 }];
 
 class VictoryBar extends React.Component {
+  static animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
+
   static displayName = "VictoryBar";
 
   static role = "bar";
@@ -48,10 +50,7 @@ class VictoryBar extends React.Component {
     ...CommonProps.dataProps,
     alignment: PropTypes.oneOf(["start", "middle", "end"]),
     barRatio: PropTypes.number,
-    barWidth: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.func
-    ]),
+    barWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
     cornerRadius: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.func,
@@ -69,11 +68,11 @@ class VictoryBar extends React.Component {
   };
 
   static defaultProps = {
-    containerComponent: <VictoryContainer/>,
+    containerComponent: <VictoryContainer />,
     data: defaultData,
-    dataComponent: <Bar/>,
-    groupComponent: <g role="presentation"/>,
-    labelComponent: <VictoryLabel/>,
+    dataComponent: <Bar />,
+    groupComponent: <g role="presentation" />,
+    labelComponent: <VictoryLabel />,
     samples: 50,
     scale: "linear",
     sortOrder: "ascending",
@@ -85,7 +84,10 @@ class VictoryBar extends React.Component {
   static getData = Data.getData;
   static getBaseProps = (props) => getBaseProps(props, fallbackProps);
   static expectedComponents = [
-    "dataComponent", "labelComponent", "groupComponent", "containerComponent"
+    "dataComponent",
+    "labelComponent",
+    "groupComponent",
+    "containerComponent"
   ];
 
   // Overridden in native versions
@@ -94,11 +96,13 @@ class VictoryBar extends React.Component {
   }
 
   render() {
-    const { role } = this.constructor;
-    const props = Helpers.modifyProps((this.props), fallbackProps, role);
+    const { animationWhitelist, role } = VictoryBar;
+    const props = Helpers.modifyProps(this.props, fallbackProps, role);
+
     if (this.shouldAnimate()) {
       return this.animateComponent(props, animationWhitelist);
     }
+
     const children = this.renderData(props);
     return props.standalone ? this.renderContainer(props.containerComponent, children) : children;
   }