'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 _boxplot = require('@vx/boxplot');

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');

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.genBoxPlot)(5);
var twoDecimalFormat = (0, _d3Format.format)('.2f');

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

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, e) {
    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: 67
    }
  }, _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 68
    }
  }, _react2.default.createElement(_gradient.LinearGradient, { id: 'boxplot', to: '#8b6ce7', from: '#87f2d4', __source: {
      fileName: _jsxFileName,
      lineNumber: 69
    }
  }), _react2.default.createElement('rect', {
    x: 0,
    y: 0,
    width: width,
    height: height,
    fill: 'url(#boxplot)',
    rx: 14,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70
    }
  }), _react2.default.createElement(_group.Group, { top: 40, __source: {
      fileName: _jsxFileName,
      lineNumber: 78
    }
  }, data.map(function (d, i) {
    return _react2.default.createElement(_boxplot.BoxPlot, {
      key: i,
      data: d,
      min: yScale(min(d)),
      max: yScale(max(d)),
      left: xScale(x(d)),
      firstQuartile: yScale(firstQuartile(d)),
      thirdQuartile: yScale(thirdQuartile(d)),
      median: yScale(median(d)),
      boxWidth: actualyWidth,
      fill: '#FFFFFF',
      fillOpacity: 0.3,
      stroke: '#FFFFFF',
      strokeWidth: 2,
      minProps: {
        onMouseOver: function onMouseOver(data) {
          return function (event) {
            showTooltip({
              tooltipTop: yScale(data.data.min) + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: {
                min: data.data.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.max) + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: {
                max: data.data.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.median) + 40,
              tooltipLeft: data.x2 + 5,
              tooltipData: (0, _extends3.default)({}, data.data, {
                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.median,
                name: x(d)
              }
            });
          };
        },
        onMouseLeave: function onMouseLeave(data) {
          return function (event) {
            hideTooltip();
          };
        }
      },
      __source: {
        fileName: _jsxFileName,
        lineNumber: 80
      }
    });
  }))), tooltipOpen && _react2.default.createElement(_tooltip.Tooltip, {
    top: tooltipTop,
    left: tooltipLeft,
    style: { backgroundColor: '#283238', color: 'white' },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 162
    }
  }, _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 167
    }
  }, _react2.default.createElement('strong', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 168
    }
  }, tooltipData.name)), _react2.default.createElement('div', { style: { marginTop: '5px', fontSize: '12px' }, __source: {
      fileName: _jsxFileName,
      lineNumber: 172
    }
  }, tooltipData.max && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 174
    }
  }, 'max: ', tooltipData.max), tooltipData.thirdQuartile && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 178
    }
  }, '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: 186
    }
  }, 'first quartile: ', tooltipData.firstQuartile), tooltipData.min && _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 190
    }
  }, 'min: ', tooltipData.min))));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 