victory-box-plot 31.0.0 → 31.3.0

package/es/helper-methods.js

@@ -1,3 +1,5 @@
+import _isNil from "lodash/isNil";
+import _isNaN from "lodash/isNaN";
 import _keys from "lodash/keys";
 import _groupBy from "lodash/groupBy";
 import _uniq from "lodash/uniq";
@@ -16,7 +18,7 @@ var checkProcessedData = function (props, data) {
   all required quartile attributes. */
   var hasQuartileAttributes = data.every(function (datum) {
     return TYPES.every(function (val) {
-      return typeof datum["_".concat(val)] === "number";
+      return typeof datum["_".concat(val)] !== "undefined";
     });
   });
 
@@ -38,18 +40,22 @@ var checkProcessedData = function (props, data) {
   return false;
 };
 
+var nanToNull = function (val) {
+  return _isNaN(val) ? null : val;
+};
+
 var getSummaryStatistics = function (data, horizontal) {
   var dependentVars = data.map(function (datum) {
     return horizontal ? datum._x : datum._y;
   });
   var quartiles = {
-    _q1: d3Quantile(dependentVars, 0.25),
+    _q1: nanToNull(d3Quantile(dependentVars, 0.25)),
     // eslint-disable-line no-magic-numbers
-    _q3: d3Quantile(dependentVars, 0.75),
+    _q3: nanToNull(d3Quantile(dependentVars, 0.75)),
     // eslint-disable-line no-magic-numbers
-    _min: d3Min(dependentVars),
-    _median: d3Quantile(dependentVars, 0.5),
-    _max: d3Max(dependentVars)
+    _min: nanToNull(d3Min(dependentVars)),
+    _median: nanToNull(d3Quantile(dependentVars, 0.5)),
+    _max: nanToNull(d3Max(dependentVars))
   };
   return horizontal ? _assign({}, quartiles, {
     _y: data[0]._y
@@ -334,6 +340,10 @@ var getText = function (props, type) {
   return Array.isArray(labelProp) ? labelProp[index] : labelProp;
 };
 
+var getOrientation = function (labelOrientation, type) {
+  return typeof labelOrientation === "object" && labelOrientation[type] || labelOrientation;
+};
+
 var getLabelProps = function (props, text, type) {
   var datum = props.datum,
       positions = props.positions,
@@ -342,6 +352,7 @@ var getLabelProps = function (props, text, type) {
       horizontal = props.horizontal,
       labelOrientation = props.labelOrientation,
       style = props.style;
+  var orientation = getOrientation(labelOrientation, type);
   var namespace = "".concat(type, "Labels");
   var labelStyle = style[namespace] || style.labels;
   var defaultVerticalAnchor = horizontal ? "end" : "middle";
@@ -351,8 +362,8 @@ var getLabelProps = function (props, text, type) {
 
   var getDefaultPosition = function (coord) {
     var sign = {
-      x: labelOrientation === "left" ? -1 : 1,
-      y: labelOrientation === "top" ? -1 : 1
+      x: orientation === "left" ? -1 : 1,
+      y: orientation === "top" ? -1 : 1
     };
     return positions[coord] + sign[coord] * width / 2 + sign[coord] * (labelStyle.padding || 0);
   };
@@ -415,7 +426,7 @@ var getBaseProps = function (props, fallbackProps) {
   };
   var boxScale = horizontal ? scale.x : scale.y;
   return data.reduce(function (acc, datum, index) {
-    var eventKey = datum.eventKey !== undefined ? datum.eventKey : index;
+    var eventKey = !_isNil(datum.eventKey) ? datum.eventKey : index;
     var positions = {
       x: scale.x(datum._x),
       y: scale.y(datum._y),

package/es/victory-box-plot.js

@@ -1,3 +1,4 @@
+import _isNil from "lodash/isNil";
 import _flatten from "lodash/flatten";
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
@@ -38,6 +39,21 @@ var fallbackProps = {
     left: 20
   }
 };
+var defaultData = [{
+  x: 1,
+  min: 5,
+  q1: 7,
+  median: 12,
+  q3: 18,
+  max: 20
+}, {
+  x: 2,
+  min: 2,
+  q1: 5,
+  median: 8,
+  q3: 12,
+  max: 15
+}];
 var options = {
   components: [{
     name: "min"
@@ -64,22 +80,6 @@ var options = {
     index: "parent"
   }]
 };
-var defaultData = [{
-  x: 1,
-  min: 5,
-  q1: 7,
-  median: 12,
-  q3: 18,
-  max: 20
-}, {
-  x: 2,
-  min: 2,
-  q1: 5,
-  median: 8,
-  q3: 12,
-  max: 15
-}];
-var animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
 
 var VictoryBoxPlot =
 /*#__PURE__*/
@@ -100,13 +100,17 @@ function (_React$Component) {
       var types = ["q1", "q3", "max", "min", "median"];
 
       var dataComponents = _flatten(types.map(function (type) {
-        return _this.dataKeys.map(function (key, index) {
+        return _this.dataKeys.reduce(function (validDataComponents, _key, index) {
           var baseComponent = props["".concat(type, "Component")];
 
           var componentProps = _this.getComponentProps(baseComponent, type, index);
 
-          return React.cloneElement(baseComponent, componentProps);
-        });
+          if (_this.shouldRenderDatum(componentProps.datum)) {
+            validDataComponents.push(React.cloneElement(baseComponent, componentProps));
+          }
+
+          return validDataComponents;
+        }, []);
       }));
 
       var labelComponents = _flatten(types.map(function (type) {
@@ -136,10 +140,19 @@ function (_React$Component) {
     value: function shouldAnimate() {
       return !!this.props.animate;
     }
+  }, {
+    key: "shouldRenderDatum",
+    value: function shouldRenderDatum(datum) {
+      var hasX = !_isNil(datum._x);
+      var hasY = !_isNil(datum._y);
+      var hasSummaryStatistics = !_isNil(datum._min) && !_isNil(datum._max) && !_isNil(datum._median) && !_isNil(datum._q1) && !_isNil(datum._q3);
+      return hasSummaryStatistics && (this.props.horizontal ? hasY : hasX);
+    }
   }, {
     key: "render",
     value: function render() {
-      var role = this.constructor.role;
+      var animationWhitelist = VictoryBoxPlot.animationWhitelist,
+          role = VictoryBoxPlot.role;
       var props = Helpers.modifyProps(this.props, fallbackProps, role);
 
       if (this.shouldAnimate()) {
@@ -154,6 +167,12 @@ function (_React$Component) {
   return VictoryBoxPlot;
 }(React.Component);
 
+Object.defineProperty(VictoryBoxPlot, "animationWhitelist", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: ["data", "domain", "height", "padding", "style", "width"]
+});
 Object.defineProperty(VictoryBoxPlot, "displayName", {
   configurable: true,
   enumerable: true,
@@ -184,7 +203,13 @@ Object.defineProperty(VictoryBoxPlot, "propTypes", {
       eventHandlers: PropTypes.object
     })),
     horizontal: PropTypes.bool,
-    labelOrientation: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+    labelOrientation: PropTypes.oneOfType([PropTypes.oneOf(["top", "bottom", "left", "right"]), PropTypes.exact({
+      q1: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+      q3: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+      min: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+      max: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+      median: PropTypes.oneOf(["top", "bottom", "left", "right"])
+    })]),
     labels: PropTypes.bool,
     max: PropTypes.oneOfType([PropTypes.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
     maxComponent: PropTypes.element,

package/lib/helper-methods.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getBaseProps = exports.getData = exports.getDomain = void 0;
 
+var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
+
+var _isNaN2 = _interopRequireDefault(require("lodash/isNaN"));
+
 var _keys2 = _interopRequireDefault(require("lodash/keys"));
 
 var _groupBy2 = _interopRequireDefault(require("lodash/groupBy"));
@@ -32,7 +36,7 @@ var checkProcessedData = function (props, data) {
   all required quartile attributes. */
   var hasQuartileAttributes = data.every(function (datum) {
     return TYPES.every(function (val) {
-      return typeof datum["_".concat(val)] === "number";
+      return typeof datum["_".concat(val)] !== "undefined";
     });
   });
 
@@ -54,18 +58,22 @@ var checkProcessedData = function (props, data) {
   return false;
 };
 
+var nanToNull = function (val) {
+  return (0, _isNaN2.default)(val) ? null : val;
+};
+
 var getSummaryStatistics = function (data, horizontal) {
   var dependentVars = data.map(function (datum) {
     return horizontal ? datum._x : datum._y;
   });
   var quartiles = {
-    _q1: (0, _d3Array.quantile)(dependentVars, 0.25),
+    _q1: nanToNull((0, _d3Array.quantile)(dependentVars, 0.25)),
     // eslint-disable-line no-magic-numbers
-    _q3: (0, _d3Array.quantile)(dependentVars, 0.75),
+    _q3: nanToNull((0, _d3Array.quantile)(dependentVars, 0.75)),
     // eslint-disable-line no-magic-numbers
-    _min: (0, _d3Array.min)(dependentVars),
-    _median: (0, _d3Array.quantile)(dependentVars, 0.5),
-    _max: (0, _d3Array.max)(dependentVars)
+    _min: nanToNull((0, _d3Array.min)(dependentVars)),
+    _median: nanToNull((0, _d3Array.quantile)(dependentVars, 0.5)),
+    _max: nanToNull((0, _d3Array.max)(dependentVars))
   };
   return horizontal ? (0, _assign3.default)({}, quartiles, {
     _y: data[0]._y
@@ -354,6 +362,10 @@ var getText = function (props, type) {
   return Array.isArray(labelProp) ? labelProp[index] : labelProp;
 };
 
+var getOrientation = function (labelOrientation, type) {
+  return typeof labelOrientation === "object" && labelOrientation[type] || labelOrientation;
+};
+
 var getLabelProps = function (props, text, type) {
   var datum = props.datum,
       positions = props.positions,
@@ -362,6 +374,7 @@ var getLabelProps = function (props, text, type) {
       horizontal = props.horizontal,
       labelOrientation = props.labelOrientation,
       style = props.style;
+  var orientation = getOrientation(labelOrientation, type);
   var namespace = "".concat(type, "Labels");
   var labelStyle = style[namespace] || style.labels;
   var defaultVerticalAnchor = horizontal ? "end" : "middle";
@@ -371,8 +384,8 @@ var getLabelProps = function (props, text, type) {
 
   var getDefaultPosition = function (coord) {
     var sign = {
-      x: labelOrientation === "left" ? -1 : 1,
-      y: labelOrientation === "top" ? -1 : 1
+      x: orientation === "left" ? -1 : 1,
+      y: orientation === "top" ? -1 : 1
     };
     return positions[coord] + sign[coord] * width / 2 + sign[coord] * (labelStyle.padding || 0);
   };
@@ -436,7 +449,7 @@ var getBaseProps = function (props, fallbackProps) {
   };
   var boxScale = horizontal ? scale.x : scale.y;
   return data.reduce(function (acc, datum, index) {
-    var eventKey = datum.eventKey !== undefined ? datum.eventKey : index;
+    var eventKey = !(0, _isNil2.default)(datum.eventKey) ? datum.eventKey : index;
     var positions = {
       x: scale.x(datum._x),
       y: scale.y(datum._y),

package/lib/victory-box-plot.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
+
 var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -51,6 +53,21 @@ var fallbackProps = {
     left: 20
   }
 };
+var defaultData = [{
+  x: 1,
+  min: 5,
+  q1: 7,
+  median: 12,
+  q3: 18,
+  max: 20
+}, {
+  x: 2,
+  min: 2,
+  q1: 5,
+  median: 8,
+  q3: 12,
+  max: 15
+}];
 var options = {
   components: [{
     name: "min"
@@ -77,22 +94,6 @@ var options = {
     index: "parent"
   }]
 };
-var defaultData = [{
-  x: 1,
-  min: 5,
-  q1: 7,
-  median: 12,
-  q3: 18,
-  max: 20
-}, {
-  x: 2,
-  min: 2,
-  q1: 5,
-  median: 8,
-  q3: 12,
-  max: 15
-}];
-var animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
 
 var VictoryBoxPlot =
 /*#__PURE__*/
@@ -112,13 +113,17 @@ function (_React$Component) {
 
       var types = ["q1", "q3", "max", "min", "median"];
       var dataComponents = (0, _flatten2.default)(types.map(function (type) {
-        return _this.dataKeys.map(function (key, index) {
+        return _this.dataKeys.reduce(function (validDataComponents, _key, index) {
           var baseComponent = props["".concat(type, "Component")];
 
           var componentProps = _this.getComponentProps(baseComponent, type, index);
 
-          return _react.default.cloneElement(baseComponent, componentProps);
-        });
+          if (_this.shouldRenderDatum(componentProps.datum)) {
+            validDataComponents.push(_react.default.cloneElement(baseComponent, componentProps));
+          }
+
+          return validDataComponents;
+        }, []);
       }));
       var labelComponents = (0, _flatten2.default)(types.map(function (type) {
         var components = _this.dataKeys.map(function (key, index) {
@@ -147,10 +152,19 @@ function (_React$Component) {
     value: function shouldAnimate() {
       return !!this.props.animate;
     }
+  }, {
+    key: "shouldRenderDatum",
+    value: function shouldRenderDatum(datum) {
+      var hasX = !(0, _isNil2.default)(datum._x);
+      var hasY = !(0, _isNil2.default)(datum._y);
+      var hasSummaryStatistics = !(0, _isNil2.default)(datum._min) && !(0, _isNil2.default)(datum._max) && !(0, _isNil2.default)(datum._median) && !(0, _isNil2.default)(datum._q1) && !(0, _isNil2.default)(datum._q3);
+      return hasSummaryStatistics && (this.props.horizontal ? hasY : hasX);
+    }
   }, {
     key: "render",
     value: function render() {
-      var role = this.constructor.role;
+      var animationWhitelist = VictoryBoxPlot.animationWhitelist,
+          role = VictoryBoxPlot.role;
 
       var props = _victoryCore.Helpers.modifyProps(this.props, fallbackProps, role);
 
@@ -166,6 +180,12 @@ function (_React$Component) {
   return VictoryBoxPlot;
 }(_react.default.Component);
 
+Object.defineProperty(VictoryBoxPlot, "animationWhitelist", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: ["data", "domain", "height", "padding", "style", "width"]
+});
 Object.defineProperty(VictoryBoxPlot, "displayName", {
   configurable: true,
   enumerable: true,
@@ -196,7 +216,13 @@ Object.defineProperty(VictoryBoxPlot, "propTypes", {
       eventHandlers: _propTypes.default.object
     })),
     horizontal: _propTypes.default.bool,
-    labelOrientation: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+    labelOrientation: _propTypes.default.oneOfType([_propTypes.default.oneOf(["top", "bottom", "left", "right"]), _propTypes.default.exact({
+      q1: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+      q3: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+      min: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+      max: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+      median: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+    })]),
     labels: _propTypes.default.bool,
     max: _propTypes.default.oneOfType([_propTypes.default.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
     maxComponent: _propTypes.default.element,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-box-plot",
-  "version": "31.0.0",
+  "version": "31.3.0",
   "description": "Box Plot Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,7 +22,7 @@
     "d3-array": "^1.2.0",
     "lodash": "^4.17.5",
     "prop-types": "^15.5.8",
-    "victory-core": "^31.0.0"
+    "victory-core": "^31.2.0"
   },
   "scripts": {
     "version": "nps build-libs && nps build-dists"

package/src/helper-methods.js

@@ -1,4 +1,4 @@
-import { orderBy, defaults, assign, uniq, groupBy, keys } from "lodash";
+import { orderBy, defaults, assign, uniq, groupBy, keys, isNaN, isNil } from "lodash";
 import { Helpers, Scale, Domain, Data, Collection } from "victory-core";
 import { min as d3Min, max as d3Max, quantile as d3Quantile } from "d3-array";
 
@@ -8,12 +8,12 @@ const checkProcessedData = (props, data) => {
   /* check if the data is pre-processed. start by checking that it has
   all required quartile attributes. */
   const hasQuartileAttributes = data.every((datum) => {
-    return TYPES.every((val) => typeof datum[`_${val}`] === "number");
+    return TYPES.every((val) => typeof datum[`_${val}`] !== "undefined");
   });
 
   if (hasQuartileAttributes) {
     // check that the indepedent variable is distinct
-    const values = data.map(({ _x, _y }) => props.horizontal ? _y : _x);
+    const values = data.map(({ _x, _y }) => (props.horizontal ? _y : _x));
     if (!uniq(values).length === values.length) {
       throw new Error(`
         data prop may only take an array of objects with a unique
@@ -25,19 +25,21 @@ const checkProcessedData = (props, data) => {
   return false;
 };
 
+const nanToNull = (val) => (isNaN(val) ? null : val);
+
 const getSummaryStatistics = (data, horizontal) => {
-  const dependentVars = data.map((datum) => horizontal ? datum._x : datum._y);
+  const dependentVars = data.map((datum) => (horizontal ? datum._x : datum._y));
   const quartiles = {
-    _q1: d3Quantile(dependentVars, 0.25), // eslint-disable-line no-magic-numbers
-    _q3: d3Quantile(dependentVars, 0.75), // eslint-disable-line no-magic-numbers
-    _min: d3Min(dependentVars),
-    _median: d3Quantile(dependentVars, 0.5),
-    _max: d3Max(dependentVars)
+    _q1: nanToNull(d3Quantile(dependentVars, 0.25)), // eslint-disable-line no-magic-numbers
+    _q3: nanToNull(d3Quantile(dependentVars, 0.75)), // eslint-disable-line no-magic-numbers
+    _min: nanToNull(d3Min(dependentVars)),
+    _median: nanToNull(d3Quantile(dependentVars, 0.5)),
+    _max: nanToNull(d3Max(dependentVars))
   };
 
-  return horizontal ?
-    assign({}, quartiles, { _y: data[0]._y }) :
-    assign({}, quartiles, { _x: data[0]._x });
+  return horizontal
+    ? assign({}, quartiles, { _y: data[0]._y })
+    : assign({}, quartiles, { _x: data[0]._x });
 };
 
 const isHorizontal = (props, data) => {
@@ -93,28 +95,36 @@ const reduceDataset = (dataset, props, axis) => {
   const minDomain = Domain.getMinFromProps(props, axis);
   const maxDomain = Domain.getMaxFromProps(props, axis);
 
-  const minData = minDomain !== undefined ?
-    minDomain : dataset.reduce((memo, datum) => {
-      return memo < datum[`_${axis}`] ? memo : datum[`_${axis}`];
-    }, Infinity);
-  const maxData = maxDomain !== undefined ?
-    maxDomain : dataset.reduce((memo, datum) => {
-      return memo > datum[`_${axis}`] ? memo : datum[`_${axis}`];
-    }, -Infinity);
+  const minData =
+    minDomain !== undefined
+      ? minDomain
+      : dataset.reduce((memo, datum) => {
+          return memo < datum[`_${axis}`] ? memo : datum[`_${axis}`];
+        }, Infinity);
+  const maxData =
+    maxDomain !== undefined
+      ? maxDomain
+      : dataset.reduce((memo, datum) => {
+          return memo > datum[`_${axis}`] ? memo : datum[`_${axis}`];
+        }, -Infinity);
   return Domain.getDomainFromMinMax(minData, maxData);
 };
 
 const getDomainFromMinMaxValues = (dataset, props, axis) => {
   const minDomain = Domain.getMinFromProps(props, axis);
   const maxDomain = Domain.getMaxFromProps(props, axis);
-  const minData = minDomain !== undefined ?
-    minDomain : dataset.reduce((memo, datum) => {
-      return memo < datum._min ? memo : datum._min;
-    }, Infinity);
-  const maxData = maxDomain !== undefined ?
-    maxDomain : dataset.reduce((memo, datum) => {
-      return memo > datum._max ? memo : datum._max;
-    }, -Infinity);
+  const minData =
+    minDomain !== undefined
+      ? minDomain
+      : dataset.reduce((memo, datum) => {
+          return memo < datum._min ? memo : datum._min;
+        }, Infinity);
+  const maxData =
+    maxDomain !== undefined
+      ? maxDomain
+      : dataset.reduce((memo, datum) => {
+          return memo > datum._max ? memo : datum._max;
+        }, -Infinity);
   return Domain.getDomainFromMinMax(minData, maxData);
 };
 
@@ -128,8 +138,9 @@ const getDomainFromData = (props, axis) => {
     const max = maxDomain !== undefined ? maxDomain : Collection.getMaxValue(scaleDomain);
     return Domain.getDomainFromMinMax(min, max);
   }
-  return props.horizontal && axis === "x" || !props.horizontal && axis === "y" ?
-    getDomainFromMinMaxValues(dataset, props, axis) : reduceDataset(dataset, props, axis);
+  return (props.horizontal && axis === "x") || (!props.horizontal && axis === "y")
+    ? getDomainFromMinMaxValues(dataset, props, axis)
+    : reduceDataset(dataset, props, axis);
 };
 
 const getDomain = (props, axis) => {
@@ -174,8 +185,12 @@ const getCalculatedValues = (props) => {
     y: getDomain(props, "y")
   };
   const scale = {
-    x: Scale.getBaseScale(props, "x").domain(domain.x).range(range.x),
-    y: Scale.getBaseScale(props, "y").domain(domain.y).range(range.y)
+    x: Scale.getBaseScale(props, "x")
+      .domain(domain.x)
+      .range(range.x),
+    y: Scale.getBaseScale(props, "y")
+      .domain(domain.y)
+      .range(range.y)
   };
   const defaultStyles = theme && theme.boxplot && theme.boxplot.style ? theme.boxplot.style : {};
   const style = getStyles(props, defaultStyles);
@@ -193,7 +208,9 @@ const getWhiskerProps = (props, type) => {
   const whiskerValue = type === "min" ? min : max;
   const width = typeof whiskerWidth === "number" ? whiskerWidth : boxWidth;
   return {
-    datum, index, scale,
+    datum,
+    index,
+    scale,
     majorWhisker: {
       x1: horizontal ? boxValue : x,
       y1: horizontal ? y : boxValue,
@@ -218,7 +235,9 @@ const getBoxProps = (props, type) => {
   const defaultWidth = type === "q1" ? median - q1 : q3 - median;
   const defaultHeight = type === "q1" ? q1 - median : median - q3;
   return {
-    datum, scale, index,
+    datum,
+    scale,
+    index,
     x: horizontal ? defaultX : x - boxWidth / 2,
     y: horizontal ? y - boxWidth / 2 : defaultY,
     width: horizontal ? defaultWidth : boxWidth,
@@ -231,7 +250,9 @@ const getMedianProps = (props) => {
   const { boxWidth, horizontal, style, datum, scale, index } = props;
   const { median, x, y } = props.positions;
   return {
-    datum, scale, index,
+    datum,
+    scale,
+    index,
     x1: horizontal ? median : x - boxWidth / 2,
     y1: horizontal ? y - boxWidth / 2 : median,
     x2: horizontal ? median : x + boxWidth / 2,
@@ -253,8 +274,12 @@ const getText = (props, type) => {
   return Array.isArray(labelProp) ? labelProp[index] : labelProp;
 };
 
+const getOrientation = (labelOrientation, type) =>
+  (typeof labelOrientation === "object" && labelOrientation[type]) || labelOrientation;
+
 const getLabelProps = (props, text, type) => {
   const { datum, positions, index, boxWidth, horizontal, labelOrientation, style } = props;
+  const orientation = getOrientation(labelOrientation, type);
   const namespace = `${type}Labels`;
   const labelStyle = style[namespace] || style.labels;
   const defaultVerticalAnchor = horizontal ? "end" : "middle";
@@ -264,13 +289,16 @@ const getLabelProps = (props, text, type) => {
 
   const getDefaultPosition = (coord) => {
     const sign = {
-      x: labelOrientation === "left" ? -1 : 1, y: labelOrientation === "top" ? -1 : 1
+      x: orientation === "left" ? -1 : 1,
+      y: orientation === "top" ? -1 : 1
     };
-    return positions[coord] + (sign[coord] * width / 2) + (sign[coord] * (labelStyle.padding || 0));
+    return positions[coord] + (sign[coord] * width) / 2 + sign[coord] * (labelStyle.padding || 0);
   };
 
   return {
-    text, datum, index,
+    text,
+    datum,
+    index,
     style: labelStyle,
     y: horizontal ? getDefaultPosition("y") : positions[type],
     x: horizontal ? positions[type] : getDefaultPosition("x"),
@@ -293,19 +321,40 @@ const getBaseProps = (props, fallbackProps) => {
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, "boxplot");
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
   const {
-    groupComponent, width, height, padding, standalone, theme, events, sharedEvents,
-    scale, horizontal, data, style, domain, name
+    groupComponent,
+    width,
+    height,
+    padding,
+    standalone,
+    theme,
+    events,
+    sharedEvents,
+    scale,
+    horizontal,
+    data,
+    style,
+    domain,
+    name
   } = props;
   const initialChildProps = {
     parent: {
-      domain, scale, width, height, data, standalone, name,
-      theme, style: style.parent || {}, padding, groupComponent
+      domain,
+      scale,
+      width,
+      height,
+      data,
+      standalone,
+      name,
+      theme,
+      style: style.parent || {},
+      padding,
+      groupComponent
     }
   };
   const boxScale = horizontal ? scale.x : scale.y;
 
   return data.reduce((acc, datum, index) => {
-    const eventKey = datum.eventKey !== undefined ? datum.eventKey : index;
+    const eventKey = !isNil(datum.eventKey) ? datum.eventKey : index;
     const positions = {
       x: scale.x(datum._x),
       y: scale.y(datum._y),
@@ -327,7 +376,8 @@ const getBaseProps = (props, fallbackProps) => {
       const labelText = getText(dataProps, type);
       const labelProp = props.labels || props[`${type}Labels`];
       if (
-        labelText !== null && labelText !== undefined || (labelProp && (events || sharedEvents))
+        (labelText !== null && labelText !== undefined) ||
+        (labelProp && (events || sharedEvents))
       ) {
         const target = `${type}Labels`;
         acc[eventKey][target] = getLabelProps(dataProps, labelText, type);