'use strict';

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

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _palette = require('../../../palette');

var _palette2 = _interopRequireDefault(_palette);

var _d3Shape = require('d3-shape');

var shape = _interopRequireWildcard(_d3Shape);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var d3 = Object.assign({}, shape);

var twoPi = Math.PI * 2;

var CircleChart = function CircleChart(props) {
  var color = props.color,
      border = props.border,
      endPercent = props.endPercent,
      endPercentValue = props.endPercentValue,
      radius = props.radius,
      padding = props.padding,
      backgroundOpacity = props.backgroundOpacity,
      rest = _objectWithoutProperties(props, ['color', 'border', 'endPercent', 'endPercentValue', 'radius', 'padding', 'backgroundOpacity']);

  var center = radius + padding;
  var boxSize = (radius + padding) * 2;

  var arc = d3.arc().startAngle(0).innerRadius(radius).outerRadius(radius - border);
  var arcbg = d3.arc().startAngle(0).innerRadius(radius - 4).outerRadius(radius - 1);

  return _react2.default.createElement(
    'div',
    rest,
    _react2.default.createElement(
      'svg',
      { width: boxSize, height: boxSize },
      _react2.default.createElement(
        'g',
        { transform: 'translate(' + center + ',' + center + ')' },
        _react2.default.createElement(
          'g',
          { className: 'progress-meter' },
          _react2.default.createElement('path', {
            className: 'background',
            fill: '#8faec1',
            fillOpacity: backgroundOpacity,
            d: arcbg.endAngle(twoPi)()
          }),
          _react2.default.createElement('path', {
            className: 'foreground',
            fill: color,
            fillOpacity: '1',
            d: arc.endAngle(twoPi * endPercent)()
          }),
          _react2.default.createElement(
            'text',
            {
              className: 'current-progress',
              fill: color,
              textAnchor: 'middle',
              dy: '.35em',
              fontSize: '2.5em',
              fontWeight: '300'
            },
            endPercentValue
          )
        )
      )
    )
  );
};

CircleChart.propTypes = {
  color: _propTypes2.default.string,
  border: _propTypes2.default.number,
  endPercent: _propTypes2.default.number,
  radius: _propTypes2.default.number,
  padding: _propTypes2.default.number,
  endPercentValue: _propTypes2.default.string,
  backgroundOpacity: _propTypes2.default.number
};

CircleChart.defaultProps = {
  color: _palette2.default.blue,
  border: 5,
  padding: 10,
  endPercent: 0.45,
  radius: 45,
  backgroundOpacity: 0.5
};

exports.default = CircleChart;
//# sourceMappingURL=CircleChart.js.map