@data-ui/xy-chart/lib/series/ViolinPlotSeries.js

A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui

"use strict";

exports.__esModule = true;
exports.default = ViolinPlotSeries;

var _shared = require("@data-ui/shared");

var _group = require("@vx/group");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _theme = require("@data-ui/theme");

var _stats = require("@vx/stats");

var _chartUtils = require("../utils/chartUtils");

var _sharedSeriesProps = _interopRequireDefault(require("../utils/sharedSeriesProps"));

var _propShapes = require("../utils/propShapes");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var propTypes = _extends({}, _sharedSeriesProps.default, {
  data: _propShapes.violinPlotSeriesDataShape.isRequired,
  horizontal: _propTypes.default.bool,
  fill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  widthRatio: _propTypes.default.number
});

var defaultProps = {
  stroke: _theme.color.darkGray,
  strokeWidth: 2,
  fill: _theme.color.default,
  horizontal: false,
  widthRatio: 1
};
var MAX_BOX_WIDTH = 50;

var x = function x(d) {
  return d.x;
};

var y = function y(d) {
  return d.y;
};

function ViolinPlotSeries(_ref) {
  var data = _ref.data,
      fill = _ref.fill,
      stroke = _ref.stroke,
      strokeWidth = _ref.strokeWidth,
      xScale = _ref.xScale,
      yScale = _ref.yScale,
      horizontal = _ref.horizontal,
      widthRatio = _ref.widthRatio,
      disableMouseEvents = _ref.disableMouseEvents,
      onMouseMove = _ref.onMouseMove,
      onMouseLeave = _ref.onMouseLeave,
      onClick = _ref.onClick;
  if (!xScale || !yScale) return null;
  var offsetScale = horizontal ? yScale : xScale;
  var offsetValue = horizontal ? y : x;
  var valueScale = horizontal ? xScale : yScale;
  var boxWidth = offsetScale.bandwidth();
  var actualWidth = Math.min(MAX_BOX_WIDTH, boxWidth);
  var offset = (offsetScale.offset || 0) - (boxWidth - actualWidth) / 2;
  var offsetPropName = horizontal ? 'top' : 'left';

  var offsetProp = function offsetProp(d) {
    var _ref2;

    return _ref2 = {}, _ref2[offsetPropName] = offsetScale(offsetValue(d)) - offset + (1 - widthRatio) / 2 * actualWidth, _ref2;
  };

  return _react.default.createElement(_group.Group, null, data.map(function (d, i) {
    return _react.default.createElement(_shared.FocusBlurHandler, {
      key: offsetValue(d),
      onBlur: disableMouseEvents ? null : onMouseLeave,
      onFocus: disableMouseEvents ? null : function (event) {
        onMouseMove({
          event: event,
          data: data,
          datum: d,
          index: i
        });
      }
    }, _react.default.createElement(_stats.ViolinPlot, _extends({}, offsetProp(d), {
      binData: d.binData,
      width: actualWidth * widthRatio,
      fill: d.fill || (0, _chartUtils.callOrValue)(fill, d, i),
      stroke: d.stroke || (0, _chartUtils.callOrValue)(stroke, d, i),
      strokeWidth: d.strokeWidth || (0, _chartUtils.callOrValue)(strokeWidth, d, i),
      valueScale: valueScale,
      horizontal: horizontal,
      onMouseMove: disableMouseEvents ? null : onMouseMove && function () {
        return function (event) {
          onMouseMove({
            event: event,
            data: data,
            datum: d,
            index: i
          });
        };
      },
      onMouseLeave: disableMouseEvents ? null : onMouseLeave && function () {
        return onMouseLeave;
      },
      onClick: disableMouseEvents ? null : onClick && function () {
        return function (event) {
          onClick({
            event: event,
            data: data,
            datum: d,
            index: i
          });
        };
      }
    })));
  }));
}

ViolinPlotSeries.propTypes = propTypes;
ViolinPlotSeries.defaultProps = defaultProps;
ViolinPlotSeries.displayName = 'ViolinPlotSeries';