'use strict';

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

var _objectDestructuringEmpty2 = require('babel-runtime/helpers/objectDestructuringEmpty');

var _objectDestructuringEmpty3 = _interopRequireDefault(_objectDestructuringEmpty2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Codeblock = require('./Codeblock');

var _Codeblock2 = _interopRequireDefault(_Codeblock);

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

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

exports.default = function (_ref) {
  (0, _objectDestructuringEmpty3.default)(_ref);

  return _react2.default.createElement(_Codeblock2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    }
  }, '// SimpleBar.js\nimport React from \'react\';\nimport Mock from \'@vx/mock-data\';\nimport Group from \'@vx/group\';\nimport Shape from \'@vx/shape\';\nimport Scale from \'@vx/scale\';\nimport Pattern from \'@vx/pattern\';\nimport { max } from \'d3-array\';\n\nconst data = Mock.letterFrequency;\n\nfunction round(value, precision) {\n  var multiplier = Math.pow(10, precision || 0);\n  return Math.round(value * multiplier) / multiplier;\n}\n\nexport default ({\n  width,\n  height,\n  margin,\n}) => {\n  // accessors\n  const x = d => d.letter;\n  const y = d => +d.frequency * 100;\n\n  // bounds\n  const xMax = width - margin.left - margin.right;\n  const yMax = height - margin.top - margin.bottom;\n\n  // scales\n  const xScale = Scale.scaleBand({\n    rangeRound: [0, xMax],\n    domain: data.map(x),\n    padding: 0.4,\n  });\n  const yScale = Scale.scaleLinear({\n    rangeRound: [yMax, 0],\n    domain: [0, max(data, y)],\n  });\n\n  return (\n    <svg width={width} height={height}>\n      <Pattern.Lines\n        id="lines"\n        height={5}\n        width={5}\n        stroke={\'black\'}\n        strokeWidth={1}\n        orientation={[\'diagonal\']}\n      />\n      {data.map((d, i) => {\n        const barHeight = yMax - yScale(y(d));\n        return (\n          <Group key={\'bar-{x(d)}\'} left={margin.left} top={margin.top}>\n            <Shape.Bar\n              width={xScale.bandwidth()}\n              height={barHeight}\n              x={xScale(x(d))}\n              y={yMax - barHeight}\n              fill="url(\'#lines\')"\n              stroke={\'black\'}\n              strokeWidth={1}\n            />\n            <text\n              x={xScale(x(d))}\n              y={yMax-barHeight}\n              fill="black"\n              fontSize={14}\n              dy={\'-.2em\'}\n            >\n              {\'{round(y(d))}%\'}\n            </text>\n            <text\n              x={xScale(x(d))}\n              y={yMax}\n              fill="black"\n              fontSize={14}\n              dx={\'.32em\'}\n              dy={\'1em\'}\n            >\n              {x(d)}\n            </text>\n          </Group>\n        );\n      })}\n    </svg>\n  );\n}');
};