'use strict';

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

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _shape = require('@vx/shape');

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

var _grid = require('@vx/grid');

var _axis = require('@vx/axis');

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

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

var _d3TimeFormat = require('d3-time-format');

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

var _legend = require('@vx/legend');

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

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

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


var data = _mockData.cityTemperature.slice(0, 12);

var keys = (0, _keys2.default)(data[0]).filter(function (d) {
  return d !== 'date';
});
var parseDate = (0, _d3TimeFormat.timeParse)('%Y%m%d');
var format = (0, _d3TimeFormat.timeFormat)('%b %d');
var formatDate = function formatDate(date) {
  return format(parseDate(date));
};

// accessors
var x = function x(d) {
  return d.date;
};
var y = function y(d) {
  return d.value;
};

var totals = data.reduce(function (ret, cur) {
  var t = keys.reduce(function (dailyTotal, k) {
    dailyTotal += +cur[k];
    return dailyTotal;
  }, 0);
  ret.push(t);
  return ret;
}, []);

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,
      _ref$margin = _ref.margin,
      margin = _ref$margin === undefined ? {
    top: 40
  } : _ref$margin,
      tooltipOpen = _ref.tooltipOpen,
      tooltipLeft = _ref.tooltipLeft,
      tooltipTop = _ref.tooltipTop,
      tooltipData = _ref.tooltipData,
      hideTooltip = _ref.hideTooltip,
      showTooltip = _ref.showTooltip;

  if (width < 10) return null;

  // bounds
  var xMax = width;
  var yMax = height - margin.top - 100;

  // // scales
  var xScale = (0, _scale.scaleBand)({
    rangeRound: [0, xMax],
    domain: data.map(x),
    padding: 0.2,
    tickFormat: function tickFormat() {
      return function (val) {
        return formatDate(val);
      };
    }
  });
  var yScale = (0, _scale.scaleLinear)({
    rangeRound: [yMax, 0],
    nice: true,
    domain: [0, (0, _d3Array.max)(totals)]
  });
  var zScale = (0, _scale.scaleOrdinal)({
    domain: keys,
    range: ['#6c5efb', '#c998ff', '#a44afe']
  });

  var tooltipTimeout = void 0;

  return _react2.default.createElement('div', { style: { position: 'relative' }, __source: {
      fileName: _jsxFileName,
      lineNumber: 74
    }
  }, _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 75
    }
  }, _react2.default.createElement('rect', { x: 0, y: 0, width: width, height: height, fill: '#eaedff', rx: 14, __source: {
      fileName: _jsxFileName,
      lineNumber: 76
    }
  }), _react2.default.createElement(_grid.Grid, {
    top: margin.top,
    left: margin.left,
    xScale: xScale,
    yScale: yScale,
    width: xMax,
    height: yMax,
    stroke: 'black',
    strokeOpacity: 0.1,
    xOffset: xScale.bandwidth() / 2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77
    }
  }), _react2.default.createElement(_shape.BarStack, {
    top: margin.top,
    data: data,
    keys: keys,
    height: yMax,
    x: x,
    xScale: xScale,
    yScale: yScale,
    zScale: zScale,
    onClick: function onClick(data) {
      return function (event) {
        if (!events) return;
        alert('clicked: ' + (0, _stringify2.default)(data));
      };
    },
    onMouseLeave: function onMouseLeave(data) {
      return function (event) {
        tooltipTimeout = setTimeout(function () {
          hideTooltip();
        }, 300);
      };
    },
    onMouseMove: function onMouseMove(data) {
      return function (event) {
        if (tooltipTimeout) clearTimeout(tooltipTimeout);
        var top = event.clientY - margin.top - data.height;
        var left = xScale(data.x) + data.width + data.paddingInner * data.step / 2;
        showTooltip({
          tooltipData: data,
          tooltipTop: top,
          tooltipLeft: left
        });
      };
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88
    }
  }), _react2.default.createElement(_axis.AxisBottom, {
    scale: xScale,
    top: yMax + margin.top,
    stroke: '#a44afe',
    tickStroke: '#a44afe',
    tickLabelProps: function tickLabelProps(value, index) {
      return {
        fill: '#a44afe',
        fontSize: 11,
        textAnchor: 'middle'
      };
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 117
    }
  })), _react2.default.createElement('div', {
    style: {
      position: 'absolute',
      top: margin.top / 2 - 10,
      width: '100%',
      display: 'flex',
      justifyContent: 'center',
      fontSize: '14px'
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 129
    }
  }, _react2.default.createElement(_legend.LegendOrdinal, { scale: zScale, direction: 'row', labelMargin: '0 15px 0 0', __source: {
      fileName: _jsxFileName,
      lineNumber: 139
    }
  })), tooltipOpen && _react2.default.createElement(_tooltip.Tooltip, {
    top: tooltipTop,
    left: tooltipLeft,
    style: {
      minWidth: 60,
      backgroundColor: 'rgba(0,0,0,0.9)',
      color: 'white'
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 142
    }
  }, _react2.default.createElement('div', { style: { color: zScale(tooltipData.key) }, __source: {
      fileName: _jsxFileName,
      lineNumber: 151
    }
  }, _react2.default.createElement('strong', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 152
    }
  }, tooltipData.key)), _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 154
    }
  }, tooltipData.data[tooltipData.key], '\u2109'), _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 155
    }
  }, _react2.default.createElement('small', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 156
    }
  }, tooltipData.xFormatted))));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 