victory-chart - npm Package Compare versions

Comparing version 23.0.1 to 24.0.0

CHANGELOG.md

 # VictoryChart Changelog
 
+## 24.0.0 (2017-10-19)
+
+**Breaking Changes**
+
+- [527](https://github.com/FormidableLabs/victory-chart/pull/527)
+  - adds an `invertAxis` prop for `VictoryAxis` that will flip the domain of a given axis when true. Changing the `orientation` prop of a given axis will no longer flip the domain on that axis _unless_ the `invertAxis` prop is also set.
+  - `tickFormat` as an array will set the number of ticks if `tickValues` are not given.
+  - `tickValues` will be forced to a unique array. `tickFormat` may still have non-unique values.
+  - `tickCount` will now always have an effect when set. Previously, this prop would do nothing when `tickValues` were provided. Now `tickCount` will downsample any array provided to either `tickValues` or `tickFormat`.
+
+Other Changes
+
+- [529](https://github.com/FormidableLabs/victory-chart/pull/529) `VictoryChart` no longer calculates `tickValues` or `tickFormat` for axis children. `stringMap` and `categories` are passed to axis components instead.
+
+- [528](https://github.com/FormidableLabs/victory-chart/pull/528) and [530](https://github.com/FormidableLabs/victory-chart/pull/530) Remove numeric keys from styles
+
+- [526](https://github.com/FormidableLabs/victory-chart/pull/526) Always set animation state
+
 ## 23.0.1 ( 2017-10-04)
@@ -4,0 +22,0 @@

es/components/victory-axis/helper-methods.js

@@ -1,7 +0,4 @@
-import _without from "lodash/without";
-import _range from "lodash/range";
 import _isFunction from "lodash/isFunction";
 import _defaultsDeep from "lodash/defaultsDeep";
 import _defaults from "lodash/defaults";
-import _includes from "lodash/includes";
 
@@ -204,5 +201,5 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
         tickFormat = calculatedValues.tickFormat,
-        stringTicks = calculatedValues.stringTicks,
         anchors = calculatedValues.anchors,
-        domain = calculatedValues.domain;
+        domain = calculatedValues.domain,
+        stringTicks = calculatedValues.stringTicks;
     var _props = props,
@@ -213,3 +210,2 @@ width = _props.width,
         theme = _props.theme,
-        tickValues = _props.tickValues,
         polar = _props.polar,
@@ -229,9 +225,8 @@ padding = _props.padding;
 
-    return ticks.reduce(function (childProps, indexedTick, index) {
-      var tick = stringTicks ? tickValues[indexedTick - 1] : indexedTick;
-
-      var styles = _this2.getEvaluatedStyles(style, tick, index);
+    return ticks.reduce(function (childProps, tick, index) {
+      var originalTick = stringTicks ? stringTicks[index] : tick;
+      var styles = _this2.getEvaluatedStyles(style, originalTick, index);
       var tickLayout = {
         position: _this2.getTickPosition(styles, orientation, isVertical),
-        transform: _this2.getTickTransform(scale(indexedTick), globalTransform, isVertical)
+        transform: _this2.getTickTransform(scale(tick), globalTransform, isVertical)
       };
@@ -242,7 +237,6 @@
         transform: {
-          x: isVertical ? -gridOffset.x + globalTransform.x : scale(indexedTick) + globalTransform.x,
-          y: isVertical ? scale(indexedTick) + globalTransform.y : gridOffset.y + globalTransform.y
+          x: isVertical ? -gridOffset.x + globalTransform.x : scale(tick) + globalTransform.x,
+          y: isVertical ? scale(tick) + globalTransform.y : gridOffset.y + globalTransform.y
         }
       };
-
       childProps[index] = {
@@ -266,6 +260,6 @@ axis: axisProps,
     var labelPadding = this.getLabelPadding(props, style);
-    var stringTicks = Helpers.stringTicks(props);
+    var stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined;
     var scale = this.getScale(props);
     var domain = this.getDomain(props);
-    var ticks = this.getTicks(props, scale);
+    var ticks = Axis.getTicks(props, scale, props.crossAxis);
     var tickFormat = Axis.getTickFormat(props, scale);
@@ -293,3 +287,3 @@ var anchors = this.getAnchors(orientation, isVertical);
     var x = isVertical ? globalTransform.x + sign * labelPadding : (props.width - hPadding) / 2 + padding.left + globalTransform.x;
-    var y = isVertical ? (props.height - vPadding) / 2 + padding.bottom + globalTransform.y : sign * labelPadding + globalTransform.y;
+    var y = isVertical ? (props.height - vPadding) / 2 + padding.top + globalTransform.y : sign * labelPadding + globalTransform.y;
 
@@ -306,23 +300,2 @@ return {
   },
-  getTicks: function (props, scale) {
-    var tickValues = props.tickValues,
-        tickCount = props.tickCount,
-        crossAxis = props.crossAxis;
-
-    if (props.tickValues) {
-      if (Helpers.stringTicks(props)) {
-        return _range(1, props.tickValues.length + 1);
-      }
-      return tickValues.length ? tickValues : scale.domain();
-    } else if (scale.ticks && _isFunction(scale.ticks)) {
-      var scaleTicks = scale.ticks(tickCount);
-      var ticks = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
-      if (crossAxis) {
-        var filteredTicks = _includes(ticks, 0) ? _without(ticks, 0) : ticks;
-        return filteredTicks.length ? filteredTicks : ticks;
-      }
-      return ticks;
-    }
-    return scale.domain();
-  },
   getAnchors: function (orientation, isVertical) {
@@ -329,0 +302,0 @@ var anchorOrientation = { top: "end", left: "end", right: "start", bottom: "start" };

es/components/victory-axis/victory-axis.js

@@ -169,2 +169,3 @@ import _partialRight from "lodash/partialRight";
   axisLabelComponent: PropTypes.element,
+  categories: PropTypes.arrayOf(PropTypes.string),
   crossAxis: PropTypes.bool,
@@ -180,2 +181,3 @@ dependentAxis: PropTypes.bool,
   groupComponent: PropTypes.element,
+  invertAxis: PropTypes.bool,
   label: PropTypes.any,
@@ -186,2 +188,3 @@ offsetX: PropTypes.number,
   origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+  stringMap: PropTypes.object,
   style: PropTypes.shape({
@@ -206,3 +209,2 @@ parent: PropTypes.object, axis: PropTypes.object, axisLabel: PropTypes.object,
   theme: VictoryTheme.grayscale,
-  tickCount: 5,
   containerComponent: React.createElement(VictoryContainer, null),
@@ -209,0 +211,0 @@ groupComponent: React.createElement("g", { role: "presentation" }),

es/components/victory-bar/helper-methods.js

@@ -0,5 +1,9 @@
+import _isNaN from "lodash/isNaN";
 import _omit from "lodash/omit";
+import _keys from "lodash/keys";
 import _defaults from "lodash/defaults";
 import _assign from "lodash/assign";
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 import { Helpers, LabelHelpers, Data, Domain, Scale } from "victory-core";
@@ -18,3 +22,7 @@
   getBarStyle: function (datum, baseStyle) {
-    var styleData = _omit(datum, ["xName", "yName", "x", "y", "label", "errorX", "errorY", "eventKey"]);
+    var numKeys = _keys(datum).filter(function (k) {
+      return _isNaN(k);
+    });
+    var omitKeys = ["x", "y", "y0", "_x", "_y", "_y0", "name", "label", "eventKey"];
+    var styleData = _omit(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return _defaults({}, styleData, baseStyle);
@@ -21,0 +29,0 @@ },

es/components/victory-candlestick/helper-methods.js

@@ -0,3 +1,5 @@
+import _isNaN from "lodash/isNaN";
 import _defaults from "lodash/defaults";
 import _omit from "lodash/omit";
+import _keys from "lodash/keys";
 import _sortBy from "lodash/sortBy";
@@ -172,3 +174,7 @@ import _assign from "lodash/assign";
     style = style || {};
-    var stylesFromData = _omit(datum, ["x", "y", "size", "name", "label", "open", "close", "high", "low"]);
+    var numKeys = _keys(datum).filter(function (k) {
+      return _isNaN(k);
+    });
+    var omitKeys = ["x", "_x", "_y", "_y0", "size", "name", "label", "open", "close", "high", "low", "eventKey"];
+    var stylesFromData = _omit(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     var candleColor = datum.open > datum.close ? props.candleColors.negative : props.candleColors.positive;
@@ -175,0 +181,0 @@ var fill = datum.fill || style.fill || candleColor;

es/components/victory-chart/helper-methods.js

@@ -1,5 +0,1 @@
-import _values from "lodash/values";
-import _sortBy from "lodash/sortBy";
-import _invert from "lodash/invert";
-
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -10,8 +6,4 @@
 import React from "react";
-import { Helpers, Collection, Log, Domain } from "victory-core";
+import { Collection, Log } from "victory-core";
 
-var identity = function (x) {
-  return x;
-};
-
 export default {
@@ -72,5 +64,9 @@ getChildComponents: function (props, defaultAxes) {
     var domain = Wrapper.getDomain(props, axis, childComponents);
-    var orientations = Axis.getAxisOrientations(childComponents);
-    return Domain.orientDomain(domain, orientations, axis);
+    var axisComponent = Axis.getAxisComponent(childComponents, axis);
+    var invertDomain = axisComponent && axisComponent.props && axisComponent.props.invertAxis;
+    return invertDomain ? domain.concat().reverse() : domain;
   },
+
+
+  // eslint-disable-next-line complexity
   getAxisOffset: function (props, calculatedProps) {
@@ -80,16 +76,30 @@ var axisComponents = calculatedProps.axisComponents,
         origin = calculatedProps.origin,
-        originSign = calculatedProps.originSign;
+        domain = calculatedProps.domain,
+        originSign = calculatedProps.originSign,
+        padding = calculatedProps.padding;
+    var top = padding.top,
+        bottom = padding.bottom,
+        left = padding.left,
+        right = padding.right;
     // make the axes line up, and cross when appropriate
 
     var axisOrientations = {
-      x: Axis.getOrientation(axisComponents.x, "x", originSign.x),
-      y: Axis.getOrientation(axisComponents.y, "y", originSign.y)
+      x: Axis.getOrientation(axisComponents.x, "x", originSign.y),
+      y: Axis.getOrientation(axisComponents.y, "y", originSign.x)
     };
     var orientationOffset = {
+      y: axisOrientations.x === "bottom" ? bottom : top,
+      x: axisOrientations.y === "left" ? left : right
+    };
+    var originOffset = {
       x: axisOrientations.y === "left" ? 0 : props.width,
       y: axisOrientations.x === "bottom" ? props.height : 0
     };
+    var originPosition = {
+      x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x),
+      y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y)
+    };
     var calculatedOffset = {
-      x: Math.abs(orientationOffset.x - scale.x(origin.x)),
-      y: Math.abs(orientationOffset.y - scale.y(origin.y))
+      x: originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x,
+      y: originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y
     };
@@ -102,52 +112,2 @@
   },
-  getTicksFromData: function (calculatedProps, axis) {
-    var currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    var stringMap = calculatedProps.stringMap[currentAxis];
-    // if tickValues are defined for an axis component use them
-    var categoryArray = calculatedProps.categories[currentAxis];
-    var ticksFromCategories = categoryArray && Collection.containsOnlyStrings(categoryArray) ? categoryArray.map(function (tick) {
-      return stringMap[tick];
-    }) : categoryArray;
-    var ticksFromStringMap = stringMap && _values(stringMap);
-    // when ticks is undefined, axis will determine its own ticks
-    return ticksFromCategories && ticksFromCategories.length !== 0 ? ticksFromCategories : ticksFromStringMap;
-  },
-  getTicksFromAxis: function (calculatedProps, axis, component) {
-    var tickValues = component.props.tickValues;
-    if (!tickValues) {
-      return undefined;
-    }
-    var currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    var stringMap = calculatedProps.stringMap[currentAxis];
-    return Collection.containsOnlyStrings(tickValues) && stringMap ? tickValues.map(function (tick) {
-      return stringMap[tick];
-    }) : tickValues;
-  },
-  getTicks: function () {
-    return this.getTicksFromAxis.apply(this, arguments) || this.getTicksFromData.apply(this, arguments);
-  },
-  getTickFormat: function (component, axis, calculatedProps) {
-    var currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    var stringMap = calculatedProps.stringMap[currentAxis];
-    var tickValues = component.props.tickValues;
-    var useIdentity = tickValues && !Collection.containsStrings(tickValues) && !Collection.containsDates(tickValues);
-    if (useIdentity) {
-      return identity;
-    } else if (stringMap !== null) {
-      var tickValueArray = _sortBy(_values(stringMap), function (n) {
-        return n;
-      });
-      var invertedStringMap = _invert(stringMap);
-      var dataNames = tickValueArray.map(function (tick) {
-        return invertedStringMap[tick];
-      });
-      // string ticks should have one tick of padding at the beginning
-      var dataTicks = [""].concat(_toConsumableArray(dataNames), [""]);
-      return function (x) {
-        return dataTicks[x];
-      };
-    } else {
-      return undefined;
-    }
-  },
   createStringMap: function (props, axis, childComponents) {
@@ -154,0 +114,0 @@ var allStrings = Wrapper.getStringsFromChildren(props, axis, childComponents);

es/components/victory-chart/victory-chart.js

@@ -44,4 +44,4 @@ import _defaults from "lodash/defaults";
       };
-      _this.setAnimationState = Wrapper.setAnimationState.bind(_this);
     }
+    _this.setAnimationState = Wrapper.setAnimationState.bind(_this);
     _this.events = Wrapper.getAllEvents(props);
@@ -81,13 +81,18 @@ return _this;
           originSign = calculatedProps.originSign,
-          stringMap = calculatedProps.stringMap;
+          stringMap = calculatedProps.stringMap,
+          categories = calculatedProps.categories,
+          horizontal = calculatedProps.horizontal;
 
-      var axis = child.type.getAxis(child.props);
+      var childProps = child.props || {};
+      var axis = child.type.getAxis(childProps);
+      var currentAxis = Axis.getCurrentAxis(axis, horizontal);
+      var otherAxis = axis === "x" ? "y" : "x";
       var axisOffset = ChartHelpers.getAxisOffset(props, calculatedProps);
-      var tickValues = ChartHelpers.getTicks(calculatedProps, axis, child);
-      var tickFormat = child.props.tickFormat ? Axis.getTickFormat(child.props, scale, stringMap) : ChartHelpers.getTickFormat(child, axis, calculatedProps);
       var offsetY = axis === "y" ? undefined : axisOffset.y;
       var offsetX = axis === "x" ? undefined : axisOffset.x;
-      var crossAxis = child.props.crossAxis === false ? false : true;
-      var orientation = Axis.getOrientation(child, axis, originSign[axis]);
+      var crossAxis = childProps.crossAxis === false ? false : true;
+      var orientation = Axis.getOrientation(child, axis, originSign[otherAxis]);
       return {
+        stringMap: stringMap[currentAxis],
+        categories: categories[currentAxis],
         startAngle: props.startAngle,
@@ -98,6 +103,4 @@ endAngle: props.endAngle,
         scale: scale,
-        tickValues: tickValues,
-        tickFormat: tickFormat,
-        offsetY: child.props.offsetY !== undefined ? child.props.offsetY : offsetY,
-        offsetX: child.props.offsetX !== undefined ? child.props.offsetX : offsetX,
+        offsetY: childProps.offsetY !== undefined ? childProps.offsetY : offsetY,
+        offsetX: childProps.offsetX !== undefined ? childProps.offsetX : offsetX,
         crossAxis: crossAxis,
@@ -169,5 +172,7 @@ orientation: orientation
 
+      var padding = Helpers.getPadding(props);
+
       return {
         axisComponents: axisComponents, categories: categories, domain: domain, range: range, horizontal: horizontal, scale: scale, stringMap: stringMap,
-        style: style, origin: origin, originSign: originSign, defaultDomainPadding: defaultDomainPadding
+        style: style, origin: origin, originSign: originSign, defaultDomainPadding: defaultDomainPadding, padding: padding
       };
@@ -195,3 +200,3 @@ }
           animate: getAnimationProps(props, child, index),
-          padding: Helpers.getPadding(props),
+          padding: calculatedProps.padding,
           key: index,
@@ -198,0 +203,0 @@ standalone: false

es/components/victory-errorbar/helper-methods.js

@@ -0,1 +1,2 @@
+import _isNaN from "lodash/isNaN";
 import _sortBy from "lodash/sortBy";
@@ -6,2 +7,3 @@ import _flatten from "lodash/flatten";
 import _omit from "lodash/omit";
+import _keys from "lodash/keys";
 import _assign from "lodash/assign";
@@ -238,5 +240,9 @@
   getDataStyles: function (datum, style) {
-    var stylesFromData = _omit(datum, ["x", "y", "name", "errorX", "errorY", "eventKey"]);
+    var numKeys = _keys(datum).filter(function (k) {
+      return _isNaN(k);
+    });
+    var omitKeys = ["x", "y", "_x", "_y", "name", "errorX", "errorY", "eventKey", "label"];
+    var stylesFromData = _omit(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return _defaults({}, stylesFromData, style);
   }
 };

es/components/victory-polar-axis/helper-methods.js

@@ -1,10 +0,8 @@
-import _without from "lodash/without";
-import _range from "lodash/range";
 import _isFunction from "lodash/isFunction";
 import _defaultsDeep from "lodash/defaultsDeep";
 import _defaults from "lodash/defaults";
-import _includes from "lodash/includes";
 import _uniqBy from "lodash/uniqBy";
 import _assign from "lodash/assign";
 
+import Axis from "../../helpers/axis";
 import { Helpers, LabelHelpers, Scale, Domain, Collection } from "victory-core";
@@ -19,9 +17,9 @@
     var axisType = this.getAxisType(props);
-    var stringTicks = Helpers.stringTicks(props);
+    var stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined;
     var domain = this.getDomain(props, axis);
     var range = this.getRange(props, axis);
     var scale = this.getScale(props);
-    var initialTicks = this.getTicks(props, scale);
+    var initialTicks = Axis.getTicks(props, scale);
     var ticks = axisType === "angular" ? this.filterTicks(initialTicks, scale) : initialTicks;
-    var tickFormat = this.getTickFormat(props, scale, ticks);
+    var tickFormat = Axis.getTickFormat(props, scale);
     var radius = this.getRadius(props);
@@ -178,5 +176,8 @@ return {
         scale = calculatedValues.scale,
-        style = calculatedValues.style;
+        style = calculatedValues.style,
+        stringTicks = calculatedValues.stringTicks;
 
-    var _getEvaluatedStyles = this.getEvaluatedStyles(style, tick, index),
+    var originalTick = stringTicks ? stringTicks[index] : tick;
+
+    var _getEvaluatedStyles = this.getEvaluatedStyles(style, originalTick, index),
         tickStyle = _getEvaluatedStyles.tickStyle;
@@ -207,5 +208,9 @@
         style = calculatedValues.style,
-        scale = calculatedValues.scale;
+        scale = calculatedValues.scale,
+        ticks = calculatedValues.ticks,
+        stringTicks = calculatedValues.stringTicks;
 
-    var _getEvaluatedStyles2 = this.getEvaluatedStyles(style, tick, index),
+    var originalTick = stringTicks ? stringTicks[index] : tick;
+
+    var _getEvaluatedStyles2 = this.getEvaluatedStyles(style, originalTick, index),
         labelStyle = _getEvaluatedStyles2.labelStyle;
@@ -227,3 +232,3 @@
       textAnchor: textAnchor,
-      text: tickFormat(tick, index),
+      text: tickFormat(tick, index, ticks),
       x: labelRadius * Math.cos(Helpers.degreesToRadians(labelAngle)),
@@ -238,3 +243,4 @@ y: -labelRadius * Math.sin(Helpers.degreesToRadians(labelAngle))
         style = calculatedValues.style,
-        scale = calculatedValues.scale;
+        scale = calculatedValues.scale,
+        stringTicks = calculatedValues.stringTicks;
     var startAngle = props.startAngle,
@@ -245,3 +251,5 @@ endAngle = props.endAngle,
 
-    var _getEvaluatedStyles3 = this.getEvaluatedStyles(style, tick, index),
+    var originalTick = stringTicks ? stringTicks[index] : tick;
+
+    var _getEvaluatedStyles3 = this.getEvaluatedStyles(style, originalTick, index),
         gridStyle = _getEvaluatedStyles3.gridStyle;
@@ -370,19 +378,2 @@
   },
-  getTicks: function (props, scale) {
-    var tickValues = props.tickValues,
-        tickCount = props.tickCount;
-
-    if (tickValues && Array.isArray(tickValues)) {
-      if (Helpers.stringTicks(props)) {
-        return _range(1, props.tickValues.length + 1);
-      }
-      return tickValues.length ? tickValues : scale.domain();
-    } else if (scale.ticks && _isFunction(scale.ticks)) {
-      var scaleTicks = scale.ticks(tickCount);
-      var ticks = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
-      var filteredTicks = _includes(ticks, 0) ? _without(ticks, 0) : ticks;
-      return filteredTicks.length ? filteredTicks : ticks;
-    }
-    return scale.domain();
-  },
   filterTicks: function (ticks, scale) {
@@ -393,22 +384,3 @@ var compareTicks = function (t) {
     return _uniqBy(ticks, compareTicks);
-  },
-  getTickFormat: function (props, scale) {
-    if (props.tickFormat && _isFunction(props.tickFormat)) {
-      return props.tickFormat;
-    } else if (props.tickFormat && Array.isArray(props.tickFormat)) {
-      return function (x, index) {
-        return props.tickFormat[index];
-      };
-    } else if (Helpers.stringTicks(props)) {
-      return function (x, index) {
-        return props.tickValues[index];
-      };
-    } else if (scale.tickFormat && _isFunction(scale.tickFormat)) {
-      return scale.tickFormat();
-    } else {
-      return function (x) {
-        return x;
-      };
-    }
   }
 };

es/components/victory-polar-axis/victory-polar-axis.js

@@ -143,2 +143,3 @@ import _partialRight from "lodash/partialRight";
   axisValue: PropTypes.number,
+  categories: PropTypes.arrayOf(PropTypes.string),
   circularAxisComponent: PropTypes.element,
@@ -158,2 +159,3 @@ circularGridComponent: PropTypes.element,
   startAngle: PropTypes.number,
+  stringMap: PropTypes.object,
   style: PropTypes.shape({
@@ -184,3 +186,2 @@ parent: PropTypes.object, axis: PropTypes.object, axisLabel: PropTypes.object,
   tickComponent: React.createElement(Line, { type: "tick" }),
-  tickCount: 5,
   tickLabelComponent: React.createElement(VictoryLabel, null)
@@ -187,0 +188,0 @@ };

es/components/victory-scatter/helper-methods.js

@@ -0,4 +1,6 @@
+import _isNaN from "lodash/isNaN";
 import _defaults from "lodash/defaults";
 import _omit from "lodash/omit";
 import _values from "lodash/values";
+import _keys from "lodash/keys";
 import _assign from "lodash/assign";
@@ -80,3 +82,7 @@
   getDataStyles: function (datum, style) {
-    var stylesFromData = _omit(datum, ["_x", "_y", "z", "size", "symbol", "name", "label", "eventKey"]);
+    var numKeys = _keys(datum).filter(function (k) {
+      return _isNaN(k);
+    });
+    var omitKeys = ["x", "y", "_x", "_y", "z", "size", "symbol", "eventKey", "label"];
+    var stylesFromData = _omit(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return _defaults({}, stylesFromData, style);
@@ -83,0 +89,0 @@ },

es/components/victory-voronoi/helper-methods.js

@@ -0,4 +1,6 @@
+import _isNaN from "lodash/isNaN";
 import _without from "lodash/without";
 import _defaults from "lodash/defaults";
 import _omit from "lodash/omit";
+import _keys from "lodash/keys";
 import _assign from "lodash/assign";
@@ -99,5 +101,9 @@
   getDataStyles: function (datum, style) {
-    var stylesFromData = _omit(datum, ["_x", "_y", "name", "label"]);
+    var numKeys = _keys(datum).filter(function (k) {
+      return _isNaN(k);
+    });
+    var omitKeys = ["x", "y", "_x", "_y", "eventKey", "label"];
+    var stylesFromData = _omit(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return _defaults({}, stylesFromData, style);
   }
 };

es/helpers/axis.js

@@ -0,1 +1,7 @@
+import _without from "lodash/without";
+import _includes from "lodash/includes";
+import _values from "lodash/values";
+import _sortBy from "lodash/sortBy";
+import _range from "lodash/range";
+import _uniq from "lodash/uniq";
 import _invert from "lodash/invert";
@@ -150,14 +156,2 @@ import _isFunction from "lodash/isFunction";
   /**
-   * @param {Array} childComponents: an array of children
-   * @returns {Object} an object with orientations specified for x and y
-   */
-  getAxisOrientations: function (childComponents) {
-    return {
-      x: this.getOrientation(this.getAxisComponent(childComponents, "x"), "x"),
-      y: this.getOrientation(this.getAxisComponent(childComponents, "y"), "y")
-    };
-  },
-
-
-  /**
    * @param {Object} props: axis component props
@@ -180,24 +174,51 @@ * @returns {Boolean} true when the axis is vertical
   },
-  getTickFormat: function (props, scale, stringMap) {
-    var stringTicks = this.stringTicks(props);
-    var axis = this.getAxis(props);
-    var applyStringTicks = function (tick, index, ticks) {
-      var invertedStringMap = _invert(stringMap[axis]);
-      var stringTickArray = ticks.map(function (t) {
-        return invertedStringMap[t];
+  getDefaultTickFormat: function (props) {
+    var tickValues = props.tickValues,
+        stringMap = props.stringMap;
+
+    var fallbackFormat = tickValues && !Collection.containsDates(tickValues) ? function (x) {
+      return x;
+    } : undefined;
+    if (!stringMap) {
+      return this.stringTicks(props) ? function (x, index) {
+        return tickValues[index];
+      } : fallbackFormat;
+    } else {
+      var invertedStringMap = stringMap && _invert(stringMap);
+      var tickValueArray = _sortBy(_values(stringMap), function (n) {
+        return n;
       });
-      return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
-    };
-    if (props.tickFormat && _isFunction(props.tickFormat)) {
-      return stringMap && stringMap[axis] ? applyStringTicks : props.tickFormat;
-    } else if (props.tickFormat && Array.isArray(props.tickFormat)) {
-      return function (x, index) {
-        return props.tickFormat[index];
+      var dataNames = tickValueArray.map(function (tick) {
+        return invertedStringMap[tick];
+      });
+      // string ticks should have one tick of padding at the beginning
+      var dataTicks = [""].concat(_toConsumableArray(dataNames), [""]);
+      return function (x) {
+        return dataTicks[x];
       };
-    } else if (stringTicks) {
+    }
+  },
+  getTickFormat: function (props, scale) {
+    var tickFormat = props.tickFormat,
+        stringMap = props.stringMap;
+
+    if (!tickFormat) {
+      var defaultTickFormat = this.getDefaultTickFormat(props);
+      var scaleTickFormat = scale.tickFormat && _isFunction(scale.tickFormat) ? scale.tickFormat() : function (x) {
+        return x;
+      };
+      return defaultTickFormat || scaleTickFormat;
+    } else if (tickFormat && Array.isArray(tickFormat)) {
       return function (x, index) {
-        return props.tickValues[index];
+        return tickFormat[index];
       };
-    } else if (scale.tickFormat && _isFunction(scale.tickFormat)) {
-      return scale.tickFormat();
+    } else if (tickFormat && _isFunction(tickFormat)) {
+      var applyStringTicks = function (tick, index, ticks) {
+        var invertedStringMap = _invert(stringMap);
+        var stringTickArray = ticks.map(function (t) {
+          return invertedStringMap[t];
+        });
+        return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
+      };
+      return stringMap ? applyStringTicks : tickFormat;
     } else {
@@ -208,3 +229,68 @@ return function (x) {
     }
+  },
+  getStringTicks: function (props) {
+    var stringMap = props.stringMap,
+        categories = props.categories;
+
+    var ticksFromCategories = categories && Collection.containsOnlyStrings(categories) ? categories.map(function (tick) {
+      return stringMap[tick];
+    }) : undefined;
+    var ticksFromStringMap = stringMap && _values(stringMap);
+    return ticksFromCategories && ticksFromCategories.length !== 0 ? ticksFromCategories : ticksFromStringMap;
+  },
+  getTickArray: function (props) {
+    var tickValues = props.tickValues,
+        tickFormat = props.tickFormat,
+        stringMap = props.stringMap;
+
+    var getTicksFromFormat = function () {
+      if (!tickFormat || !Array.isArray(tickFormat)) {
+        return undefined;
+      }
+      return Collection.containsStrings(tickFormat) ? tickFormat.map(function (t, i) {
+        return i;
+      }) : tickFormat;
+    };
+
+    var ticks = tickValues;
+    if (stringMap) {
+      ticks = this.getStringTicks(props);
+    }
+    if (tickValues && Collection.containsStrings(tickValues)) {
+      ticks = stringMap ? tickValues.map(function (tick) {
+        return stringMap[tick];
+      }) : _range(1, tickValues.length + 1);
+    }
+    var tickArray = ticks ? _uniq(ticks) : getTicksFromFormat(props);
+    return Array.isArray(tickArray) && tickArray.length ? tickArray : undefined;
+  },
+  downsampleTicks: function (ticks, tickCount) {
+    if (!tickCount || !Array.isArray(ticks) || ticks.length <= tickCount) {
+      return ticks;
+    }
+    var k = Math.floor(ticks.length / tickCount);
+    return ticks.filter(function (d, i) {
+      return i % k === 0;
+    });
+  },
+  getTicks: function (props, scale, filterZero) {
+    var tickCount = props.tickCount;
+
+    var tickValues = this.getTickArray(props);
+    if (tickValues) {
+      return this.downsampleTicks(tickValues, tickCount);
+    } else if (scale.ticks && _isFunction(scale.ticks)) {
+      // eslint-disable-next-line no-magic-numbers
+      var defaultTickCount = tickCount || 5;
+      var scaleTicks = scale.ticks(defaultTickCount);
+      var tickArray = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
+      var ticks = this.downsampleTicks(tickArray, tickCount);
+      if (filterZero) {
+        var filteredTicks = _includes(ticks, 0) ? _without(ticks, 0) : ticks;
+        return filteredTicks.length ? filteredTicks : ticks;
+      }
+      return ticks;
+    }
+    return scale.domain();
   }
 };

lib/components/victory-axis/helper-methods.js

@@ -5,10 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _without2 = require("lodash/without");
-
-var _without3 = _interopRequireDefault(_without2);
-
-var _range2 = require("lodash/range");
-
-var _range3 = _interopRequireDefault(_range2);
-
 var _isFunction2 = require("lodash/isFunction");
@@ -26,6 +18,2 @@
 
-var _includes2 = require("lodash/includes");
-
-var _includes3 = _interopRequireDefault(_includes2);
-
 var _axis = require("../../helpers/axis");
@@ -232,5 +220,5 @@
         tickFormat = calculatedValues.tickFormat,
-        stringTicks = calculatedValues.stringTicks,
         anchors = calculatedValues.anchors,
-        domain = calculatedValues.domain;
+        domain = calculatedValues.domain,
+        stringTicks = calculatedValues.stringTicks;
     var _props = props,
@@ -241,3 +229,2 @@ width = _props.width,
         theme = _props.theme,
-        tickValues = _props.tickValues,
         polar = _props.polar,
@@ -257,9 +244,8 @@ padding = _props.padding;
 
-    return ticks.reduce(function (childProps, indexedTick, index) {
-      var tick = stringTicks ? tickValues[indexedTick - 1] : indexedTick;
-
-      var styles = _this2.getEvaluatedStyles(style, tick, index);
+    return ticks.reduce(function (childProps, tick, index) {
+      var originalTick = stringTicks ? stringTicks[index] : tick;
+      var styles = _this2.getEvaluatedStyles(style, originalTick, index);
       var tickLayout = {
         position: _this2.getTickPosition(styles, orientation, isVertical),
-        transform: _this2.getTickTransform(scale(indexedTick), globalTransform, isVertical)
+        transform: _this2.getTickTransform(scale(tick), globalTransform, isVertical)
       };
@@ -270,7 +256,6 @@
         transform: {
-          x: isVertical ? -gridOffset.x + globalTransform.x : scale(indexedTick) + globalTransform.x,
-          y: isVertical ? scale(indexedTick) + globalTransform.y : gridOffset.y + globalTransform.y
+          x: isVertical ? -gridOffset.x + globalTransform.x : scale(tick) + globalTransform.x,
+          y: isVertical ? scale(tick) + globalTransform.y : gridOffset.y + globalTransform.y
         }
       };
-
       childProps[index] = {
@@ -294,6 +279,6 @@ axis: axisProps,
     var labelPadding = this.getLabelPadding(props, style);
-    var stringTicks = _victoryCore.Helpers.stringTicks(props);
+    var stringTicks = _victoryCore.Helpers.stringTicks(props) ? props.tickValues : undefined;
     var scale = this.getScale(props);
     var domain = this.getDomain(props);
-    var ticks = this.getTicks(props, scale);
+    var ticks = _axis2.default.getTicks(props, scale, props.crossAxis);
     var tickFormat = _axis2.default.getTickFormat(props, scale);
@@ -321,3 +306,3 @@ var anchors = this.getAnchors(orientation, isVertical);
     var x = isVertical ? globalTransform.x + sign * labelPadding : (props.width - hPadding) / 2 + padding.left + globalTransform.x;
-    var y = isVertical ? (props.height - vPadding) / 2 + padding.bottom + globalTransform.y : sign * labelPadding + globalTransform.y;
+    var y = isVertical ? (props.height - vPadding) / 2 + padding.top + globalTransform.y : sign * labelPadding + globalTransform.y;
 
@@ -334,23 +319,2 @@ return {
   },
-  getTicks: function (props, scale) {
-    var tickValues = props.tickValues,
-        tickCount = props.tickCount,
-        crossAxis = props.crossAxis;
-
-    if (props.tickValues) {
-      if (_victoryCore.Helpers.stringTicks(props)) {
-        return (0, _range3.default)(1, props.tickValues.length + 1);
-      }
-      return tickValues.length ? tickValues : scale.domain();
-    } else if (scale.ticks && (0, _isFunction3.default)(scale.ticks)) {
-      var scaleTicks = scale.ticks(tickCount);
-      var ticks = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
-      if (crossAxis) {
-        var filteredTicks = (0, _includes3.default)(ticks, 0) ? (0, _without3.default)(ticks, 0) : ticks;
-        return filteredTicks.length ? filteredTicks : ticks;
-      }
-      return ticks;
-    }
-    return scale.domain();
-  },
   getAnchors: function (orientation, isVertical) {
@@ -357,0 +321,0 @@ var anchorOrientation = { top: "end", left: "end", right: "start", bottom: "start" };

lib/components/victory-axis/victory-axis.js

@@ -192,2 +192,3 @@ Object.defineProperty(exports, "__esModule", {
   axisLabelComponent: _propTypes2.default.element,
+  categories: _propTypes2.default.arrayOf(_propTypes2.default.string),
   crossAxis: _propTypes2.default.bool,
@@ -203,2 +204,3 @@ dependentAxis: _propTypes2.default.bool,
   groupComponent: _propTypes2.default.element,
+  invertAxis: _propTypes2.default.bool,
   label: _propTypes2.default.any,
@@ -209,2 +211,3 @@ offsetX: _propTypes2.default.number,
   origin: _propTypes2.default.shape({ x: _propTypes2.default.number, y: _propTypes2.default.number }),
+  stringMap: _propTypes2.default.object,
   style: _propTypes2.default.shape({
@@ -229,3 +232,2 @@ parent: _propTypes2.default.object, axis: _propTypes2.default.object, axisLabel: _propTypes2.default.object,
   theme: _victoryCore.VictoryTheme.grayscale,
-  tickCount: 5,
   containerComponent: _react2.default.createElement(_victoryCore.VictoryContainer, null),
@@ -232,0 +234,0 @@ groupComponent: _react2.default.createElement("g", { role: "presentation" }),

lib/components/victory-bar/helper-methods.js

@@ -5,2 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 
+var _isNaN2 = require("lodash/isNaN");
+
+var _isNaN3 = _interopRequireDefault(_isNaN2);
+
 var _omit2 = require("lodash/omit");
@@ -10,2 +14,6 @@
 
+var _keys2 = require("lodash/keys");
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 var _defaults2 = require("lodash/defaults");
@@ -23,2 +31,4 @@
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 exports.default = {
@@ -35,3 +45,7 @@ getBarPosition: function (props, datum) {
   getBarStyle: function (datum, baseStyle) {
-    var styleData = (0, _omit3.default)(datum, ["xName", "yName", "x", "y", "label", "errorX", "errorY", "eventKey"]);
+    var numKeys = (0, _keys3.default)(datum).filter(function (k) {
+      return (0, _isNaN3.default)(k);
+    });
+    var omitKeys = ["x", "y", "y0", "_x", "_y", "_y0", "name", "label", "eventKey"];
+    var styleData = (0, _omit3.default)(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return (0, _defaults3.default)({}, styleData, baseStyle);
@@ -38,0 +52,0 @@ },

lib/components/victory-candlestick/helper-methods.js

@@ -5,2 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 
+var _isNaN2 = require("lodash/isNaN");
+
+var _isNaN3 = _interopRequireDefault(_isNaN2);
+
 var _defaults2 = require("lodash/defaults");
@@ -14,2 +18,6 @@
 
+var _keys2 = require("lodash/keys");
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 var _sortBy2 = require("lodash/sortBy");
@@ -191,3 +199,7 @@
     style = style || {};
-    var stylesFromData = (0, _omit3.default)(datum, ["x", "y", "size", "name", "label", "open", "close", "high", "low"]);
+    var numKeys = (0, _keys3.default)(datum).filter(function (k) {
+      return (0, _isNaN3.default)(k);
+    });
+    var omitKeys = ["x", "_x", "_y", "_y0", "size", "name", "label", "open", "close", "high", "low", "eventKey"];
+    var stylesFromData = (0, _omit3.default)(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     var candleColor = datum.open > datum.close ? props.candleColors.negative : props.candleColors.positive;
@@ -194,0 +206,0 @@ var fill = datum.fill || style.fill || candleColor;

lib/components/victory-chart/helper-methods.js

@@ -5,14 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _values2 = require("lodash/values");
-
-var _values3 = _interopRequireDefault(_values2);
-
-var _sortBy2 = require("lodash/sortBy");
-
-var _sortBy3 = _interopRequireDefault(_sortBy2);
-
-var _invert2 = require("lodash/invert");
-
-var _invert3 = _interopRequireDefault(_invert2);
-
 var _axis = require("../../helpers/axis");
@@ -36,6 +24,2 @@
 
-var identity = function (x) {
-  return x;
-};
-
 exports.default = {
@@ -96,5 +80,9 @@ getChildComponents: function (props, defaultAxes) {
     var domain = _wrapper2.default.getDomain(props, axis, childComponents);
-    var orientations = _axis2.default.getAxisOrientations(childComponents);
-    return _victoryCore.Domain.orientDomain(domain, orientations, axis);
+    var axisComponent = _axis2.default.getAxisComponent(childComponents, axis);
+    var invertDomain = axisComponent && axisComponent.props && axisComponent.props.invertAxis;
+    return invertDomain ? domain.concat().reverse() : domain;
   },
+
+
+  // eslint-disable-next-line complexity
   getAxisOffset: function (props, calculatedProps) {
@@ -104,16 +92,30 @@ var axisComponents = calculatedProps.axisComponents,
         origin = calculatedProps.origin,
-        originSign = calculatedProps.originSign;
+        domain = calculatedProps.domain,
+        originSign = calculatedProps.originSign,
+        padding = calculatedProps.padding;
+    var top = padding.top,
+        bottom = padding.bottom,
+        left = padding.left,
+        right = padding.right;
     // make the axes line up, and cross when appropriate
 
     var axisOrientations = {
-      x: _axis2.default.getOrientation(axisComponents.x, "x", originSign.x),
-      y: _axis2.default.getOrientation(axisComponents.y, "y", originSign.y)
+      x: _axis2.default.getOrientation(axisComponents.x, "x", originSign.y),
+      y: _axis2.default.getOrientation(axisComponents.y, "y", originSign.x)
     };
     var orientationOffset = {
+      y: axisOrientations.x === "bottom" ? bottom : top,
+      x: axisOrientations.y === "left" ? left : right
+    };
+    var originOffset = {
       x: axisOrientations.y === "left" ? 0 : props.width,
       y: axisOrientations.x === "bottom" ? props.height : 0
     };
+    var originPosition = {
+      x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x),
+      y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y)
+    };
     var calculatedOffset = {
-      x: Math.abs(orientationOffset.x - scale.x(origin.x)),
-      y: Math.abs(orientationOffset.y - scale.y(origin.y))
+      x: originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x,
+      y: originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y
     };
@@ -126,52 +128,2 @@
   },
-  getTicksFromData: function (calculatedProps, axis) {
-    var currentAxis = _victoryCore.Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    var stringMap = calculatedProps.stringMap[currentAxis];
-    // if tickValues are defined for an axis component use them
-    var categoryArray = calculatedProps.categories[currentAxis];
-    var ticksFromCategories = categoryArray && _victoryCore.Collection.containsOnlyStrings(categoryArray) ? categoryArray.map(function (tick) {
-      return stringMap[tick];
-    }) : categoryArray;
-    var ticksFromStringMap = stringMap && (0, _values3.default)(stringMap);
-    // when ticks is undefined, axis will determine its own ticks
-    return ticksFromCategories && ticksFromCategories.length !== 0 ? ticksFromCategories : ticksFromStringMap;
-  },
-  getTicksFromAxis: function (calculatedProps, axis, component) {
-    var tickValues = component.props.tickValues;
-    if (!tickValues) {
-      return undefined;
-    }
-    var currentAxis = _victoryCore.Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    var stringMap = calculatedProps.stringMap[currentAxis];
-    return _victoryCore.Collection.containsOnlyStrings(tickValues) && stringMap ? tickValues.map(function (tick) {
-      return stringMap[tick];
-    }) : tickValues;
-  },
-  getTicks: function () {
-    return this.getTicksFromAxis.apply(this, arguments) || this.getTicksFromData.apply(this, arguments);
-  },
-  getTickFormat: function (component, axis, calculatedProps) {
-    var currentAxis = _victoryCore.Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    var stringMap = calculatedProps.stringMap[currentAxis];
-    var tickValues = component.props.tickValues;
-    var useIdentity = tickValues && !_victoryCore.Collection.containsStrings(tickValues) && !_victoryCore.Collection.containsDates(tickValues);
-    if (useIdentity) {
-      return identity;
-    } else if (stringMap !== null) {
-      var tickValueArray = (0, _sortBy3.default)((0, _values3.default)(stringMap), function (n) {
-        return n;
-      });
-      var invertedStringMap = (0, _invert3.default)(stringMap);
-      var dataNames = tickValueArray.map(function (tick) {
-        return invertedStringMap[tick];
-      });
-      // string ticks should have one tick of padding at the beginning
-      var dataTicks = [""].concat(_toConsumableArray(dataNames), [""]);
-      return function (x) {
-        return dataTicks[x];
-      };
-    } else {
-      return undefined;
-    }
-  },
   createStringMap: function (props, axis, childComponents) {
@@ -178,0 +130,0 @@ var allStrings = _wrapper2.default.getStringsFromChildren(props, axis, childComponents);

lib/components/victory-chart/victory-chart.js

@@ -74,4 +74,4 @@ Object.defineProperty(exports, "__esModule", {
       };
-      _this.setAnimationState = _wrapper2.default.setAnimationState.bind(_this);
     }
+    _this.setAnimationState = _wrapper2.default.setAnimationState.bind(_this);
     _this.events = _wrapper2.default.getAllEvents(props);
@@ -111,13 +111,18 @@ return _this;
           originSign = calculatedProps.originSign,
-          stringMap = calculatedProps.stringMap;
+          stringMap = calculatedProps.stringMap,
+          categories = calculatedProps.categories,
+          horizontal = calculatedProps.horizontal;
 
-      var axis = child.type.getAxis(child.props);
+      var childProps = child.props || {};
+      var axis = child.type.getAxis(childProps);
+      var currentAxis = _axis2.default.getCurrentAxis(axis, horizontal);
+      var otherAxis = axis === "x" ? "y" : "x";
       var axisOffset = _helperMethods2.default.getAxisOffset(props, calculatedProps);
-      var tickValues = _helperMethods2.default.getTicks(calculatedProps, axis, child);
-      var tickFormat = child.props.tickFormat ? _axis2.default.getTickFormat(child.props, scale, stringMap) : _helperMethods2.default.getTickFormat(child, axis, calculatedProps);
       var offsetY = axis === "y" ? undefined : axisOffset.y;
       var offsetX = axis === "x" ? undefined : axisOffset.x;
-      var crossAxis = child.props.crossAxis === false ? false : true;
-      var orientation = _axis2.default.getOrientation(child, axis, originSign[axis]);
+      var crossAxis = childProps.crossAxis === false ? false : true;
+      var orientation = _axis2.default.getOrientation(child, axis, originSign[otherAxis]);
       return {
+        stringMap: stringMap[currentAxis],
+        categories: categories[currentAxis],
         startAngle: props.startAngle,
@@ -128,6 +133,4 @@ endAngle: props.endAngle,
         scale: scale,
-        tickValues: tickValues,
-        tickFormat: tickFormat,
-        offsetY: child.props.offsetY !== undefined ? child.props.offsetY : offsetY,
-        offsetX: child.props.offsetX !== undefined ? child.props.offsetX : offsetX,
+        offsetY: childProps.offsetY !== undefined ? childProps.offsetY : offsetY,
+        offsetX: childProps.offsetX !== undefined ? childProps.offsetX : offsetX,
         crossAxis: crossAxis,
@@ -199,5 +202,7 @@ orientation: orientation
 
+      var padding = _victoryCore.Helpers.getPadding(props);
+
       return {
         axisComponents: axisComponents, categories: categories, domain: domain, range: range, horizontal: horizontal, scale: scale, stringMap: stringMap,
-        style: style, origin: origin, originSign: originSign, defaultDomainPadding: defaultDomainPadding
+        style: style, origin: origin, originSign: originSign, defaultDomainPadding: defaultDomainPadding, padding: padding
       };
@@ -225,3 +230,3 @@ }
           animate: getAnimationProps(props, child, index),
-          padding: _victoryCore.Helpers.getPadding(props),
+          padding: calculatedProps.padding,
           key: index,
@@ -228,0 +233,0 @@ standalone: false

lib/components/victory-errorbar/helper-methods.js

@@ -5,2 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 
+var _isNaN2 = require("lodash/isNaN");
+
+var _isNaN3 = _interopRequireDefault(_isNaN2);
+
 var _sortBy2 = require("lodash/sortBy");
@@ -26,2 +30,6 @@
 
+var _keys2 = require("lodash/keys");
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 var _assign2 = require("lodash/assign");
@@ -262,5 +270,9 @@
   getDataStyles: function (datum, style) {
-    var stylesFromData = (0, _omit3.default)(datum, ["x", "y", "name", "errorX", "errorY", "eventKey"]);
+    var numKeys = (0, _keys3.default)(datum).filter(function (k) {
+      return (0, _isNaN3.default)(k);
+    });
+    var omitKeys = ["x", "y", "_x", "_y", "name", "errorX", "errorY", "eventKey", "label"];
+    var stylesFromData = (0, _omit3.default)(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return (0, _defaults3.default)({}, stylesFromData, style);
   }
 };

lib/components/victory-polar-axis/helper-methods.js

@@ -5,10 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _without2 = require("lodash/without");
-
-var _without3 = _interopRequireDefault(_without2);
-
-var _range2 = require("lodash/range");
-
-var _range3 = _interopRequireDefault(_range2);
-
 var _isFunction2 = require("lodash/isFunction");
@@ -26,6 +18,2 @@
 
-var _includes2 = require("lodash/includes");
-
-var _includes3 = _interopRequireDefault(_includes2);
-
 var _uniqBy2 = require("lodash/uniqBy");
@@ -39,2 +27,6 @@
 
+var _axis = require("../../helpers/axis");
+
+var _axis2 = _interopRequireDefault(_axis);
+
 var _victoryCore = require("victory-core");
@@ -51,9 +43,9 @@
     var axisType = this.getAxisType(props);
-    var stringTicks = _victoryCore.Helpers.stringTicks(props);
+    var stringTicks = _victoryCore.Helpers.stringTicks(props) ? props.tickValues : undefined;
     var domain = this.getDomain(props, axis);
     var range = this.getRange(props, axis);
     var scale = this.getScale(props);
-    var initialTicks = this.getTicks(props, scale);
+    var initialTicks = _axis2.default.getTicks(props, scale);
     var ticks = axisType === "angular" ? this.filterTicks(initialTicks, scale) : initialTicks;
-    var tickFormat = this.getTickFormat(props, scale, ticks);
+    var tickFormat = _axis2.default.getTickFormat(props, scale);
     var radius = this.getRadius(props);
@@ -210,5 +202,8 @@ return {
         scale = calculatedValues.scale,
-        style = calculatedValues.style;
+        style = calculatedValues.style,
+        stringTicks = calculatedValues.stringTicks;
 
-    var _getEvaluatedStyles = this.getEvaluatedStyles(style, tick, index),
+    var originalTick = stringTicks ? stringTicks[index] : tick;
+
+    var _getEvaluatedStyles = this.getEvaluatedStyles(style, originalTick, index),
         tickStyle = _getEvaluatedStyles.tickStyle;
@@ -239,5 +234,9 @@
         style = calculatedValues.style,
-        scale = calculatedValues.scale;
+        scale = calculatedValues.scale,
+        ticks = calculatedValues.ticks,
+        stringTicks = calculatedValues.stringTicks;
 
-    var _getEvaluatedStyles2 = this.getEvaluatedStyles(style, tick, index),
+    var originalTick = stringTicks ? stringTicks[index] : tick;
+
+    var _getEvaluatedStyles2 = this.getEvaluatedStyles(style, originalTick, index),
         labelStyle = _getEvaluatedStyles2.labelStyle;
@@ -259,3 +258,3 @@
       textAnchor: textAnchor,
-      text: tickFormat(tick, index),
+      text: tickFormat(tick, index, ticks),
       x: labelRadius * Math.cos(_victoryCore.Helpers.degreesToRadians(labelAngle)),
@@ -270,3 +269,4 @@ y: -labelRadius * Math.sin(_victoryCore.Helpers.degreesToRadians(labelAngle))
         style = calculatedValues.style,
-        scale = calculatedValues.scale;
+        scale = calculatedValues.scale,
+        stringTicks = calculatedValues.stringTicks;
     var startAngle = props.startAngle,
@@ -277,3 +277,5 @@ endAngle = props.endAngle,
 
-    var _getEvaluatedStyles3 = this.getEvaluatedStyles(style, tick, index),
+    var originalTick = stringTicks ? stringTicks[index] : tick;
+
+    var _getEvaluatedStyles3 = this.getEvaluatedStyles(style, originalTick, index),
         gridStyle = _getEvaluatedStyles3.gridStyle;
@@ -402,19 +404,2 @@
   },
-  getTicks: function (props, scale) {
-    var tickValues = props.tickValues,
-        tickCount = props.tickCount;
-
-    if (tickValues && Array.isArray(tickValues)) {
-      if (_victoryCore.Helpers.stringTicks(props)) {
-        return (0, _range3.default)(1, props.tickValues.length + 1);
-      }
-      return tickValues.length ? tickValues : scale.domain();
-    } else if (scale.ticks && (0, _isFunction3.default)(scale.ticks)) {
-      var scaleTicks = scale.ticks(tickCount);
-      var ticks = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
-      var filteredTicks = (0, _includes3.default)(ticks, 0) ? (0, _without3.default)(ticks, 0) : ticks;
-      return filteredTicks.length ? filteredTicks : ticks;
-    }
-    return scale.domain();
-  },
   filterTicks: function (ticks, scale) {
@@ -425,22 +410,3 @@ var compareTicks = function (t) {
     return (0, _uniqBy3.default)(ticks, compareTicks);
-  },
-  getTickFormat: function (props, scale) {
-    if (props.tickFormat && (0, _isFunction3.default)(props.tickFormat)) {
-      return props.tickFormat;
-    } else if (props.tickFormat && Array.isArray(props.tickFormat)) {
-      return function (x, index) {
-        return props.tickFormat[index];
-      };
-    } else if (_victoryCore.Helpers.stringTicks(props)) {
-      return function (x, index) {
-        return props.tickValues[index];
-      };
-    } else if (scale.tickFormat && (0, _isFunction3.default)(scale.tickFormat)) {
-      return scale.tickFormat();
-    } else {
-      return function (x) {
-        return x;
-      };
-    }
   }
 };

lib/components/victory-polar-axis/victory-polar-axis.js

@@ -163,2 +163,3 @@ Object.defineProperty(exports, "__esModule", {
   axisValue: _propTypes2.default.number,
+  categories: _propTypes2.default.arrayOf(_propTypes2.default.string),
   circularAxisComponent: _propTypes2.default.element,
@@ -178,2 +179,3 @@ circularGridComponent: _propTypes2.default.element,
   startAngle: _propTypes2.default.number,
+  stringMap: _propTypes2.default.object,
   style: _propTypes2.default.shape({
@@ -204,3 +206,2 @@ parent: _propTypes2.default.object, axis: _propTypes2.default.object, axisLabel: _propTypes2.default.object,
   tickComponent: _react2.default.createElement(_victoryCore.Line, { type: "tick" }),
-  tickCount: 5,
   tickLabelComponent: _react2.default.createElement(_victoryCore.VictoryLabel, null)
@@ -207,0 +208,0 @@ };

lib/components/victory-scatter/helper-methods.js

@@ -5,2 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 
+var _isNaN2 = require("lodash/isNaN");
+
+var _isNaN3 = _interopRequireDefault(_isNaN2);
+
 var _defaults2 = require("lodash/defaults");
@@ -18,2 +22,6 @@
 
+var _keys2 = require("lodash/keys");
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 var _assign2 = require("lodash/assign");
@@ -99,3 +107,7 @@
   getDataStyles: function (datum, style) {
-    var stylesFromData = (0, _omit3.default)(datum, ["_x", "_y", "z", "size", "symbol", "name", "label", "eventKey"]);
+    var numKeys = (0, _keys3.default)(datum).filter(function (k) {
+      return (0, _isNaN3.default)(k);
+    });
+    var omitKeys = ["x", "y", "_x", "_y", "z", "size", "symbol", "eventKey", "label"];
+    var stylesFromData = (0, _omit3.default)(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return (0, _defaults3.default)({}, stylesFromData, style);
@@ -102,0 +114,0 @@ },

lib/components/victory-voronoi/helper-methods.js

@@ -5,2 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 
+var _isNaN2 = require("lodash/isNaN");
+
+var _isNaN3 = _interopRequireDefault(_isNaN2);
+
 var _without2 = require("lodash/without");
@@ -18,2 +22,6 @@
 
+var _keys2 = require("lodash/keys");
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 var _assign2 = require("lodash/assign");
@@ -119,5 +127,9 @@
   getDataStyles: function (datum, style) {
-    var stylesFromData = (0, _omit3.default)(datum, ["_x", "_y", "name", "label"]);
+    var numKeys = (0, _keys3.default)(datum).filter(function (k) {
+      return (0, _isNaN3.default)(k);
+    });
+    var omitKeys = ["x", "y", "_x", "_y", "eventKey", "label"];
+    var stylesFromData = (0, _omit3.default)(datum, [].concat(omitKeys, _toConsumableArray(numKeys)));
     return (0, _defaults3.default)({}, stylesFromData, style);
   }
 };

lib/helpers/axis.js

@@ -5,2 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 
+var _without2 = require("lodash/without");
+
+var _without3 = _interopRequireDefault(_without2);
+
+var _includes2 = require("lodash/includes");
+
+var _includes3 = _interopRequireDefault(_includes2);
+
+var _values2 = require("lodash/values");
+
+var _values3 = _interopRequireDefault(_values2);
+
+var _sortBy2 = require("lodash/sortBy");
+
+var _sortBy3 = _interopRequireDefault(_sortBy2);
+
+var _range2 = require("lodash/range");
+
+var _range3 = _interopRequireDefault(_range2);
+
+var _uniq2 = require("lodash/uniq");
+
+var _uniq3 = _interopRequireDefault(_uniq2);
+
 var _invert2 = require("lodash/invert");
@@ -167,14 +191,2 @@
   /**
-   * @param {Array} childComponents: an array of children
-   * @returns {Object} an object with orientations specified for x and y
-   */
-  getAxisOrientations: function (childComponents) {
-    return {
-      x: this.getOrientation(this.getAxisComponent(childComponents, "x"), "x"),
-      y: this.getOrientation(this.getAxisComponent(childComponents, "y"), "y")
-    };
-  },
-
-
-  /**
    * @param {Object} props: axis component props
@@ -197,24 +209,51 @@ * @returns {Boolean} true when the axis is vertical
   },
-  getTickFormat: function (props, scale, stringMap) {
-    var stringTicks = this.stringTicks(props);
-    var axis = this.getAxis(props);
-    var applyStringTicks = function (tick, index, ticks) {
-      var invertedStringMap = (0, _invert3.default)(stringMap[axis]);
-      var stringTickArray = ticks.map(function (t) {
-        return invertedStringMap[t];
+  getDefaultTickFormat: function (props) {
+    var tickValues = props.tickValues,
+        stringMap = props.stringMap;
+
+    var fallbackFormat = tickValues && !_victoryCore.Collection.containsDates(tickValues) ? function (x) {
+      return x;
+    } : undefined;
+    if (!stringMap) {
+      return this.stringTicks(props) ? function (x, index) {
+        return tickValues[index];
+      } : fallbackFormat;
+    } else {
+      var invertedStringMap = stringMap && (0, _invert3.default)(stringMap);
+      var tickValueArray = (0, _sortBy3.default)((0, _values3.default)(stringMap), function (n) {
+        return n;
       });
-      return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
-    };
-    if (props.tickFormat && (0, _isFunction3.default)(props.tickFormat)) {
-      return stringMap && stringMap[axis] ? applyStringTicks : props.tickFormat;
-    } else if (props.tickFormat && Array.isArray(props.tickFormat)) {
-      return function (x, index) {
-        return props.tickFormat[index];
+      var dataNames = tickValueArray.map(function (tick) {
+        return invertedStringMap[tick];
+      });
+      // string ticks should have one tick of padding at the beginning
+      var dataTicks = [""].concat(_toConsumableArray(dataNames), [""]);
+      return function (x) {
+        return dataTicks[x];
       };
-    } else if (stringTicks) {
+    }
+  },
+  getTickFormat: function (props, scale) {
+    var tickFormat = props.tickFormat,
+        stringMap = props.stringMap;
+
+    if (!tickFormat) {
+      var defaultTickFormat = this.getDefaultTickFormat(props);
+      var scaleTickFormat = scale.tickFormat && (0, _isFunction3.default)(scale.tickFormat) ? scale.tickFormat() : function (x) {
+        return x;
+      };
+      return defaultTickFormat || scaleTickFormat;
+    } else if (tickFormat && Array.isArray(tickFormat)) {
       return function (x, index) {
-        return props.tickValues[index];
+        return tickFormat[index];
       };
-    } else if (scale.tickFormat && (0, _isFunction3.default)(scale.tickFormat)) {
-      return scale.tickFormat();
+    } else if (tickFormat && (0, _isFunction3.default)(tickFormat)) {
+      var applyStringTicks = function (tick, index, ticks) {
+        var invertedStringMap = (0, _invert3.default)(stringMap);
+        var stringTickArray = ticks.map(function (t) {
+          return invertedStringMap[t];
+        });
+        return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
+      };
+      return stringMap ? applyStringTicks : tickFormat;
     } else {
@@ -225,3 +264,68 @@ return function (x) {
     }
+  },
+  getStringTicks: function (props) {
+    var stringMap = props.stringMap,
+        categories = props.categories;
+
+    var ticksFromCategories = categories && _victoryCore.Collection.containsOnlyStrings(categories) ? categories.map(function (tick) {
+      return stringMap[tick];
+    }) : undefined;
+    var ticksFromStringMap = stringMap && (0, _values3.default)(stringMap);
+    return ticksFromCategories && ticksFromCategories.length !== 0 ? ticksFromCategories : ticksFromStringMap;
+  },
+  getTickArray: function (props) {
+    var tickValues = props.tickValues,
+        tickFormat = props.tickFormat,
+        stringMap = props.stringMap;
+
+    var getTicksFromFormat = function () {
+      if (!tickFormat || !Array.isArray(tickFormat)) {
+        return undefined;
+      }
+      return _victoryCore.Collection.containsStrings(tickFormat) ? tickFormat.map(function (t, i) {
+        return i;
+      }) : tickFormat;
+    };
+
+    var ticks = tickValues;
+    if (stringMap) {
+      ticks = this.getStringTicks(props);
+    }
+    if (tickValues && _victoryCore.Collection.containsStrings(tickValues)) {
+      ticks = stringMap ? tickValues.map(function (tick) {
+        return stringMap[tick];
+      }) : (0, _range3.default)(1, tickValues.length + 1);
+    }
+    var tickArray = ticks ? (0, _uniq3.default)(ticks) : getTicksFromFormat(props);
+    return Array.isArray(tickArray) && tickArray.length ? tickArray : undefined;
+  },
+  downsampleTicks: function (ticks, tickCount) {
+    if (!tickCount || !Array.isArray(ticks) || ticks.length <= tickCount) {
+      return ticks;
+    }
+    var k = Math.floor(ticks.length / tickCount);
+    return ticks.filter(function (d, i) {
+      return i % k === 0;
+    });
+  },
+  getTicks: function (props, scale, filterZero) {
+    var tickCount = props.tickCount;
+
+    var tickValues = this.getTickArray(props);
+    if (tickValues) {
+      return this.downsampleTicks(tickValues, tickCount);
+    } else if (scale.ticks && (0, _isFunction3.default)(scale.ticks)) {
+      // eslint-disable-next-line no-magic-numbers
+      var defaultTickCount = tickCount || 5;
+      var scaleTicks = scale.ticks(defaultTickCount);
+      var tickArray = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
+      var ticks = this.downsampleTicks(tickArray, tickCount);
+      if (filterZero) {
+        var filteredTicks = (0, _includes3.default)(ticks, 0) ? (0, _without3.default)(ticks, 0) : ticks;
+        return filteredTicks.length ? filteredTicks : ticks;
+      }
+      return ticks;
+    }
+    return scale.domain();
   }
 };

package.json

 {
   "name": "victory-chart",
-  "version": "23.0.1",
+  "version": "24.0.0",
   "description": "Chart Component for Victory",
@@ -35,3 +35,3 @@ "main": "lib/index.js",
     "lodash": "^4.17.4",
-    "victory-core": "^19.0.0"
+    "victory-core": "^20.0.0"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

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

@@ -1,2 +0,2 @@
-import { includes, defaults, defaultsDeep, isFunction, range, without } from "lodash";
+import { defaults, defaultsDeep, isFunction } from "lodash";
 import Axis from "../../helpers/axis";
@@ -191,5 +191,5 @@ import { Helpers, Scale, Domain } from "victory-core";
     const {
-      style, orientation, isVertical, scale, ticks, tickFormat, stringTicks, anchors, domain
+      style, orientation, isVertical, scale, ticks, tickFormat, anchors, domain, stringTicks
     } = calculatedValues;
-    const { width, height, standalone, theme, tickValues, polar, padding } = props;
+    const { width, height, standalone, theme, polar, padding } = props;
     const {
@@ -205,9 +205,8 @@ globalTransform, gridOffset, gridEdge
 
-    return ticks.reduce((childProps, indexedTick, index) => {
-      const tick = stringTicks ? tickValues[indexedTick - 1] : indexedTick;
-
-      const styles = this.getEvaluatedStyles(style, tick, index);
+    return ticks.reduce((childProps, tick, index) => {
+      const originalTick = stringTicks ? stringTicks[index] : tick;
+      const styles = this.getEvaluatedStyles(style, originalTick, index);
       const tickLayout = {
         position: this.getTickPosition(styles, orientation, isVertical),
-        transform: this.getTickTransform(scale(indexedTick), globalTransform, isVertical)
+        transform: this.getTickTransform(scale(tick), globalTransform, isVertical)
       };
@@ -219,8 +218,7 @@
           x: isVertical ?
-            -gridOffset.x + globalTransform.x : scale(indexedTick) + globalTransform.x,
+            -gridOffset.x + globalTransform.x : scale(tick) + globalTransform.x,
           y: isVertical ?
-            scale(indexedTick) + globalTransform.y : gridOffset.y + globalTransform.y
+            scale(tick) + globalTransform.y : gridOffset.y + globalTransform.y
         }
       };
-
       childProps[index] = {
@@ -247,6 +245,6 @@ axis: axisProps,
     const labelPadding = this.getLabelPadding(props, style);
-    const stringTicks = Helpers.stringTicks(props);
+    const stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined;
     const scale = this.getScale(props);
     const domain = this.getDomain(props);
-    const ticks = this.getTicks(props, scale);
+    const ticks = Axis.getTicks(props, scale, props.crossAxis);
     const tickFormat = Axis.getTickFormat(props, scale);
@@ -272,3 +270,3 @@ const anchors = this.getAnchors(orientation, isVertical);
     const y = isVertical ?
-      ((props.height - vPadding) / 2) + padding.bottom + globalTransform.y :
+      ((props.height - vPadding) / 2) + padding.top + globalTransform.y :
       (sign * labelPadding) + globalTransform.y;
@@ -287,21 +285,2 @@
 
-  getTicks(props, scale) {
-    const { tickValues, tickCount, crossAxis } = props;
-    if (props.tickValues) {
-      if (Helpers.stringTicks(props)) {
-        return range(1, props.tickValues.length + 1);
-      }
-      return tickValues.length ? tickValues : scale.domain();
-    } else if (scale.ticks && isFunction(scale.ticks)) {
-      const scaleTicks = scale.ticks(tickCount);
-      const ticks = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
-      if (crossAxis) {
-        const filteredTicks = includes(ticks, 0) ? without(ticks, 0) : ticks;
-        return filteredTicks.length ? filteredTicks : ticks;
-      }
-      return ticks;
-    }
-    return scale.domain();
-  },
-
   getAnchors(orientation, isVertical) {
@@ -308,0 +287,0 @@ const anchorOrientation = { top: "end", left: "end", right: "start", bottom: "start" };

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

@@ -53,2 +53,3 @@ import PropTypes from "prop-types";
     axisLabelComponent: PropTypes.element,
+    categories: PropTypes.arrayOf(PropTypes.string),
     crossAxis: PropTypes.bool,
@@ -68,2 +69,3 @@ dependentAxis: PropTypes.bool,
     groupComponent: PropTypes.element,
+    invertAxis: PropTypes.bool,
     label: PropTypes.any,
@@ -74,2 +76,3 @@ offsetX: PropTypes.number,
     origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    stringMap: PropTypes.object,
     style: PropTypes.shape({
@@ -97,3 +100,2 @@ parent: PropTypes.object, axis: PropTypes.object, axisLabel: PropTypes.object,
     theme: VictoryTheme.grayscale,
-    tickCount: 5,
     containerComponent: <VictoryContainer />,
@@ -100,0 +102,0 @@ groupComponent: <g role="presentation"/>,

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

@@ -1,2 +0,2 @@
-import { assign, defaults, omit } from "lodash";
+import { assign, defaults, keys, omit, isNaN } from "lodash";
 import { Helpers, LabelHelpers, Data, Domain, Scale } from "victory-core";
@@ -18,5 +18,7 @@
   getBarStyle(datum, baseStyle) {
-    const styleData = omit(datum, [
-      "xName", "yName", "x", "y", "label", "errorX", "errorY", "eventKey"
-    ]);
+    const numKeys = keys(datum).filter((k) => isNaN(k));
+    const omitKeys = [
+      "x", "y", "y0", "_x", "_y", "_y0", "name", "label", "eventKey"
+    ];
+    const styleData = omit(datum, [...omitKeys, ...numKeys]);
     return defaults({}, styleData, baseStyle);
@@ -23,0 +25,0 @@ },

src/components/victory-candlestick/helper-methods.js

@@ -1,2 +0,2 @@
-import { assign, sortBy, omit, defaults } from "lodash";
+import { assign, sortBy, keys, omit, defaults, isNaN } from "lodash";
 import { Helpers, LabelHelpers, Scale, Domain, Data } from "victory-core";
@@ -158,5 +158,7 @@
     style = style || {};
-    const stylesFromData = omit(datum, [
-      "x", "y", "size", "name", "label", "open", "close", "high", "low"
-    ]);
+    const numKeys = keys(datum).filter((k) => isNaN(k));
+    const omitKeys = [
+      "x", "_x", "_y", "_y0", "size", "name", "label", "open", "close", "high", "low", "eventKey"
+    ];
+    const stylesFromData = omit(datum, [...omitKeys, ...numKeys]);
     const candleColor = datum.open > datum.close ?
@@ -163,0 +165,0 @@ props.candleColors.negative : props.candleColors.positive;

src/components/victory-chart/helper-methods.js

@@ -1,8 +0,6 @@
-import { invert, sortBy, values } from "lodash";
 import Axis from "../../helpers/axis";
 import Wrapper from "../../helpers/wrapper";
 import React from "react";
-import { Helpers, Collection, Log, Domain } from "victory-core";
+import { Collection, Log } from "victory-core";
 
-const identity = (x) => x;
 
@@ -70,20 +68,31 @@ export default {
     const domain = Wrapper.getDomain(props, axis, childComponents);
-    const orientations = Axis.getAxisOrientations(childComponents);
-    return Domain.orientDomain(domain, orientations, axis);
+    const axisComponent = Axis.getAxisComponent(childComponents, axis);
+    const invertDomain = axisComponent && axisComponent.props && axisComponent.props.invertAxis;
+    return invertDomain ? domain.concat().reverse() : domain;
   },
 
+  // eslint-disable-next-line complexity
   getAxisOffset(props, calculatedProps) {
-    const { axisComponents, scale, origin, originSign } = calculatedProps;
+    const { axisComponents, scale, origin, domain, originSign, padding } = calculatedProps;
+    const { top, bottom, left, right } = padding;
     // make the axes line up, and cross when appropriate
     const axisOrientations = {
-      x: Axis.getOrientation(axisComponents.x, "x", originSign.x),
-      y: Axis.getOrientation(axisComponents.y, "y", originSign.y)
+      x: Axis.getOrientation(axisComponents.x, "x", originSign.y),
+      y: Axis.getOrientation(axisComponents.y, "y", originSign.x)
     };
     const orientationOffset = {
+      y: axisOrientations.x === "bottom" ? bottom : top,
+      x: axisOrientations.y === "left" ? left : right
+    };
+    const originOffset = {
       x: axisOrientations.y === "left" ? 0 : props.width,
       y: axisOrientations.x === "bottom" ? props.height : 0
     };
+    const originPosition = {
+      x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x),
+      y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y)
+    };
     const calculatedOffset = {
-      x: Math.abs(orientationOffset.x - scale.x(origin.x)),
-      y: Math.abs(orientationOffset.y - scale.y(origin.y))
+      x: originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x,
+      y: originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y
     };
@@ -99,50 +108,2 @@
 
-  getTicksFromData(calculatedProps, axis) {
-    const currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    const stringMap = calculatedProps.stringMap[currentAxis];
-    // if tickValues are defined for an axis component use them
-    const categoryArray = calculatedProps.categories[currentAxis];
-    const ticksFromCategories = categoryArray && Collection.containsOnlyStrings(categoryArray) ?
-      categoryArray.map((tick) => stringMap[tick]) : categoryArray;
-    const ticksFromStringMap = stringMap && values(stringMap);
-    // when ticks is undefined, axis will determine its own ticks
-    return ticksFromCategories && ticksFromCategories.length !== 0 ?
-      ticksFromCategories : ticksFromStringMap;
-  },
-
-  getTicksFromAxis(calculatedProps, axis, component) {
-    const tickValues = component.props.tickValues;
-    if (!tickValues) {
-      return undefined;
-    }
-    const currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    const stringMap = calculatedProps.stringMap[currentAxis];
-    return Collection.containsOnlyStrings(tickValues) && stringMap ?
-      tickValues.map((tick) => stringMap[tick]) : tickValues;
-  },
-
-  getTicks(...args) {
-    return this.getTicksFromAxis(...args) || this.getTicksFromData(...args);
-  },
-
-  getTickFormat(component, axis, calculatedProps) {
-    const currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
-    const stringMap = calculatedProps.stringMap[currentAxis];
-    const tickValues = component.props.tickValues;
-    const useIdentity = tickValues && !Collection.containsStrings(tickValues) &&
-      !Collection.containsDates(tickValues);
-    if (useIdentity) {
-      return identity;
-    } else if (stringMap !== null) {
-      const tickValueArray = sortBy(values(stringMap), (n) => n);
-      const invertedStringMap = invert(stringMap);
-      const dataNames = tickValueArray.map((tick) => invertedStringMap[tick]);
-      // string ticks should have one tick of padding at the beginning
-      const dataTicks = ["", ...dataNames, ""];
-      return (x) => dataTicks[x];
-    } else {
-      return undefined;
-    }
-  },
-
   createStringMap(props, axis, childComponents) {
@@ -149,0 +110,0 @@ const allStrings = Wrapper.getStringsFromChildren(props, axis, childComponents);

src/components/victory-chart/victory-chart.js

@@ -70,4 +70,4 @@ import { defaults } from "lodash";
       };
-      this.setAnimationState = Wrapper.setAnimationState.bind(this);
     }
+    this.setAnimationState = Wrapper.setAnimationState.bind(this);
     this.events = Wrapper.getAllEvents(props);
@@ -102,14 +102,15 @@ }
   getAxisProps(child, props, calculatedProps) {
-    const { domain, scale, originSign, stringMap } = calculatedProps;
-    const axis = child.type.getAxis(child.props);
+    const { domain, scale, originSign, stringMap, categories, horizontal } = calculatedProps;
+    const childProps = child.props || {};
+    const axis = child.type.getAxis(childProps);
+    const currentAxis = Axis.getCurrentAxis(axis, horizontal);
+    const otherAxis = axis === "x" ? "y" : "x";
     const axisOffset = ChartHelpers.getAxisOffset(props, calculatedProps);
-    const tickValues = ChartHelpers.getTicks(calculatedProps, axis, child);
-    const tickFormat = child.props.tickFormat ?
-      Axis.getTickFormat(child.props, scale, stringMap) :
-      ChartHelpers.getTickFormat(child, axis, calculatedProps);
     const offsetY = axis === "y" ? undefined : axisOffset.y;
     const offsetX = axis === "x" ? undefined : axisOffset.x;
-    const crossAxis = child.props.crossAxis === false ? false : true;
-    const orientation = Axis.getOrientation(child, axis, originSign[axis]);
+    const crossAxis = childProps.crossAxis === false ? false : true;
+    const orientation = Axis.getOrientation(child, axis, originSign[otherAxis]);
     return {
+      stringMap: stringMap[currentAxis],
+      categories: categories[currentAxis],
       startAngle: props.startAngle,
@@ -120,6 +121,4 @@ endAngle: props.endAngle,
       scale,
-      tickValues,
-      tickFormat,
-      offsetY: child.props.offsetY !== undefined ? child.props.offsetY : offsetY,
-      offsetX: child.props.offsetX !== undefined ? child.props.offsetX : offsetX,
+      offsetY: childProps.offsetY !== undefined ? childProps.offsetY : offsetY,
+      offsetX: childProps.offsetX !== undefined ? childProps.offsetX : offsetX,
       crossAxis,
@@ -189,5 +188,7 @@ orientation
 
+    const padding = Helpers.getPadding(props);
+
     return {
       axisComponents, categories, domain, range, horizontal, scale, stringMap,
-      style, origin, originSign, defaultDomainPadding
+      style, origin, originSign, defaultDomainPadding, padding
     };
@@ -210,3 +211,3 @@ }
         animate: getAnimationProps(props, child, index),
-        padding: Helpers.getPadding(props),
+        padding: calculatedProps.padding,
         key: index,
@@ -213,0 +214,0 @@ standalone: false

src/components/victory-errorbar/helper-methods.js

@@ -1,2 +0,2 @@
-import { assign, omit, defaults, isArray, flatten, sortBy } from "lodash";
+import { assign, keys, omit, defaults, isArray, flatten, sortBy, isNaN } from "lodash";
 import { Helpers, LabelHelpers, Scale, Domain, Data } from "victory-core";
@@ -219,7 +219,9 @@
   getDataStyles(datum, style) {
-    const stylesFromData = omit(datum, [
-      "x", "y", "name", "errorX", "errorY", "eventKey"
-    ]);
+    const numKeys = keys(datum).filter((k) => isNaN(k));
+    const omitKeys = [
+      "x", "y", "_x", "_y", "name", "errorX", "errorY", "eventKey", "label"
+    ];
+    const stylesFromData = omit(datum, [...omitKeys, ...numKeys]);
     return defaults({}, stylesFromData, style);
   }
 };

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

@@ -1,4 +0,3 @@
-import {
-  assign, uniqBy, includes, defaults, defaultsDeep, isFunction, range as lodashRange, without
-} from "lodash";
+import { assign, uniqBy, defaults, defaultsDeep, isFunction } from "lodash";
+import Axis from "../../helpers/axis";
 import { Helpers, LabelHelpers, Scale, Domain, Collection } from "victory-core";
@@ -13,9 +12,9 @@
     const axisType = this.getAxisType(props);
-    const stringTicks = Helpers.stringTicks(props);
+    const stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined;
     const domain = this.getDomain(props, axis);
     const range = this.getRange(props, axis);
     const scale = this.getScale(props);
-    const initialTicks = this.getTicks(props, scale);
+    const initialTicks = Axis.getTicks(props, scale);
     const ticks = axisType === "angular" ? this.filterTicks(initialTicks, scale) : initialTicks;
-    const tickFormat = this.getTickFormat(props, scale, ticks);
+    const tickFormat = Axis.getTickFormat(props, scale);
     const radius = this.getRadius(props);
@@ -156,4 +155,5 @@ return {
   getTickProps(props, calculatedValues, tick, index) { //eslint-disable-line max-params
-    const { axisType, radius, scale, style } = calculatedValues;
-    const { tickStyle } = this.getEvaluatedStyles(style, tick, index);
+    const { axisType, radius, scale, style, stringTicks } = calculatedValues;
+    const originalTick = stringTicks ? stringTicks[index] : tick;
+    const { tickStyle } = this.getEvaluatedStyles(style, originalTick, index);
     const tickPadding = tickStyle.padding || 0;
@@ -179,4 +179,5 @@ const angularPadding = tickPadding; // TODO: do some geometry
   getTickLabelProps(props, calculatedValues, tick, index) { //eslint-disable-line max-params
-    const { axisType, radius, tickFormat, style, scale } = calculatedValues;
-    const { labelStyle } = this.getEvaluatedStyles(style, tick, index);
+    const { axisType, radius, tickFormat, style, scale, ticks, stringTicks } = calculatedValues;
+    const originalTick = stringTicks ? stringTicks[index] : tick;
+    const { labelStyle } = this.getEvaluatedStyles(style, originalTick, index);
     const { tickLabelComponent } = props;
@@ -199,3 +200,3 @@ const labelPlacement = tickLabelComponent.props && tickLabelComponent.props.labelPlacement ?
       textAnchor,
-      text: tickFormat(tick, index),
+      text: tickFormat(tick, index, ticks),
       x: labelRadius * Math.cos(Helpers.degreesToRadians(labelAngle)),
@@ -207,5 +208,6 @@ y: -labelRadius * Math.sin(Helpers.degreesToRadians(labelAngle))
   getGridProps(props, calculatedValues, tick, index) { //eslint-disable-line max-params
-    const { axisType, radius, style, scale } = calculatedValues;
+    const { axisType, radius, style, scale, stringTicks } = calculatedValues;
     const { startAngle, endAngle, innerRadius = 0 } = props;
-    const { gridStyle } = this.getEvaluatedStyles(style, tick, index);
+    const originalTick = stringTicks ? stringTicks[index] : tick;
+    const { gridStyle } = this.getEvaluatedStyles(style, originalTick, index);
     const angle = scale(tick);
@@ -332,36 +334,6 @@ return axisType === "angular" ?
 
-  getTicks(props, scale) {
-    const { tickValues, tickCount } = props;
-    if (tickValues && Array.isArray(tickValues)) {
-      if (Helpers.stringTicks(props)) {
-        return lodashRange(1, props.tickValues.length + 1);
-      }
-      return tickValues.length ? tickValues : scale.domain();
-    } else if (scale.ticks && isFunction(scale.ticks)) {
-      const scaleTicks = scale.ticks(tickCount);
-      const ticks = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
-      const filteredTicks = includes(ticks, 0) ? without(ticks, 0) : ticks;
-      return filteredTicks.length ? filteredTicks : ticks;
-    }
-    return scale.domain();
-  },
-
   filterTicks(ticks, scale) {
     const compareTicks = (t) => scale(t) % (2 * Math.PI);
     return uniqBy(ticks, compareTicks);
-  },
-
-  getTickFormat(props, scale) {
-    if (props.tickFormat && isFunction(props.tickFormat)) {
-      return props.tickFormat;
-    } else if (props.tickFormat && Array.isArray(props.tickFormat)) {
-      return (x, index) => props.tickFormat[index];
-    } else if (Helpers.stringTicks(props)) {
-      return (x, index) => props.tickValues[index];
-    } else if (scale.tickFormat && isFunction(scale.tickFormat)) {
-      return scale.tickFormat();
-    } else {
-      return (x) => x;
-    }
   }
 };

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

@@ -52,2 +52,3 @@ import React from "react";
     axisValue: PropTypes.number,
+    categories: PropTypes.arrayOf(PropTypes.string),
     circularAxisComponent: PropTypes.element,
@@ -71,2 +72,3 @@ circularGridComponent: PropTypes.element,
     startAngle: PropTypes.number,
+    stringMap: PropTypes.object,
     style: PropTypes.shape({
@@ -100,3 +102,2 @@ parent: PropTypes.object, axis: PropTypes.object, axisLabel: PropTypes.object,
     tickComponent: <Line type={"tick"}/>,
-    tickCount: 5,
     tickLabelComponent: <VictoryLabel/>
@@ -103,0 +104,0 @@ };

src/components/victory-scatter/helper-methods.js

@@ -1,2 +0,2 @@
-import { assign, values, omit, defaults } from "lodash";
+import { assign, keys, values, omit, defaults, isNaN } from "lodash";
 import { Helpers, LabelHelpers, Data, Domain, Scale } from "victory-core";
@@ -60,5 +60,7 @@
   getDataStyles(datum, style) {
-    const stylesFromData = omit(datum, [
-      "_x", "_y", "z", "size", "symbol", "name", "label", "eventKey"
-    ]);
+    const numKeys = keys(datum).filter((k) => isNaN(k));
+    const omitKeys = [
+      "x", "y", "_x", "_y", "z", "size", "symbol", "eventKey", "label"
+    ];
+    const stylesFromData = omit(datum, [...omitKeys, ...numKeys]);
     return defaults({}, stylesFromData, style);
@@ -65,0 +67,0 @@ },

src/components/victory-voronoi/helper-methods.js

@@ -1,2 +0,2 @@
-import { assign, omit, defaults, without } from "lodash";
+import { assign, keys, omit, defaults, without, isNaN } from "lodash";
 import { Helpers, LabelHelpers, Scale, Domain, Data } from "victory-core";
@@ -76,7 +76,9 @@ import { voronoi as d3Voronoi } from "d3-voronoi";
   getDataStyles(datum, style) {
-    const stylesFromData = omit(datum, [
-      "_x", "_y", "name", "label"
-    ]);
+    const numKeys = keys(datum).filter((k) => isNaN(k));
+    const omitKeys = [
+      "x", "y", "_x", "_y", "eventKey", "label"
+    ];
+    const stylesFromData = omit(datum, [...omitKeys, ...numKeys]);
     return defaults({}, stylesFromData, style);
   }
 };

src/helpers/axis.js

 import { Collection } from "victory-core";
-import { identity, isFunction, invert } from "lodash";
+import {
+  identity, isFunction, invert, uniq, range, sortBy, values, includes, without
+} from "lodash";
 import React from "react";
@@ -143,13 +145,2 @@
   /**
-   * @param {Array} childComponents: an array of children
-   * @returns {Object} an object with orientations specified for x and y
-   */
-  getAxisOrientations(childComponents) {
-    return {
-      x: this.getOrientation(this.getAxisComponent(childComponents, "x"), "x"),
-      y: this.getOrientation(this.getAxisComponent(childComponents, "y"), "y")
-    };
-  },
-
-  /**
    * @param {Object} props: axis component props
@@ -172,22 +163,99 @@ * @returns {Boolean} true when the axis is vertical
 
-  getTickFormat(props, scale, stringMap) {
-    const stringTicks = this.stringTicks(props);
-    const axis = this.getAxis(props);
-    const applyStringTicks = (tick, index, ticks) => {
-      const invertedStringMap = invert(stringMap[axis]);
-      const stringTickArray = ticks.map((t) => invertedStringMap[t]);
-      return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
-    };
-    if (props.tickFormat && isFunction(props.tickFormat)) {
-      return stringMap && stringMap[axis] ? applyStringTicks : props.tickFormat;
-    } else if (props.tickFormat && Array.isArray(props.tickFormat)) {
-      return (x, index) => props.tickFormat[index];
-    } else if (stringTicks) {
-      return (x, index) => props.tickValues[index];
-    } else if (scale.tickFormat && isFunction(scale.tickFormat)) {
-      return scale.tickFormat();
+  getDefaultTickFormat(props) {
+    const { tickValues, stringMap } = props;
+    const fallbackFormat = tickValues && !Collection.containsDates(tickValues) ?
+      (x) => x : undefined;
+    if (!stringMap) {
+      return this.stringTicks(props) ? (x, index) => tickValues[index] : fallbackFormat;
     } else {
+      const invertedStringMap = stringMap && invert(stringMap);
+      const tickValueArray = sortBy(values(stringMap), (n) => n);
+      const dataNames = tickValueArray.map((tick) => invertedStringMap[tick]);
+      // string ticks should have one tick of padding at the beginning
+      const dataTicks = ["", ...dataNames, ""];
+      return (x) => dataTicks[x];
+    }
+  },
+
+  getTickFormat(props, scale) {
+    const { tickFormat, stringMap } = props;
+    if (!tickFormat) {
+      const defaultTickFormat = this.getDefaultTickFormat(props);
+      const scaleTickFormat = scale.tickFormat && isFunction(scale.tickFormat) ?
+        scale.tickFormat() : (x) => x;
+      return defaultTickFormat || scaleTickFormat;
+    } else if (tickFormat && Array.isArray(tickFormat)) {
+      return (x, index) => tickFormat[index];
+    } else if (tickFormat && isFunction(tickFormat)) {
+      const applyStringTicks = (tick, index, ticks) => {
+        const invertedStringMap = invert(stringMap);
+        const stringTickArray = ticks.map((t) => invertedStringMap[t]);
+        return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
+      };
+      return stringMap ? applyStringTicks : tickFormat;
+    } else {
       return (x) => x;
     }
+  },
+
+  getStringTicks(props) {
+    const { stringMap, categories } = props;
+    const ticksFromCategories = categories && Collection.containsOnlyStrings(categories) ?
+      categories.map((tick) => stringMap[tick]) : undefined;
+    const ticksFromStringMap = stringMap && values(stringMap);
+    return ticksFromCategories && ticksFromCategories.length !== 0 ?
+      ticksFromCategories : ticksFromStringMap;
+  },
+
+
+  getTickArray(props) {
+    const { tickValues, tickFormat, stringMap } = props;
+    const getTicksFromFormat = () => {
+      if (!tickFormat || !Array.isArray(tickFormat)) {
+        return undefined;
+      }
+      return Collection.containsStrings(tickFormat) ? tickFormat.map((t, i) => i) : tickFormat;
+    };
+
+    let ticks = tickValues;
+    if (stringMap) {
+      ticks = this.getStringTicks(props);
+    }
+    if (tickValues && Collection.containsStrings(tickValues)) {
+      ticks = stringMap ?
+        tickValues.map((tick) => stringMap[tick]) :
+        range(1, tickValues.length + 1);
+    }
+    const tickArray = ticks ? uniq(ticks) : getTicksFromFormat(props);
+    return Array.isArray(tickArray) && tickArray.length ? tickArray : undefined;
+  },
+
+  downsampleTicks(ticks, tickCount) {
+    if (!tickCount || !Array.isArray(ticks) || ticks.length <= tickCount) {
+      return ticks;
+    }
+    const k = Math.floor(ticks.length / tickCount);
+    return ticks.filter((d, i) => i % k === 0);
+  },
+
+  getTicks(props, scale, filterZero) {
+    const { tickCount } = props;
+    const tickValues = this.getTickArray(props);
+    if (tickValues) {
+      return this.downsampleTicks(tickValues, tickCount);
+    } else if (scale.ticks && isFunction(scale.ticks)) {
+      // eslint-disable-next-line no-magic-numbers
+      const defaultTickCount = tickCount || 5;
+      const scaleTicks = scale.ticks(defaultTickCount);
+      const tickArray = Array.isArray(scaleTicks) && scaleTicks.length ?
+        scaleTicks : scale.domain();
+      const ticks = this.downsampleTicks(tickArray, tickCount);
+      if (filterZero) {
+        const filteredTicks = includes(ticks, 0) ? without(ticks, 0) : ticks;
+        return filteredTicks.length ? filteredTicks : ticks;
+      }
+      return ticks;
+    }
+    return scale.domain();
   }
 };

No alert changes

Improved metrics

Total package byte prevSize

2810436

increased by0.53%

Lines of code

50785

increased by0.42%

Dependency changes

• + Addedvictory-core@20.6.0(transitive)

• - Removedvictory-core@19.0.3(transitive)

• Updatedvictory-core@^20.0.0