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

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

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

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

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/bargroup.js';


var data = _mockData.cityTemperature.slice(0, 8);
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 x0 = function x0(d) {
  return d.date;
};
var y = function y(d) {
  return d.value;
};

exports.default = 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;

  if (width < 10) return null;

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

  // // scales
  var x0Scale = (0, _scale.scaleBand)({
    rangeRound: [0, xMax],
    domain: data.map(x0),
    padding: 0.2,
    tickFormat: function tickFormat() {
      return function (val) {
        return formatDate(val);
      };
    }
  });
  var x1Scale = (0, _scale.scaleBand)({
    rangeRound: [0, x0Scale.bandwidth()],
    domain: keys,
    padding: .1
  });
  var yScale = (0, _scale.scaleLinear)({
    rangeRound: [yMax, 0],
    domain: [0, (0, _d3Array.max)(data, function (d) {
      return (0, _d3Array.max)(keys, function (key) {
        return d[key];
      });
    })]
  });
  var zScale = (0, _scale.scaleOrdinal)({
    domain: keys,
    range: ['#aeeef8', '#e5fd3d', '#9caff6']
  });

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 58
    }
  }, _react2.default.createElement('rect', {
    x: 0,
    y: 0,
    width: width,
    height: height,
    fill: '#612efb',
    rx: 14,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59
    }
  }), _react2.default.createElement(_shape.BarGroup, {
    top: margin.top,
    data: data,
    keys: keys,
    height: yMax,
    x0: x0,
    x0Scale: x0Scale,
    x1Scale: x1Scale,
    yScale: yScale,
    zScale: zScale,
    rx: 4,
    onClick: function onClick(data) {
      return function (event) {
        if (!events) return;
        alert('clicked: ' + (0, _stringify2.default)(data));
      };
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67
    }
  }), _react2.default.createElement(_axis.AxisBottom, {
    scale: x0Scale,
    top: yMax + margin.top,
    stroke: '#e5fd3d',
    tickStroke: '#e5fd3d',
    hideAxisLine: true,
    tickLabelProps: function tickLabelProps(value, index) {
      return {
        fill: '#e5fd3d',
        fontSize: 11,
        textAnchor: 'middle'
      };
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83
    }
  }));
};