'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _mockData2 = _interopRequireDefault(_mockData);

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

var _group2 = _interopRequireDefault(_group);

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

var _shape2 = _interopRequireDefault(_shape);

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

var _scale2 = _interopRequireDefault(_scale);

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

var _pattern2 = _interopRequireDefault(_pattern);

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


var data = _mockData2.default.letterFrequency;

function round(value, precision) {
  var multiplier = Math.pow(10, precision || 0);
  return Math.round(value * multiplier) / multiplier;
}

exports.default = function (_ref) {
  var width = _ref.width,
      height = _ref.height,
      margin = _ref.margin;

  // accessors
  var x = function x(d) {
    return d.letter;
  };
  var y = function y(d) {
    return +d.frequency * 100;
  };

  // bounds
  var xMax = width - margin.left - margin.right;
  var yMax = height - margin.top - margin.bottom;

  // scales
  var xScale = _scale2.default.scaleBand({
    rangeRound: [0, xMax],
    domain: data.map(x),
    padding: 0.4
  });
  var yScale = _scale2.default.scaleLinear({
    rangeRound: [yMax, 0],
    domain: [0, (0, _d3Array.max)(data, y)]
  });

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 41
    }
  }, _react2.default.createElement(_pattern2.default.Lines, {
    id: 'lines',
    height: 5,
    width: 5,
    stroke: 'black',
    strokeWidth: 1,
    orientation: ['diagonal'],
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42
    }
  }), data.map(function (d, i) {
    var barHeight = yMax - yScale(y(d));
    return _react2.default.createElement(_group2.default, { key: 'bar-' + x(d), left: margin.left, top: margin.top, __source: {
        fileName: _jsxFileName,
        lineNumber: 53
      }
    }, _react2.default.createElement(_shape2.default.Bar, {
      width: xScale.bandwidth(),
      height: barHeight,
      x: xScale(x(d)),
      y: yMax - barHeight,
      fill: 'url(\'#lines\')',
      stroke: 'black',
      strokeWidth: 1,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54
      }
    }), _react2.default.createElement('text', {
      x: xScale(x(d)),
      y: yMax - barHeight,
      fill: 'black',
      fontSize: 14,
      dy: '-.2em',
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63
      }
    }, round(y(d)) + '%'), _react2.default.createElement('text', {
      x: xScale(x(d)),
      y: yMax,
      fill: 'black',
      fontSize: 14,
      dx: '.32em',
      dy: '1em',
      __source: {
        fileName: _jsxFileName,
        lineNumber: 72
      }
    }, x(d)));
  }));
};