'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _gradient = require('@vx/gradient');

var _scale = require('@vx/scale');

var _mockData = require('@vx/mock-data');

var _tooltip = require('@vx/tooltip');

var _d3Array = require('d3-array');

var _d3Format = require('d3-format');

var _pattern = require('@vx/pattern');

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/tiles/boxplot.js';


var data = (0, _mockData.genStats)(5);
var twoDecimalFormat = (0, _d3Format.format)('.2f');

// accessors
var x = function x(d) {
  return d.boxPlot.x;
};
var min = function min(d) {
  return d.boxPlot.min;
};
var max = function max(d) {
  return d.boxPlot.max;
};
var median = function median(d) {
  return d.boxPlot.median;
};
var firstQuartile = function firstQuartile(d) {
  return d.boxPlot.firstQuartile;
};
var thirdQuartile = function thirdQuartile(d) {
  return d.boxPlot.thirdQuartile;
};
var outliers = function outliers(d) {
  return d.boxPlot.outliers;
};

exports.default = (0, _tooltip.withTooltip)(function (_ref) {
  var width = _ref.width,
      height = _ref.height,
      _ref$events = _ref.events,
      events = _ref$events === undefined ? false : _ref$events,
      tooltipOpen = _ref.tooltipOpen,
      tooltipLeft = _ref.tooltipLeft,
      tooltipTop = _ref.tooltipTop,
      tooltipData = _ref.tooltipData,
      showTooltip = _ref.showTooltip,
      hideTooltip = _ref.hideTooltip;

  if (width < 10) return null;

  // bounds
  var xMax = width;
  var yMax = height - 120;

  // scales
  var xScale = (0, _scale.scaleBand)({
    rangeRound: [0, xMax],
    domain: data.map(x),
    padding: 0.4
  });

  var values = data.reduce(function (r, _ref2) {
    var e = _ref2.boxPlot;
    return r.push(e.min, e.max) && r;
  }, []);
  var minYValue = Math.min.apply(Math, (0, _toConsumableArray3.default)(values));
  var maxYValue = Math.max.apply(Math, (0, _toConsumableArray3.default)(values));
  var yDomain = [minYValue - 0.1 * Math.abs(minYValue), maxYValue + 0.1 * Math.abs(minYValue)];

  var yScale = (0, _scale.scaleLinear)({
    rangeRound: [yMax, 0],
    domain: [minYValue, maxYValue]
  });

  var boxWidth = xScale.bandwidth();
  var actualyWidth = Math.min(40, boxWidth);

  return _react2.default.createElement('div', { style: { position: 'relative' }, __source: {
      fileName: _jsxFileName,
      lineNumber: 63
    }
  }, _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 64
    }
  }, _react2.default.createElement(_gradient.LinearGradient, { id: 'boxplot', to: '#8b6ce7', from: '#87f2d4', __source: {
      fileName: _jsxFileName,
      lineNumber: 65
    }
  }), _react2.default.createElement('rect', { x: 0, y: 0, width: width, height: height, fill: 'url(#boxplot)', rx: 14, __source: {
      fileName: _jsxFileName,
      lineNumber: 66
    }
  }), _react2.default.createElement(_pattern.PatternLines, {
    id: 'hViolinLines',
    height: 3,
    width: 3,
    stroke: '#ced4da',
    strokeWidth: 1,
    fill: 'rgba(0,0,0,0.3)',
    orientation: ['horizontal'],
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67
    }
  }), _react2.default.createElement(_group.Group, { top: 40, __source: {
      fileName: _jsxFileName,
      lineNumber: 76
    }
  }, data.map(function (d, i) {
    return _react2.default.createElement('g', { key: i, __source: {
        fileName: _jsxFileName,
        lineNumber: 78
      }
    }, _react2.default.createElement(_stats.ViolinPlot, {
      stroke: '#dee2e6',
      binData: d.binData,
      left: xScale(x(d)),
      width: actualyWidth,
      valueScale: yScale,
      fill: 'url(#hViolinLines)',
      __source: {
        fileName: _jsxFileName,
        lineNumber: 79
      }
    }), _react2.default.createElement(_stats.BoxPlot, {
      data: d,
      min: min(d),
      max: max(d),
      left: xScale(x(d)) + 0.3 * actualyWidth,
      firstQuartile: firstQuartile(d),
      thirdQuartile: thirdQuartile(d),
      median: median(d),
      boxWidth: actualyWidth * 0.4,
      fill: '#FFFFFF',
      fillOpacity: 0.3,
      stroke: '#FFFFFF',
      strokeWidth: 2,
      valueScale: yScale,
      outliers: outliers(d),
      minProps: {
        onMouseOver: function onMouseOver(data) {
          return function (event) {
            showTooltip({
              tooltipTop: yScale(data.data.boxPlot.min) + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: {
                min: data.data.boxPlot.min,
                name: x(d)
              }
            });
          };
        },
        onMouseLeave: function onMouseLeave(event) {
          return function (event) {
            hideTooltip();
          };
        }
      },
      maxProps: {
        onMouseOver: function onMouseOver(data) {
          return function (event) {
            showTooltip({
              tooltipTop: yScale(data.data.boxPlot.max) + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: {
                max: data.data.boxPlot.max,
                name: x(d)
              }
            });
          };
        },
        onMouseLeave: function onMouseLeave(event) {
          return function (event) {
            hideTooltip();
          };
        }
      },
      boxProps: {
        onMouseOver: function onMouseOver(data) {
          return function (event) {
            showTooltip({
              tooltipTop: yScale(data.data.boxPlot.median) + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: (0, _extends3.default)({}, data.data.boxPlot, {
                name: x(d)
              })
            });
          };
        },
        onMouseLeave: function onMouseLeave(event) {
          return function (event) {
            hideTooltip();
          };
        }
      },
      medianProps: {
        style: {
          stroke: 'white'
        },
        onMouseOver: function onMouseOver(data) {
          return function (event) {
            showTooltip({
              tooltipTop: data.median + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: {
                median: data.data.boxPlot.median,
                name: x(d)
              }
            });
          };
        },
        onMouseLeave: function onMouseLeave(data) {
          return function (event) {
            hideTooltip();
          };
        }
      },
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87
      }
    }));
  }))), tooltipOpen && _react2.default.createElement(_tooltip.Tooltip, {
    top: tooltipTop,
    left: tooltipLeft,
    style: { backgroundColor: '#283238', color: 'white' },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 171
    }
  }, _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 176
    }
  }, _react2.default.createElement('strong', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 177
    }
  }, tooltipData.name)), _react2.default.createElement('div', { style: { marginTop: '5px', fontSize: '12px' }, __source: {
      fileName: _jsxFileName,
      lineNumber: 179
    }
  }, tooltipData.max && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 180
    }
  }, 'max: ', tooltipData.max), tooltipData.thirdQuartile && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 181
    }
  }, 'third quartile: ', tooltipData.thirdQuartile), tooltipData.median && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 182
    }
  }, 'median: ', tooltipData.median), tooltipData.firstQuartile && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 183
    }
  }, 'first quartile: ', tooltipData.firstQuartile), tooltipData.min && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 184
    }
  }, 'min: ', tooltipData.min))));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 