@vx/boxplot - npm Package Compare versions

Comparing version 0.0.170 to 0.0.181

build/boxplots/BoxPlot.js

@@ -19,68 +19,195 @@ 'use strict';
 
-var _group = require('@vx/group');
+var _propTypes = require('prop-types');
 
-var _additionalProps = require('../util/additionalProps');
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _additionalProps2 = _interopRequireDefault(_additionalProps);
+var _group = require('@vx/group');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+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); } }
 
-function BoxPlot(_ref) {
-  var _ref$left = _ref.left,
-      left = _ref$left === undefined ? 0 : _ref$left,
-      className = _ref.className,
-      data = _ref.data,
-      max = _ref.max,
-      min = _ref.min,
-      firstQuartile = _ref.firstQuartile,
-      thirdQuartile = _ref.thirdQuartile,
-      median = _ref.median,
-      boxWidth = _ref.boxWidth,
-      fill = _ref.fill,
-      fillOpacity = _ref.fillOpacity,
-      stroke = _ref.stroke,
-      strokeWidth = _ref.strokeWidth,
-      _ref$rx = _ref.rx,
-      rx = _ref$rx === undefined ? 2 : _ref$rx,
-      _ref$ry = _ref.ry,
-      ry = _ref$ry === undefined ? 2 : _ref$ry,
-      _ref$medianProps = _ref.medianProps,
-      medianProps = _ref$medianProps === undefined ? {} : _ref$medianProps,
-      _ref$maxProps = _ref.maxProps,
-      maxProps = _ref$maxProps === undefined ? {} : _ref$maxProps,
-      _ref$minProps = _ref.minProps,
-      minProps = _ref$minProps === undefined ? {} : _ref$minProps,
-      _ref$boxProps = _ref.boxProps,
-      boxProps = _ref$boxProps === undefined ? {} : _ref$boxProps,
-      _ref$container = _ref.container,
-      container = _ref$container === undefined ? false : _ref$container,
-      _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === undefined ? {} : _ref$containerProps,
-      restProps = _objectWithoutProperties(_ref, ['left', 'className', 'data', 'max', 'min', 'firstQuartile', 'thirdQuartile', 'median', 'boxWidth', 'fill', 'fillOpacity', 'stroke', 'strokeWidth', 'rx', 'ry', 'medianProps', 'maxProps', 'minProps', 'boxProps', 'container', 'containerProps']);
+function verticalToHorizontal(_ref) {
+  var x1 = _ref.x1,
+      x2 = _ref.x2,
+      y1 = _ref.y1,
+      y2 = _ref.y2;
 
-  var centerX = left + boxWidth / 2;
+  return {
+    x1: y1,
+    x2: y2,
+    y1: x1,
+    y2: x2
+  };
+}
+
+BoxPlot.propTypes = {
+  left: _propTypes2.default.number,
+  top: _propTypes2.default.number,
+  className: _propTypes2.default.string,
+  max: _propTypes2.default.number,
+  min: _propTypes2.default.number,
+  firstQuartile: _propTypes2.default.number,
+  thirdQuartile: _propTypes2.default.number,
+  median: _propTypes2.default.number,
+  boxWidth: _propTypes2.default.number,
+  fill: _propTypes2.default.string,
+  fillOpacity: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+  stroke: _propTypes2.default.string,
+  strokeWidth: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+  rx: _propTypes2.default.number,
+  ry: _propTypes2.default.number,
+  valueScale: _propTypes2.default.func,
+  outliers: _propTypes2.default.array,
+  horizontal: _propTypes2.default.bool,
+  medianProps: _propTypes2.default.object,
+  maxProps: _propTypes2.default.object,
+  minProps: _propTypes2.default.object,
+  boxProps: _propTypes2.default.object,
+  outlierProps: _propTypes2.default.object,
+  container: _propTypes2.default.bool,
+  containerProps: _propTypes2.default.object,
+  children: _propTypes2.default.func
+};
+
+function BoxPlot(_ref2) {
+  var _ref2$left = _ref2.left,
+      left = _ref2$left === undefined ? 0 : _ref2$left,
+      _ref2$top = _ref2.top,
+      top = _ref2$top === undefined ? 0 : _ref2$top,
+      className = _ref2.className,
+      max = _ref2.max,
+      min = _ref2.min,
+      firstQuartile = _ref2.firstQuartile,
+      thirdQuartile = _ref2.thirdQuartile,
+      median = _ref2.median,
+      boxWidth = _ref2.boxWidth,
+      fill = _ref2.fill,
+      fillOpacity = _ref2.fillOpacity,
+      stroke = _ref2.stroke,
+      strokeWidth = _ref2.strokeWidth,
+      _ref2$rx = _ref2.rx,
+      rx = _ref2$rx === undefined ? 2 : _ref2$rx,
+      _ref2$ry = _ref2.ry,
+      ry = _ref2$ry === undefined ? 2 : _ref2$ry,
+      valueScale = _ref2.valueScale,
+      _ref2$outliers = _ref2.outliers,
+      outliers = _ref2$outliers === undefined ? [] : _ref2$outliers,
+      horizontal = _ref2.horizontal,
+      _ref2$medianProps = _ref2.medianProps,
+      medianProps = _ref2$medianProps === undefined ? {} : _ref2$medianProps,
+      _ref2$maxProps = _ref2.maxProps,
+      maxProps = _ref2$maxProps === undefined ? {} : _ref2$maxProps,
+      _ref2$minProps = _ref2.minProps,
+      minProps = _ref2$minProps === undefined ? {} : _ref2$minProps,
+      _ref2$boxProps = _ref2.boxProps,
+      boxProps = _ref2$boxProps === undefined ? {} : _ref2$boxProps,
+      _ref2$outlierProps = _ref2.outlierProps,
+      outlierProps = _ref2$outlierProps === undefined ? {} : _ref2$outlierProps,
+      _ref2$container = _ref2.container,
+      container = _ref2$container === undefined ? false : _ref2$container,
+      _ref2$containerProps = _ref2.containerProps,
+      containerProps = _ref2$containerProps === undefined ? {} : _ref2$containerProps,
+      children = _ref2.children;
+
+  var offset = horizontal ? top : left;
+  var center = offset + boxWidth / 2;
+  var valueRange = valueScale.range();
+
+  var boxplot = {
+    valueRange: valueRange,
+    center: center,
+    offset: offset,
+    boxWidth: boxWidth,
+    max: {
+      x1: center - boxWidth / 4,
+      x2: center + boxWidth / 4,
+      y1: valueScale(max),
+      y2: valueScale(max)
+    },
+    maxToThird: {
+      x1: center,
+      x2: center,
+      y1: valueScale(max),
+      y2: valueScale(thirdQuartile)
+    },
+    median: {
+      x1: offset,
+      x2: offset + boxWidth,
+      y1: valueScale(median),
+      y2: valueScale(median)
+    },
+    minToFirst: {
+      x1: center,
+      x2: center,
+      y1: valueScale(firstQuartile),
+      y2: valueScale(min)
+    },
+    min: {
+      x1: center - boxWidth / 4,
+      x2: center + boxWidth / 4,
+      y1: valueScale(min),
+      y2: valueScale(min)
+    },
+    box: {
+      x1: offset,
+      x2: boxWidth,
+      y1: valueScale(thirdQuartile),
+      y2: Math.abs(valueScale(thirdQuartile) - valueScale(firstQuartile))
+    },
+    container: {
+      x1: offset,
+      x2: boxWidth,
+      y1: Math.min.apply(Math, _toConsumableArray(valueRange)),
+      y2: Math.abs(valueRange[0] - valueRange[1])
+    }
+  };
+
+  if (horizontal) {
+    boxplot.max = verticalToHorizontal(boxplot.max);
+    boxplot.maxToThird = verticalToHorizontal(boxplot.maxToThird);
+    boxplot.box = verticalToHorizontal(boxplot.box);
+    boxplot.box.y1 = valueScale(firstQuartile);
+    boxplot.median = verticalToHorizontal(boxplot.median);
+    boxplot.minToFirst = verticalToHorizontal(boxplot.minToFirst);
+    boxplot.min = verticalToHorizontal(boxplot.min);
+    boxplot.container = verticalToHorizontal(boxplot.container);
+    boxplot.container.y1 = Math.min.apply(Math, _toConsumableArray(valueRange));
+  }
+
+  if (children) return children(boxplot);
+
   return _react2.default.createElement(
     _group.Group,
     { className: (0, _classnames2.default)('vx-boxplot', className) },
+    outliers.map(function (d, i) {
+      var cx = horizontal ? valueScale(d) : center;
+      var cy = horizontal ? center : valueScale(d);
+      return _react2.default.createElement('circle', _extends({
+        key: 'vx-boxplot-outlier-' + i,
+        className: 'vx-boxplot-outlier',
+        cx: cx,
+        cy: cy,
+        r: 4,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        fill: fill,
+        fillOpacity: fillOpacity
+      }, outlierProps));
+    }),
     _react2.default.createElement('line', _extends({
       className: 'vx-boxplot-max',
-      x1: centerX - boxWidth / 4,
-      y1: max,
-      x2: centerX + boxWidth / 4,
-      y2: max,
+      x1: boxplot.max.x1,
+      y1: boxplot.max.y1,
+      x2: boxplot.max.x2,
+      y2: boxplot.max.y2,
       stroke: stroke,
       strokeWidth: strokeWidth
-    }, (0, _additionalProps2.default)(maxProps, {
-      data: data,
-      max: max,
-      x1: centerX - boxWidth / 4,
-      x2: centerX + boxWidth / 4
-    }))),
+    }, maxProps)),
     _react2.default.createElement('line', {
-      x1: centerX,
-      y1: max,
-      x2: centerX,
-      y2: thirdQuartile,
+      className: 'vx-boxplot-max-to-third',
+      x1: boxplot.maxToThird.x1,
+      y1: boxplot.maxToThird.y1,
+      x2: boxplot.maxToThird.x2,
+      y2: boxplot.maxToThird.y2,
       stroke: stroke,
@@ -90,6 +217,7 @@ strokeWidth: strokeWidth
     _react2.default.createElement('rect', _extends({
-      x: left,
-      y: thirdQuartile,
-      width: boxWidth,
-      height: firstQuartile - thirdQuartile,
+      className: 'vx-boxplot-box',
+      x: boxplot.box.x1,
+      y: boxplot.box.y1,
+      width: boxplot.box.x2,
+      height: boxplot.box.y2,
       stroke: stroke,
@@ -101,32 +229,18 @@ strokeWidth: strokeWidth,
       ry: ry
-    }, (0, _additionalProps2.default)(boxProps, {
-      data: data,
-      height: firstQuartile - thirdQuartile,
-      median: median,
-      firstQuartile: firstQuartile,
-      thirdQuartile: thirdQuartile,
-      min: min,
-      max: max,
-      x1: left,
-      x2: left + boxWidth
-    }))),
+    }, boxProps)),
     _react2.default.createElement('line', _extends({
       className: 'vx-boxplot-median',
-      x1: left,
-      y1: median,
-      x2: left + boxWidth,
-      y2: median,
+      x1: boxplot.median.x1,
+      y1: boxplot.median.y1,
+      x2: boxplot.median.x2,
+      y2: boxplot.median.y2,
       stroke: stroke,
       strokeWidth: strokeWidth
-    }, (0, _additionalProps2.default)(medianProps, {
-      data: data,
-      median: median,
-      x1: left,
-      x2: left + boxWidth
-    }))),
+    }, medianProps)),
     _react2.default.createElement('line', {
-      x1: centerX,
-      y1: firstQuartile,
-      x2: centerX,
-      y2: min,
+      className: 'vx-boxplot-min-to-first',
+      x1: boxplot.minToFirst.x1,
+      y1: boxplot.minToFirst.y1,
+      x2: boxplot.minToFirst.x2,
+      y2: boxplot.minToFirst.y2,
       stroke: stroke,
@@ -137,31 +251,17 @@ strokeWidth: strokeWidth
       className: 'vx-boxplot-min',
-      x1: centerX - boxWidth / 4,
-      y1: min,
-      x2: centerX + boxWidth / 4,
-      y2: min,
+      x1: boxplot.min.x1,
+      y1: boxplot.min.y1,
+      x2: boxplot.min.x2,
+      y2: boxplot.min.y2,
       stroke: stroke,
       strokeWidth: strokeWidth
-    }, (0, _additionalProps2.default)(minProps, {
-      data: data,
-      min: min,
-      x1: centerX - boxWidth / 4,
-      x2: centerX + boxWidth / 4
-    }))),
+    }, minProps)),
     container && _react2.default.createElement('rect', _extends({
-      x: left,
-      y: max,
-      width: boxWidth,
-      height: min - max,
+      x: boxplot.container.x1,
+      y: boxplot.container.y1,
+      width: boxplot.container.x2,
+      height: boxplot.container.y2,
       fillOpacity: '0'
-    }, (0, _additionalProps2.default)(containerProps, {
-      data: data,
-      x1: left,
-      x2: left + boxWidth,
-      median: median,
-      max: max,
-      min: min,
-      thirdQuartile: thirdQuartile,
-      firstQuartile: firstQuartile
-    })))
+    }, containerProps))
   );
 }

