victory-chart 18.2.0 → 19.1.1

package/src/components/containers/zoom-helpers.js

@@ -1,3 +1,4 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 1000] }]*/
 import { Selection, Collection } from "victory-core";
 import { throttle, isFunction, defaults } from "lodash";
 import { attachId } from "../../helpers/event-handlers.js";
@@ -45,7 +46,7 @@ const Helpers = {
   },
 
   getMinimumDomain(point, props, axis) {
-    const {minimumZoom } = props;
+    const { minimumZoom } = props;
     const originalDomain = this.getDomain(props)[axis];
     const [from, to] = originalDomain;
     const defaultMin = Math.abs(from - to) / 1000;
@@ -60,6 +61,7 @@ const Helpers = {
 
   getScaleFactor(evt) {
     const sign = evt.deltaY > 0 ? 1 : -1;
+   // eslint-disable-next-line no-magic-numbers
     const delta = Math.min(Math.abs(evt.deltaY / 300), 0.5); // TODO: Check scale factor
     return Math.abs(1 + sign * delta);
   },
@@ -72,7 +74,7 @@ const Helpers = {
   },
 
   getPosition(evt, props, originalDomain) {
-    const {x, y} = Selection.getSVGEventCoordinates(evt);
+    const { x, y } = Selection.getSVGEventCoordinates(evt);
     const originalScale = {
       x: props.scale.x.domain(originalDomain.x),
       y: props.scale.y.domain(originalDomain.y)
@@ -123,22 +125,23 @@ const Helpers = {
       return isFunction(getTimer().resumeAnimation) ?
         () => getTimer().resumeAnimation() : undefined;
     }
+    return undefined;
   },
 
   getDomain(props) {
-    const {originalDomain, domain, scale} = props;
+    const { originalDomain, domain, scale } = props;
     const scaleDomain = { x: scale.x.domain(), y: scale.y.domain() };
     return defaults({}, originalDomain, domain, scaleDomain);
   },
 
   onMouseDown(evt, targetProps) {
     evt.preventDefault();
-    const {domain, zoomDomain} = targetProps;
+    const { domain, zoomDomain } = targetProps;
     const originalDomain = this.getDomain(targetProps);
     const currentDomain = defaults(
       {}, targetProps.currentDomain || zoomDomain || originalDomain, domain
     );
-    const {x, y} = Selection.getSVGEventCoordinates(evt);
+    const { x, y } = Selection.getSVGEventCoordinates(evt);
     return [{
       target: "parent",
       mutation: () => {
@@ -155,7 +158,7 @@ const Helpers = {
     return [{
       target: "parent",
       mutation: () => {
-        return {panning: false};
+        return { panning: false };
       }
     }];
   },
@@ -164,7 +167,7 @@ const Helpers = {
     return [{
       target: "parent",
       mutation: () => {
-        return {panning: false};
+        return { panning: false };
       }
     }];
   },
@@ -172,7 +175,7 @@ const Helpers = {
   onMouseMove(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params
     if (targetProps.panning) {
       const { scale, startX, startY, onDomainChange, dimension, domain, zoomDomain } = targetProps;
-      const {x, y} = Selection.getSVGEventCoordinates(evt);
+      const { x, y } = Selection.getSVGEventCoordinates(evt);
       const originalDomain = this.getDomain(targetProps);
       const lastDomain = defaults(
         {}, targetProps.currentDomain || zoomDomain || originalDomain, domain
@@ -198,6 +201,7 @@ const Helpers = {
         }
       }];
     }
+    return undefined;
   },
 
   onWheel(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params
@@ -209,7 +213,7 @@ const Helpers = {
     const lastDomain = defaults(
       {}, targetProps.currentDomain || zoomDomain || originalDomain, domain
     );
-    const {x, y} = lastDomain;
+    const { x, y } = lastDomain;
     const currentDomain = {
       x: dimension === "y" ? lastDomain.x : this.scale(x, evt, targetProps, "x"),
       y: dimension === "x" ? lastDomain.y : this.scale(y, evt, targetProps, "y")
@@ -231,6 +235,7 @@ const Helpers = {
   }
 };
 
+export { Helpers as RawZoomHelpers }; // allow victory-native to extend these helpers
 
 export default {
   onMouseDown: Helpers.onMouseDown.bind(Helpers),
@@ -238,12 +243,12 @@ export default {
   onMouseLeave: Helpers.onMouseLeave.bind(Helpers),
   onMouseMove: throttle(
     attachId(Helpers.onMouseMove.bind(Helpers)),
-    16,
-    {leading: true, trailing: false}
+    16, // eslint-disable-line no-magic-numbers
+    { leading: true, trailing: false }
   ),
   onWheel: throttle(
     attachId(Helpers.onWheel.bind(Helpers)),
-    16,
-    {leading: true, trailing: false}
+    16, // eslint-disable-line no-magic-numbers
+    { leading: true, trailing: false }
   )
 };

package/src/components/victory-area/helper-methods.js

@@ -1,3 +1,4 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import { assign, defaults } from "lodash";
 import { Helpers, Log, Data, Domain, Scale } from "victory-core";
 
@@ -6,7 +7,7 @@ export default {
   getBaseProps(props, fallbackProps) {
     props = Helpers.modifyProps(props, fallbackProps, "area");
     const calculatedValues = this.getCalculatedValues(props);
-    const {scale, style, data, domain} = calculatedValues;
+    const { scale, style, data, domain } = calculatedValues;
     const {
       standalone, interpolation, events, sharedEvents, width, height, groupComponent, theme
     } = props;
@@ -21,7 +22,7 @@ export default {
       const text = this.getLabelText(props, datum, index);
       if (text !== undefined && text !== null || events || sharedEvents) {
         const eventKey = datum.eventKey || index;
-        childProps[eventKey] = {labels: this.getLabelProps(text, index, calculatedValues)};
+        childProps[eventKey] = { labels: this.getLabelProps(text, index, calculatedValues) };
       }
       return childProps;
     }, initialChildProps);
@@ -30,7 +31,7 @@ export default {
   getCalculatedValues(props) {
     const { theme } = props;
     const defaultStyles = theme && theme.area && theme.area.style ? theme.area.style : {};
-    const style = Helpers.getStyles(props.style, defaultStyles, "auto", "100%");
+    const style = Helpers.getStyles(props.style, defaultStyles);
     const range = {
       x: Helpers.getRange(props, "x"),
       y: Helpers.getRange(props, "y")
@@ -51,7 +52,7 @@ export default {
   getLabelProps(text, index, calculatedProps) {
     const { scale, data, style } = calculatedProps;
     const datum = data[index];
-    const {x, y} = this.getLabelPosition(datum, scale);
+    const { x, y } = this.getLabelPosition(datum, scale);
     const labelStyle = this.getLabelStyle(style) || {};
     const sign = (datum._y1 || datum._y) < 0 ? -1 : 1;
     return {
@@ -90,7 +91,7 @@ export default {
     // use fill instead of stroke for text
     const fill = dataStyle.stroke;
     const padding = labelStyle.padding || 0;
-    return defaults({}, labelStyle, {opacity, fill, padding});
+    return defaults({}, labelStyle, { opacity, fill, padding });
   },
 
 
@@ -108,7 +109,7 @@ export default {
     return data.map((datum) => {
       const _y1 = datum._y1 !== undefined ? datum._y1 : datum._y;
       const _y0 = datum._y0 !== undefined ? datum._y0 : minY;
-      return assign({}, datum, {_y0, _y1});
+      return assign({}, datum, { _y0, _y1 });
     });
   }
 };

package/src/components/victory-area/victory-area.js

@@ -1,10 +1,12 @@
-import { partialRight, without } from "lodash";
-import React, { PropTypes } from "react";
+import { partialRight } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
 import AreaHelpers from "./helper-methods";
 import {
-  PropTypes as CustomPropTypes, Helpers, VictoryTransition, VictoryLabel, VictoryContainer,
+  PropTypes as CustomPropTypes, Helpers, VictoryLabel, VictoryContainer,
   DefaultTransitions, Area, VictoryClipContainer, addEvents, VictoryTheme, Data, Domain
 } from "victory-core";
+import { BaseProps, DataProps } from "../../helpers/common-props";
 
 const fallbackProps = {
   width: 450,
@@ -18,94 +20,21 @@ const animationWhitelist = ["data", "domain", "height", "padding", "style", "wid
 class VictoryArea extends React.Component {
 
   static propTypes = {
-    animate: PropTypes.object,
-    categories: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.string),
-      PropTypes.shape({
-        x: PropTypes.arrayOf(PropTypes.string), y: PropTypes.arrayOf(PropTypes.string)
-      })
-    ]),
-    containerComponent: PropTypes.element,
-    data: PropTypes.array,
-    domainPadding: PropTypes.oneOfType([
-      PropTypes.shape({
-        x: PropTypes.oneOfType([ PropTypes.number, CustomPropTypes.domain ]),
-        y: PropTypes.oneOfType([ PropTypes.number, CustomPropTypes.domain ])
-      }),
-      PropTypes.number
-    ]),
-    dataComponent: PropTypes.element,
-    domain: PropTypes.oneOfType([
-      CustomPropTypes.domain,
-      PropTypes.shape({ x: CustomPropTypes.domain, y: CustomPropTypes.domain })
-    ]),
-    events: PropTypes.arrayOf(PropTypes.shape({
-      target: PropTypes.oneOf(["data", "labels", "parent"]),
-      eventKey: PropTypes.oneOfType([
-        PropTypes.array,
-        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-        PropTypes.string
-      ]),
-      eventHandlers: PropTypes.object
-    })),
-    groupComponent: PropTypes.element,
-    height: CustomPropTypes.nonNegative,
+    ...BaseProps,
+    ...DataProps,
     interpolation: PropTypes.oneOf([
       "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX",
       "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"
     ]),
-    Label: CustomPropTypes.deprecated(
+    label: CustomPropTypes.deprecated(
       PropTypes.string,
       "Use `labels` instead for individual data labels"
-    ),
-    labels: PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]),
-    labelComponent: PropTypes.element,
-    name: PropTypes.string,
-    padding: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        top: PropTypes.number, bottom: PropTypes.number,
-        left: PropTypes.number, right: PropTypes.number
-      })
-    ]),
-    samples: CustomPropTypes.nonNegative,
-    scale: PropTypes.oneOfType([
-      CustomPropTypes.scale,
-      PropTypes.shape({ x: CustomPropTypes.scale, y: CustomPropTypes.scale })
-    ]),
-    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)
-    ]),
-    standalone: PropTypes.bool,
-    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)
-    ])
+    )
   };
 
   static defaultProps = {
     dataComponent: <Area/>,
-    labelComponent: <VictoryLabel/>,
+    labelComponent: <VictoryLabel renderInPortal/>,
     scale: "linear",
     samples: 50,
     standalone: true,
@@ -125,28 +54,7 @@ class VictoryArea extends React.Component {
     "dataComponent", "labelComponent", "groupComponent", "containerComponent"
   ];
 
-
-  renderData(props) {
-    const { dataComponent, labelComponent, groupComponent } = props;
-    const dataKeys = without(this.dataKeys, "all");
-    const labelComponents = dataKeys.reduce((memo, key) => {
-      const labelProps = this.getComponentProps(labelComponent, "labels", key);
-      if (labelProps && labelProps.text !== undefined && labelProps.text !== null) {
-        memo = memo.concat(React.cloneElement(labelComponent, labelProps));
-      }
-      return memo;
-    }, []);
-    const dataProps = this.getComponentProps(dataComponent, "data", "all");
-    const children = [React.cloneElement(dataComponent, dataProps), ...labelComponents];
-    return this.renderContainer(groupComponent, children);
-  }
-
-  renderContainer(component, children) {
-    const isContainer = component.type && component.type.role === "container";
-    const parentProps = isContainer ? this.getComponentProps(component, "parent", "parent") : {};
-    return React.cloneElement(component, parentProps, children);
-  }
-
+  // Overridden in native versions
   shouldAnimate() {
     return !!this.props.animate;
   }
@@ -156,14 +64,10 @@ class VictoryArea extends React.Component {
     const props = Helpers.modifyProps(this.props, fallbackProps, role);
 
     if (this.shouldAnimate()) {
-      return (
-        <VictoryTransition animate={props.animate} animationWhitelist={animationWhitelist}>
-          {React.createElement(this.constructor, props)}
-        </VictoryTransition>
-      );
+      return this.animateComponent(props, animationWhitelist);
     }
-    const children = this.renderData(props);
-    return this.renderContainer(props.containerComponent, children);
+    const children = this.renderContinuousData(props);
+    return props.standalone ? this.renderContainer(props.containerComponent, children) : children;
   }
 }
 

package/src/components/victory-axis/helper-methods.js

@@ -1,3 +1,4 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [-90, -1, 0, 1, 2] }]*/
 import { includes, defaults, defaultsDeep, isFunction, range, without } from "lodash";
 import { Helpers, Scale, Domain } from "victory-core";
 
@@ -44,12 +45,12 @@ export default {
   // exposed for use by VictoryChart
   getAxis(props, flipped) {
     if (props.orientation) {
-      const vertical = {top: "x", bottom: "x", left: "y", right: "y"};
+      const vertical = { top: "x", bottom: "x", left: "y", right: "y" };
       return vertical[props.orientation];
     }
     const axisType = props.dependentAxis ? "dependent" : "independent";
-    const flippedAxis = { dependent: "x", independent: "y"};
-    const normalAxis = { independent: "x", dependent: "y"};
+    const flippedAxis = { dependent: "x", independent: "y" };
+    const normalAxis = { independent: "x", dependent: "y" };
     return flipped ? flippedAxis[axisType] : normalAxis[axisType];
   },
 
@@ -80,9 +81,9 @@ export default {
   getStyles(props, styleObject) {
     const style = props.style || {};
     styleObject = styleObject || {};
-    const parentStyleProps = { height: "auto", width: "100%" };
+    const parentStyleProps = { height: "100%", width: "100%" };
     return {
-      parent: defaults(parentStyleProps, style.parent, styleObject.parent),
+      parent: defaults(style.parent, styleObject.parent, parentStyleProps),
       axis: defaults({}, style.axis, styleObject.axis),
       axisLabel: defaults({}, style.axisLabel, styleObject.axisLabel),
       grid: defaults({}, style.grid, styleObject.grid),
@@ -118,7 +119,7 @@ export default {
   },
 
   getGridProps(layout, style, datum) {
-    const {edge, transform} = layout;
+    const { edge, transform } = layout;
     return {
       x1: transform.x,
       y1: transform.y,
@@ -198,7 +199,7 @@ export default {
     const axisLabelProps = this.getAxisLabelProps(props, calculatedValues, globalTransform);
     const initialChildProps = { parent: {
       style: style.parent, ticks, scale, width, height, domain, standalone, theme
-    }};
+    } };
 
     return ticks.reduce((childProps, indexedTick, index) => {
       const tick = stringTicks ? tickValues[indexedTick - 1] : indexedTick;
@@ -254,7 +255,7 @@ export default {
   },
 
   getAxisLabelProps(props, calculatedValues, globalTransform) {
-    const {style, orientation, padding, labelPadding, isVertical} = calculatedValues;
+    const { style, orientation, padding, labelPadding, isVertical } = calculatedValues;
     const sign = orientationSign[orientation];
     const hPadding = padding.left + padding.right;
     const vPadding = padding.top + padding.bottom;
@@ -326,8 +327,10 @@ export default {
     }
     const isVertical = Helpers.isVertical(props);
     // TODO: magic numbers
+    /*eslint-disable no-magic-numbers*/
     const fontSize = labelStyle.fontSize || 14;
     return props.label ? (fontSize * (isVertical ? 2.3 : 1.6)) : 0;
+    /*eslint-enable no-magic-numbers*/
   },
 
   getOffset(props, calculatedValues) {
@@ -336,7 +339,7 @@ export default {
     } = calculatedValues;
     const xPadding = orientation === "right" ? padding.right : padding.left;
     const yPadding = orientation === "top" ? padding.top : padding.bottom;
-    const fontSize = style.axisLabel.fontSize || 14;
+    const fontSize = style.axisLabel.fontSize || 14; // eslint-disable-line no-magic-numbers
     const offsetX = (props.offsetX !== null) && (props.offsetX !== undefined)
       ? props.offsetX : xPadding;
     const offsetY = (props.offsetY !== null) && (props.offsetY !== undefined)
@@ -347,7 +350,7 @@ export default {
       return tickStyle.size || 0;
     });
     const totalPadding = fontSize + (2 * Math.max(...tickSizes)) + labelPadding;
-    const minimumPadding = 1.2 * fontSize; // TODO: magic numbers
+    const minimumPadding = 1.2 * fontSize; // eslint-disable-line no-magic-numbers
     const x = isVertical ? totalPadding : minimumPadding;
     const y = isVertical ? minimumPadding : totalPadding;
     return {
@@ -357,17 +360,17 @@ export default {
   },
 
   getTransform(props, calculatedValues, offset) {
-    const {orientation} = calculatedValues;
+    const { orientation } = calculatedValues;
     return {
-      top: {x: 0, y: offset.y},
-      bottom: {x: 0, y: props.height - offset.y},
-      left: {x: offset.x, y: 0},
-      right: {x: props.width - offset.x, y: 0}
+      top: { x: 0, y: offset.y },
+      bottom: { x: 0, y: props.height - offset.y },
+      left: { x: offset.x, y: 0 },
+      right: { x: props.width - offset.x, y: 0 }
     }[orientation];
   },
 
   getTickPosition(style, orientation, isVertical) {
-    const {tickStyle, labelStyle} = style;
+    const { tickStyle, labelStyle } = style;
     const size = tickStyle.size || 0;
     const tickPadding = tickStyle.padding || 0;
     const labelPadding = labelStyle.padding || 0;
@@ -389,17 +392,17 @@ export default {
   },
 
   getGridEdge(props, calculatedValues) {
-    const {orientation, padding, isVertical} = calculatedValues;
+    const { orientation, padding, isVertical } = calculatedValues;
     const sign = -orientationSign[orientation];
     const x = isVertical ?
       sign * (props.width - (padding.left + padding.right)) : 0;
     const y = isVertical ?
       0 : sign * (props.height - (padding.top + padding.bottom));
-    return {x, y};
+    return { x, y };
   },
 
   getGridOffset(props, calculatedValues, offset) {
-    const {padding, orientation } = calculatedValues;
+    const { padding, orientation } = calculatedValues;
     const xPadding = orientation === "right" ? padding.right : padding.left;
     const yPadding = orientation === "top" ? padding.top : padding.bottom;
     return {

package/src/components/victory-axis/victory-axis.js

@@ -1,11 +1,14 @@
-import React, { PropTypes } from "react";
+import PropTypes from "prop-types";
+import React from "react";
 import { assign, partialRight } from "lodash";
 import {
-  PropTypes as CustomPropTypes, Helpers, VictoryTransition, VictoryLabel,
+  PropTypes as CustomPropTypes, Helpers, VictoryLabel,
   VictoryContainer, VictoryTheme, Line, TextSize, addEvents
 } from "victory-core";
 import AxisHelpers from "./helper-methods";
 import Axis from "../../helpers/axis";
+import { BaseProps } from "../../helpers/common-props";
+
 
 const fallbackProps = {
   width: 450,
@@ -33,67 +36,29 @@ class VictoryAxis extends React.Component {
   };
 
   static propTypes = {
-    animate: PropTypes.object,
+    ...BaseProps,
     axisComponent: PropTypes.element,
     axisLabelComponent: PropTypes.element,
-    containerComponent: PropTypes.element,
     crossAxis: PropTypes.bool,
     dependentAxis: PropTypes.bool,
-    domain: PropTypes.oneOfType([
-      CustomPropTypes.domain,
-      PropTypes.shape({ x: CustomPropTypes.domain, y: CustomPropTypes.domain })
-    ]),
-    domainPadding: PropTypes.oneOfType([
-      PropTypes.shape({
-        x: PropTypes.oneOfType([ PropTypes.number, CustomPropTypes.domain ]),
-        y: PropTypes.oneOfType([ PropTypes.number, CustomPropTypes.domain ])
-      }),
-      PropTypes.number
-    ]),
-    events: PropTypes.arrayOf(PropTypes.shape({
-      target: PropTypes.oneOf(["axis", "axisLabel", "grid", "ticks", "tickLabels", "parent"]),
-      eventKey: PropTypes.oneOfType([
-        PropTypes.array,
-        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-        PropTypes.string
-      ]),
-      eventHandlers: PropTypes.object
-    })),
     fixLabelOverlap: PropTypes.bool,
     gridComponent: PropTypes.element,
     groupComponent: PropTypes.element,
-    height: CustomPropTypes.nonNegative,
     label: PropTypes.any,
-    name: PropTypes.string,
     offsetX: PropTypes.number,
     offsetY: PropTypes.number,
     orientation: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-    padding: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        top: PropTypes.number, bottom: PropTypes.number,
-        left: PropTypes.number, right: PropTypes.number
-      })
-    ]),
-    scale: PropTypes.oneOfType([
-      CustomPropTypes.scale,
-      PropTypes.shape({ x: CustomPropTypes.scale, y: CustomPropTypes.scale })
-    ]),
-    sharedEvents: PropTypes.shape({ events: PropTypes.array, getEventState: PropTypes.func }),
-    standalone: PropTypes.bool,
     style: PropTypes.shape({
       parent: PropTypes.object, axis: PropTypes.object, axisLabel: PropTypes.object,
       grid: PropTypes.object, ticks: PropTypes.object, tickLabels: PropTypes.object
     }),
-    theme: PropTypes.object,
     tickComponent: PropTypes.element,
     tickCount: CustomPropTypes.allOfType([
       CustomPropTypes.integer, CustomPropTypes.greaterThanZero
     ]),
     tickFormat: PropTypes.oneOfType([ PropTypes.func, CustomPropTypes.homogeneousArray ]),
     tickLabelComponent: PropTypes.element,
-    tickValues: CustomPropTypes.homogeneousArray,
-    width: CustomPropTypes.nonNegative
+    tickValues: CustomPropTypes.homogeneousArray
   };
 
   static defaultProps = {
@@ -145,7 +110,7 @@ class VictoryAxis extends React.Component {
       const TickLabel = React.cloneElement(tickLabelComponent, tickLabelProps);
 
       return React.cloneElement(
-        props.groupComponent, {key: `tick-group-${key}`}, GridComponent, TickComponent, TickLabel
+        props.groupComponent, { key: `tick-group-${key}` }, GridComponent, TickComponent, TickLabel
       );
     });
   }
@@ -160,8 +125,8 @@ class VictoryAxis extends React.Component {
      .map((child) => child.props);
     const paddingToObject = (padding) =>
       typeof (padding) === "object"
-        ? assign({}, {top: 0, right: 0, bottom: 0, left: 0}, padding)
-        : {top: padding, right: padding, bottom: padding, left: padding };
+        ? assign({}, { top: 0, right: 0, bottom: 0, left: 0 }, padding)
+        : { top: padding, right: padding, bottom: padding, left: padding };
     const labelsSumSize = labels.reduce((sum, label) => {
       const padding = paddingToObject(label.style.padding);
       const labelSize = TextSize.approximateTextSize(label.text, {
@@ -186,12 +151,7 @@ class VictoryAxis extends React.Component {
     return sorted.filter((gridAndTick, index) => index % divider === 0);
   }
 
-  renderContainer(component, children) {
-    const isContainer = component.type && component.type.role === "container";
-    const parentProps = isContainer ? this.getComponentProps(component, "parent", "parent") : {};
-    return React.cloneElement(component, parentProps, children);
-  }
-
+  // Overridden in native versions
   shouldAnimate() {
     return !!this.props.animate;
   }
@@ -199,11 +159,7 @@ class VictoryAxis extends React.Component {
   render() {
     const props = Helpers.modifyProps(this.props, fallbackProps, "axis");
     if (this.shouldAnimate()) {
-      return (
-        <VictoryTransition animate={props.animate} animationWhitelist={animationWhitelist}>
-          {React.createElement(this.constructor, props)}
-        </VictoryTransition>
-      );
+      return this.animateComponent(props, animationWhitelist);
     }
 
     const gridAndTicks = this.renderGridAndTicks(props);
@@ -215,7 +171,9 @@ class VictoryAxis extends React.Component {
       this.renderLine(props),
       this.renderLabel(props)
     ];
-    return this.renderContainer(props.containerComponent, children);
+    return props.standalone ?
+      this.renderContainer(props.containerComponent, children) :
+      React.cloneElement(props.groupComponent, {}, children);
   }
 }
 

package/src/components/victory-bar/helper-methods.js

@@ -1,11 +1,13 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import { assign, defaults, omit } from "lodash";
 import { Helpers, Data, Domain, Scale } from "victory-core";
 
 export default {
 
   getBarWidth(props) {
-    const {style, width, data} = props;
+    const { style, width, data } = props;
     const padding = props.padding.left || props.padding;
+    // eslint-disable-next-line no-magic-numbers
     const defaultWidth = data.length === 0 ? 8 : (width - 2 * padding) / data.length;
     return style && style.width ? style.width : defaultWidth;
   },
@@ -74,7 +76,7 @@ export default {
   getCalculatedValues(props) {
     const { theme, horizontal } = props;
     const defaultStyles = theme && theme.bar && theme.bar.style ? theme.bar.style : {};
-    const style = Helpers.getStyles(props.style, defaultStyles, "auto", "100%");
+    const style = Helpers.getStyles(props.style, defaultStyles);
     const data = Data.getData(props);
     const range = {
       x: Helpers.getRange(props, "x"),
@@ -95,11 +97,11 @@ export default {
 
   getBaseProps(props, fallbackProps) {
     props = Helpers.modifyProps(props, fallbackProps, "bar");
-    const {style, data, scale, domain } = this.getCalculatedValues(props);
+    const { style, data, scale, domain } = this.getCalculatedValues(props);
     const { horizontal, width, height, padding, standalone, theme } = props;
-    const initialChildProps = {parent: {
+    const initialChildProps = { parent: {
       domain, scale, width, height, data, standalone, theme, style: style.parent
-    }};
+    } };
 
     return data.reduce((childProps, datum, index) => {
       const eventKey = datum.eventKey || index;