build/index.js

@@ -16,2 +16,11 @@ 'use strict';
 
+var _computeStats = require('./util/computeStats');
+
+Object.defineProperty(exports, 'computeStats', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_computeStats).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

dist/vx-boxplot.es.js

 import React from 'react';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 import { Group } from '@vx/group';
 
-function callOrValue(maybeFn, data) {
-  if (typeof maybeFn === 'function') {
-    return maybeFn(data);
-  }
-  return maybeFn;
-}
-
-function additionalProps(restProps, data) {
-  return Object.keys(restProps).reduce(function (ret, cur) {
-    ret[cur] = callOrValue(restProps[cur], data);
-    return ret;
-  }, {});
-}
-
 var _extends = Object.assign || function (target) {
@@ -33,70 +20,195 @@ for (var i = 1; i < arguments.length; i++) {
 
-var objectWithoutProperties = function (obj, keys) {
-  var target = {};
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
 
-  for (var i in obj) {
-    if (keys.indexOf(i) >= 0) continue;
-    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-    target[i] = obj[i];
+    return arr2;
+  } else {
+    return Array.from(arr);
   }
+};
 
-  return target;
+function verticalToHorizontal(_ref) {
+  var x1 = _ref.x1,
+      x2 = _ref.x2,
+      y1 = _ref.y1,
+      y2 = _ref.y2;
+
+  return {
+    x1: y1,
+    x2: y2,
+    y1: x1,
+    y2: x2
+  };
+}
+
+BoxPlot.propTypes = {
+  left: PropTypes.number,
+  top: PropTypes.number,
+  className: PropTypes.string,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  firstQuartile: PropTypes.number,
+  thirdQuartile: PropTypes.number,
+  median: PropTypes.number,
+  boxWidth: PropTypes.number,
+  fill: PropTypes.string,
+  fillOpacity: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  stroke: PropTypes.string,
+  strokeWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  rx: PropTypes.number,
+  ry: PropTypes.number,
+  valueScale: PropTypes.func,
+  outliers: PropTypes.array,
+  horizontal: PropTypes.bool,
+  medianProps: PropTypes.object,
+  maxProps: PropTypes.object,
+  minProps: PropTypes.object,
+  boxProps: PropTypes.object,
+  outlierProps: PropTypes.object,
+  container: PropTypes.bool,
+  containerProps: PropTypes.object,
+  children: PropTypes.func
 };
 
-function BoxPlot(_ref) {
-  var _ref$left = _ref.left,
-      left = _ref$left === undefined ? 0 : _ref$left,
-      className = _ref.className,
-      data = _ref.data,
-      max = _ref.max,
-      min = _ref.min,
-      firstQuartile = _ref.firstQuartile,
-      thirdQuartile = _ref.thirdQuartile,
-      median = _ref.median,
-      boxWidth = _ref.boxWidth,
-      fill = _ref.fill,
-      fillOpacity = _ref.fillOpacity,
-      stroke = _ref.stroke,
-      strokeWidth = _ref.strokeWidth,
-      _ref$rx = _ref.rx,
-      rx = _ref$rx === undefined ? 2 : _ref$rx,
-      _ref$ry = _ref.ry,
-      ry = _ref$ry === undefined ? 2 : _ref$ry,
-      _ref$medianProps = _ref.medianProps,
-      medianProps = _ref$medianProps === undefined ? {} : _ref$medianProps,
-      _ref$maxProps = _ref.maxProps,
-      maxProps = _ref$maxProps === undefined ? {} : _ref$maxProps,
-      _ref$minProps = _ref.minProps,
-      minProps = _ref$minProps === undefined ? {} : _ref$minProps,
-      _ref$boxProps = _ref.boxProps,
-      boxProps = _ref$boxProps === undefined ? {} : _ref$boxProps,
-      _ref$container = _ref.container,
-      container = _ref$container === undefined ? false : _ref$container,
-      _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === undefined ? {} : _ref$containerProps,
-      restProps = objectWithoutProperties(_ref, ['left', 'className', 'data', 'max', 'min', 'firstQuartile', 'thirdQuartile', 'median', 'boxWidth', 'fill', 'fillOpacity', 'stroke', 'strokeWidth', 'rx', 'ry', 'medianProps', 'maxProps', 'minProps', 'boxProps', 'container', 'containerProps']);
+function BoxPlot(_ref2) {
+  var _ref2$left = _ref2.left,
+      left = _ref2$left === undefined ? 0 : _ref2$left,
+      _ref2$top = _ref2.top,
+      top = _ref2$top === undefined ? 0 : _ref2$top,
+      className = _ref2.className,
+      max = _ref2.max,
+      min = _ref2.min,
+      firstQuartile = _ref2.firstQuartile,
+      thirdQuartile = _ref2.thirdQuartile,
+      median = _ref2.median,
+      boxWidth = _ref2.boxWidth,
+      fill = _ref2.fill,
+      fillOpacity = _ref2.fillOpacity,
+      stroke = _ref2.stroke,
+      strokeWidth = _ref2.strokeWidth,
+      _ref2$rx = _ref2.rx,
+      rx = _ref2$rx === undefined ? 2 : _ref2$rx,
+      _ref2$ry = _ref2.ry,
+      ry = _ref2$ry === undefined ? 2 : _ref2$ry,
+      valueScale = _ref2.valueScale,
+      _ref2$outliers = _ref2.outliers,
+      outliers = _ref2$outliers === undefined ? [] : _ref2$outliers,
+      horizontal = _ref2.horizontal,
+      _ref2$medianProps = _ref2.medianProps,
+      medianProps = _ref2$medianProps === undefined ? {} : _ref2$medianProps,
+      _ref2$maxProps = _ref2.maxProps,
+      maxProps = _ref2$maxProps === undefined ? {} : _ref2$maxProps,
+      _ref2$minProps = _ref2.minProps,
+      minProps = _ref2$minProps === undefined ? {} : _ref2$minProps,
+      _ref2$boxProps = _ref2.boxProps,
+      boxProps = _ref2$boxProps === undefined ? {} : _ref2$boxProps,
+      _ref2$outlierProps = _ref2.outlierProps,
+      outlierProps = _ref2$outlierProps === undefined ? {} : _ref2$outlierProps,
+      _ref2$container = _ref2.container,
+      container = _ref2$container === undefined ? false : _ref2$container,
+      _ref2$containerProps = _ref2.containerProps,
+      containerProps = _ref2$containerProps === undefined ? {} : _ref2$containerProps,
+      children = _ref2.children;
 
-  var centerX = left + boxWidth / 2;
+  var offset = horizontal ? top : left;
+  var center = offset + boxWidth / 2;
+  var valueRange = valueScale.range();
+
+  var boxplot = {
+    valueRange: valueRange,
+    center: center,
+    offset: offset,
+    boxWidth: boxWidth,
+    max: {
+      x1: center - boxWidth / 4,
+      x2: center + boxWidth / 4,
+      y1: valueScale(max),
+      y2: valueScale(max)
+    },
+    maxToThird: {
+      x1: center,
+      x2: center,
+      y1: valueScale(max),
+      y2: valueScale(thirdQuartile)
+    },
+    median: {
+      x1: offset,
+      x2: offset + boxWidth,
+      y1: valueScale(median),
+      y2: valueScale(median)
+    },
+    minToFirst: {
+      x1: center,
+      x2: center,
+      y1: valueScale(firstQuartile),
+      y2: valueScale(min)
+    },
+    min: {
+      x1: center - boxWidth / 4,
+      x2: center + boxWidth / 4,
+      y1: valueScale(min),
+      y2: valueScale(min)
+    },
+    box: {
+      x1: offset,
+      x2: boxWidth,
+      y1: valueScale(thirdQuartile),
+      y2: Math.abs(valueScale(thirdQuartile) - valueScale(firstQuartile))
+    },
+    container: {
+      x1: offset,
+      x2: boxWidth,
+      y1: Math.min.apply(Math, toConsumableArray(valueRange)),
+      y2: Math.abs(valueRange[0] - valueRange[1])
+    }
+  };
+
+  if (horizontal) {
+    boxplot.max = verticalToHorizontal(boxplot.max);
+    boxplot.maxToThird = verticalToHorizontal(boxplot.maxToThird);
+    boxplot.box = verticalToHorizontal(boxplot.box);
+    boxplot.box.y1 = valueScale(firstQuartile);
+    boxplot.median = verticalToHorizontal(boxplot.median);
+    boxplot.minToFirst = verticalToHorizontal(boxplot.minToFirst);
+    boxplot.min = verticalToHorizontal(boxplot.min);
+    boxplot.container = verticalToHorizontal(boxplot.container);
+    boxplot.container.y1 = Math.min.apply(Math, toConsumableArray(valueRange));
+  }
+
+  if (children) return children(boxplot);
+
   return React.createElement(
     Group,
     { className: classnames('vx-boxplot', className) },
+    outliers.map(function (d, i) {
+      var cx = horizontal ? valueScale(d) : center;
+      var cy = horizontal ? center : valueScale(d);
+      return React.createElement('circle', _extends({
+        key: 'vx-boxplot-outlier-' + i,
+        className: 'vx-boxplot-outlier',
+        cx: cx,
+        cy: cy,
+        r: 4,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        fill: fill,
+        fillOpacity: fillOpacity
+      }, outlierProps));
+    }),
     React.createElement('line', _extends({
       className: 'vx-boxplot-max',
-      x1: centerX - boxWidth / 4,
-      y1: max,
-      x2: centerX + boxWidth / 4,
-      y2: max,
+      x1: boxplot.max.x1,
+      y1: boxplot.max.y1,
+      x2: boxplot.max.x2,
+      y2: boxplot.max.y2,
       stroke: stroke,
       strokeWidth: strokeWidth
-    }, additionalProps(maxProps, {
-      data: data,
-      max: max,
-      x1: centerX - boxWidth / 4,
-      x2: centerX + boxWidth / 4
-    }))),
+    }, maxProps)),
     React.createElement('line', {
-      x1: centerX,
-      y1: max,
-      x2: centerX,
-      y2: thirdQuartile,
+      className: 'vx-boxplot-max-to-third',
+      x1: boxplot.maxToThird.x1,
+      y1: boxplot.maxToThird.y1,
+      x2: boxplot.maxToThird.x2,
+      y2: boxplot.maxToThird.y2,
       stroke: stroke,
@@ -106,6 +218,7 @@ strokeWidth: strokeWidth
     React.createElement('rect', _extends({
-      x: left,
-      y: thirdQuartile,
-      width: boxWidth,
-      height: firstQuartile - thirdQuartile,
+      className: 'vx-boxplot-box',
+      x: boxplot.box.x1,
+      y: boxplot.box.y1,
+      width: boxplot.box.x2,
+      height: boxplot.box.y2,
       stroke: stroke,
@@ -117,32 +230,18 @@ strokeWidth: strokeWidth,
       ry: ry
-    }, additionalProps(boxProps, {
-      data: data,
-      height: firstQuartile - thirdQuartile,
-      median: median,
-      firstQuartile: firstQuartile,
-      thirdQuartile: thirdQuartile,
-      min: min,
-      max: max,
-      x1: left,
-      x2: left + boxWidth
-    }))),
+    }, boxProps)),
     React.createElement('line', _extends({
       className: 'vx-boxplot-median',
-      x1: left,
-      y1: median,
-      x2: left + boxWidth,
-      y2: median,
+      x1: boxplot.median.x1,
+      y1: boxplot.median.y1,
+      x2: boxplot.median.x2,
+      y2: boxplot.median.y2,
       stroke: stroke,
       strokeWidth: strokeWidth
-    }, additionalProps(medianProps, {
-      data: data,
-      median: median,
-      x1: left,
-      x2: left + boxWidth
-    }))),
+    }, medianProps)),
     React.createElement('line', {
-      x1: centerX,
-      y1: firstQuartile,
-      x2: centerX,
-      y2: min,
+      className: 'vx-boxplot-min-to-first',
+      x1: boxplot.minToFirst.x1,
+      y1: boxplot.minToFirst.y1,
+      x2: boxplot.minToFirst.x2,
+      y2: boxplot.minToFirst.y2,
       stroke: stroke,
@@ -153,33 +252,75 @@ strokeWidth: strokeWidth
       className: 'vx-boxplot-min',
-      x1: centerX - boxWidth / 4,
-      y1: min,
-      x2: centerX + boxWidth / 4,
-      y2: min,
+      x1: boxplot.min.x1,
+      y1: boxplot.min.y1,
+      x2: boxplot.min.x2,
+      y2: boxplot.min.y2,
       stroke: stroke,
       strokeWidth: strokeWidth
-    }, additionalProps(minProps, {
-      data: data,
-      min: min,
-      x1: centerX - boxWidth / 4,
-      x2: centerX + boxWidth / 4
-    }))),
+    }, minProps)),
     container && React.createElement('rect', _extends({
-      x: left,
-      y: max,
-      width: boxWidth,
-      height: min - max,
+      x: boxplot.container.x1,
+      y: boxplot.container.y1,
+      width: boxplot.container.x2,
+      height: boxplot.container.y2,
       fillOpacity: '0'
-    }, additionalProps(containerProps, {
-      data: data,
-      x1: left,
-      x2: left + boxWidth,
-      median: median,
-      max: max,
-      min: min,
-      thirdQuartile: thirdQuartile,
-      firstQuartile: firstQuartile
-    })))
+    }, containerProps))
   );
 }
 
-export { BoxPlot };
+function computeStats(numericalArray) {
+  var points = [].concat(toConsumableArray(numericalArray)).sort(function (a, b) {
+    return a - b;
+  });
+  var sampleSize = points.length;
+  var firstQuartile = points[Math.round(sampleSize / 4)];
+  var thirdQuartile = points[Math.round(3 * sampleSize / 4)];
+  var IQR = thirdQuartile - firstQuartile;
+
+  var min = firstQuartile - 1.5 * IQR;
+  var max = thirdQuartile + 1.5 * IQR;
+
+  var outliers = points.filter(function (p) {
+    return p < min || p > max;
+  });
+  var binWidth = 2 * IQR * Math.pow(sampleSize - outliers.length, -1 / 3);
+  var binNum = Math.round((max - min) / binWidth);
+  var actualBinWidth = (max - min) / binNum;
+
+  var bins = Array(binNum + 2).fill(0);
+  var values = Array(binNum + 2).fill(min);
+
+  for (var i = 1; i <= binNum; i += 1) {
+    values[i] += actualBinWidth * (i - 0.5);
+  }
+
+  values[values.length - 1] = max;
+
+  points.filter(function (p) {
+    return p >= min && p <= max;
+  }).forEach(function (p) {
+    bins[Math.floor((p - min) / actualBinWidth) + 1] += 1;
+  });
+
+  var binData = values.map(function (v, i) {
+    return {
+      value: v,
+      count: bins[i]
+    };
+  });
+
+  var boxPlot = {
+    min: min,
+    firstQuartile: firstQuartile,
+    median: points[Math.round(sampleSize / 2)],
+    thirdQuartile: thirdQuartile,
+    max: max,
+    outliers: outliers
+  };
+
+  return {
+    boxPlot: boxPlot,
+    binData: binData
+  };
+}
+
+export { BoxPlot, computeStats };

dist/vx-boxplot.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("classnames"),require("@vx/group")):"function"==typeof define&&define.amd?define(["exports","react","classnames","@vx/group"],t):t(e.vx=e.vx||{},e.React,e.classNames,e.vx)}(this,function(e,B,G,M){"use strict";function R(a,o){return Object.keys(a).reduce(function(e,t){var r,i;return e[t]=(r=a[t],i=o,"function"==typeof r?r(i):r),e},{})}B=B&&B.hasOwnProperty("default")?B.default:B,G=G&&G.hasOwnProperty("default")?G.default:G;var z=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e};e.BoxPlot=function(e){var t=e.left,r=void 0===t?0:t,i=e.className,a=e.data,o=e.max,n=e.min,s=e.firstQuartile,l=e.thirdQuartile,d=e.median,x=e.boxWidth,c=e.fill,m=e.fillOpacity,f=e.stroke,p=e.strokeWidth,u=e.rx,y=void 0===u?2:u,h=e.ry,v=void 0===h?2:h,k=e.medianProps,P=void 0===k?{}:k,b=e.maxProps,O=void 0===b?{}:b,W=e.minProps,E=void 0===W?{}:W,Q=e.boxProps,g=void 0===Q?{}:Q,N=e.container,j=void 0!==N&&N,w=e.containerProps,q=void 0===w?{}:w,_=(function(e,t){var r={};for(var i in e)0<=t.indexOf(i)||Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i])}(e,["left","className","data","max","min","firstQuartile","thirdQuartile","median","boxWidth","fill","fillOpacity","stroke","strokeWidth","rx","ry","medianProps","maxProps","minProps","boxProps","container","containerProps"]),r+x/2);return B.createElement(M.Group,{className:G("vx-boxplot",i)},B.createElement("line",z({className:"vx-boxplot-max",x1:_-x/4,y1:o,x2:_+x/4,y2:o,stroke:f,strokeWidth:p},R(O,{data:a,max:o,x1:_-x/4,x2:_+x/4}))),B.createElement("line",{x1:_,y1:o,x2:_,y2:l,stroke:f,strokeWidth:p}),B.createElement("rect",z({x:r,y:l,width:x,height:s-l,stroke:f,strokeWidth:p,fill:c,fillOpacity:m,rx:y,ry:v},R(g,{data:a,height:s-l,median:d,firstQuartile:s,thirdQuartile:l,min:n,max:o,x1:r,x2:r+x}))),B.createElement("line",z({className:"vx-boxplot-median",x1:r,y1:d,x2:r+x,y2:d,stroke:f,strokeWidth:p},R(P,{data:a,median:d,x1:r,x2:r+x}))),B.createElement("line",{x1:_,y1:s,x2:_,y2:n,stroke:f,strokeWidth:p}),B.createElement("line",z({className:"vx-boxplot-min",x1:_-x/4,y1:n,x2:_+x/4,y2:n,stroke:f,strokeWidth:p},R(E,{data:a,min:n,x1:_-x/4,x2:_+x/4}))),j&&B.createElement("rect",z({x:r,y:o,width:x,height:n-o,fillOpacity:"0"},R(q,{data:a,x1:r,x2:r+x,median:d,max:o,min:n,thirdQuartile:l,firstQuartile:s}))))},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("classnames"),require("prop-types"),require("@vx/group")):"function"==typeof define&&define.amd?define(["exports","react","classnames","prop-types","@vx/group"],t):t(e.vx=e.vx||{},e.React,e.classNames,e.PropTypes,e.vx)}(this,function(e,H,I,t,J){"use strict";H=H&&H.hasOwnProperty("default")?H.default:H,I=I&&I.hasOwnProperty("default")?I.default:I,t=t&&t.hasOwnProperty("default")?t.default:t;var K=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},L=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};function U(e){var t=e.x1,r=e.x2;return{x1:e.y1,x2:e.y2,y1:t,y2:r}}function r(e){var t=e.left,r=void 0===t?0:t,o=e.top,i=void 0===o?0:o,n=e.className,a=e.max,x=e.min,l=e.firstQuartile,s=e.thirdQuartile,m=e.median,c=e.boxWidth,u=e.fill,y=e.fillOpacity,d=e.stroke,p=e.strokeWidth,f=e.rx,h=void 0===f?2:f,b=e.ry,v=void 0===b?2:b,T=e.valueScale,P=e.outliers,k=void 0===P?[]:P,g=e.horizontal,O=e.medianProps,M=void 0===O?{}:O,W=e.maxProps,N=void 0===W?{}:W,j=e.minProps,E=void 0===j?{}:j,w=e.boxProps,F=void 0===w?{}:w,A=e.outlierProps,Q=void 0===A?{}:A,q=e.container,S=void 0!==q&&q,z=e.containerProps,R=void 0===z?{}:z,_=e.children,B=g?i:r,D=B+c/2,G=T.range(),C={valueRange:G,center:D,offset:B,boxWidth:c,max:{x1:D-c/4,x2:D+c/4,y1:T(a),y2:T(a)},maxToThird:{x1:D,x2:D,y1:T(a),y2:T(s)},median:{x1:B,x2:B+c,y1:T(m),y2:T(m)},minToFirst:{x1:D,x2:D,y1:T(l),y2:T(x)},min:{x1:D-c/4,x2:D+c/4,y1:T(x),y2:T(x)},box:{x1:B,x2:c,y1:T(s),y2:Math.abs(T(s)-T(l))},container:{x1:B,x2:c,y1:Math.min.apply(Math,L(G)),y2:Math.abs(G[0]-G[1])}};return g&&(C.max=U(C.max),C.maxToThird=U(C.maxToThird),C.box=U(C.box),C.box.y1=T(l),C.median=U(C.median),C.minToFirst=U(C.minToFirst),C.min=U(C.min),C.container=U(C.container),C.container.y1=Math.min.apply(Math,L(G))),_?_(C):H.createElement(J.Group,{className:I("vx-boxplot",n)},k.map(function(e,t){var r=g?T(e):D,o=g?D:T(e);return H.createElement("circle",K({key:"vx-boxplot-outlier-"+t,className:"vx-boxplot-outlier",cx:r,cy:o,r:4,stroke:d,strokeWidth:p,fill:u,fillOpacity:y},Q))}),H.createElement("line",K({className:"vx-boxplot-max",x1:C.max.x1,y1:C.max.y1,x2:C.max.x2,y2:C.max.y2,stroke:d,strokeWidth:p},N)),H.createElement("line",{className:"vx-boxplot-max-to-third",x1:C.maxToThird.x1,y1:C.maxToThird.y1,x2:C.maxToThird.x2,y2:C.maxToThird.y2,stroke:d,strokeWidth:p}),H.createElement("rect",K({className:"vx-boxplot-box",x:C.box.x1,y:C.box.y1,width:C.box.x2,height:C.box.y2,stroke:d,strokeWidth:p,fill:u,fillOpacity:y,rx:h,ry:v},F)),H.createElement("line",K({className:"vx-boxplot-median",x1:C.median.x1,y1:C.median.y1,x2:C.median.x2,y2:C.median.y2,stroke:d,strokeWidth:p},M)),H.createElement("line",{className:"vx-boxplot-min-to-first",x1:C.minToFirst.x1,y1:C.minToFirst.y1,x2:C.minToFirst.x2,y2:C.minToFirst.y2,stroke:d,strokeWidth:p}),H.createElement("line",K({className:"vx-boxplot-min",x1:C.min.x1,y1:C.min.y1,x2:C.min.x2,y2:C.min.y2,stroke:d,strokeWidth:p},E)),S&&H.createElement("rect",K({x:C.container.x1,y:C.container.y1,width:C.container.x2,height:C.container.y2,fillOpacity:"0"},R)))}r.propTypes={left:t.number,top:t.number,className:t.string,max:t.number,min:t.number,firstQuartile:t.number,thirdQuartile:t.number,median:t.number,boxWidth:t.number,fill:t.string,fillOpacity:t.oneOfType([t.number,t.string]),stroke:t.string,strokeWidth:t.oneOfType([t.number,t.string]),rx:t.number,ry:t.number,valueScale:t.func,outliers:t.array,horizontal:t.bool,medianProps:t.object,maxProps:t.object,minProps:t.object,boxProps:t.object,outlierProps:t.object,container:t.bool,containerProps:t.object,children:t.func},e.BoxPlot=r,e.computeStats=function(e){for(var t=[].concat(L(e)).sort(function(e,t){return e-t}),r=t.length,o=t[Math.round(r/4)],i=t[Math.round(3*r/4)],n=i-o,a=o-1.5*n,x=i+1.5*n,l=t.filter(function(e){return e<a||x<e}),s=2*n*Math.pow(r-l.length,-1/3),m=Math.round((x-a)/s),c=(x-a)/m,u=Array(m+2).fill(0),y=Array(m+2).fill(a),d=1;d<=m;d+=1)y[d]+=c*(d-.5);y[y.length-1]=x,t.filter(function(e){return a<=e&&e<=x}).forEach(function(e){u[Math.floor((e-a)/c)+1]+=1});var p=y.map(function(e,t){return{value:e,count:u[t]}});return{boxPlot:{min:a,firstQuartile:o,median:t[Math.round(r/2)],thirdQuartile:i,max:x,outliers:l},binData:p}},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "@vx/boxplot",
-  "version": "0.0.170",
+  "version": "0.0.181",
   "description": "vx box plot",
@@ -38,3 +38,4 @@ "sideEffects": false,
     "@vx/group": "0.0.170",
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.5.10"
   },
@@ -41,0 +42,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28927

increased by56.62%

Lines of code

625

increased by71.7%

Worsened metrics

Dependency count

4

increased by33.33%

Number of package files

7

decreased by-12.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.5.10