import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React, { PureComponent } from 'react';
import { PieChart, Pie, Sector, Cell } from 'recharts';
var COLORS = ['#0481C3', '#00B485', '#1A4262', '#EF404C'];
var data = [{
  name: 'Group A',
  value: 400
}, {
  name: 'Group B',
  value: 300
}, {
  name: 'Group C',
  value: 300
}, {
  name: 'Group D',
  value: 200
}];

var renderActiveShape = function renderActiveShape(props) {
  var RADIAN = Math.PI / 180;
  var cx = props.cx,
      cy = props.cy,
      midAngle = props.midAngle,
      innerRadius = props.innerRadius,
      outerRadius = props.outerRadius,
      startAngle = props.startAngle,
      endAngle = props.endAngle,
      fill = props.fill,
      payload = props.payload,
      percent = props.percent,
      value = props.value;
  var sin = Math.sin(-RADIAN * midAngle);
  var cos = Math.cos(-RADIAN * midAngle);
  var sx = cx + (outerRadius + 10) * cos;
  var sy = cy + (outerRadius + 10) * sin;
  var mx = cx + (outerRadius + 30) * cos;
  var my = cy + (outerRadius + 30) * sin;
  var ex = mx + (cos >= 0 ? 1 : -1) * 22;
  var ey = my;
  var textAnchor = cos >= 0 ? 'start' : 'end';
  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("text", {
    x: cx,
    y: cy,
    dy: 8,
    textAnchor: "middle",
    fill: fill
  }, payload.name), /*#__PURE__*/React.createElement(Sector, {
    cx: cx,
    cy: cy,
    innerRadius: innerRadius,
    outerRadius: outerRadius,
    startAngle: startAngle,
    endAngle: endAngle,
    fill: fill
  }), /*#__PURE__*/React.createElement(Sector, {
    cx: cx,
    cy: cy,
    startAngle: startAngle,
    endAngle: endAngle,
    innerRadius: outerRadius + 6,
    outerRadius: outerRadius + 10,
    fill: fill
  }), /*#__PURE__*/React.createElement("path", {
    d: "M".concat(sx, ",").concat(sy, "L").concat(mx, ",").concat(my, "L").concat(ex, ",").concat(ey),
    stroke: fill,
    fill: "none"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: ex,
    cy: ey,
    r: 2,
    fill: fill,
    stroke: "none"
  }), /*#__PURE__*/React.createElement("text", {
    x: ex + (cos >= 0 ? 1 : -1) * 12,
    y: ey,
    textAnchor: textAnchor,
    fill: "#333"
  }, "PV ".concat(value)), /*#__PURE__*/React.createElement("text", {
    x: ex + (cos >= 0 ? 1 : -1) * 12,
    y: ey,
    dy: 18,
    textAnchor: textAnchor,
    fill: "#999"
  }, "(Rate ".concat((percent * 100).toFixed(2), "%)")));
};

export var PieChartExample = /*#__PURE__*/function (_PureComponent) {
  _inherits(PieChartExample, _PureComponent);

  var _super = _createSuper(PieChartExample);

  function PieChartExample() {
    var _this;

    _classCallCheck(this, PieChartExample);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      activeIndex: 0
    });

    _defineProperty(_assertThisInitialized(_this), "onPieEnter", function (data, index) {
      _this.setState({
        activeIndex: index
      });
    });

    return _this;
  }

  _createClass(PieChartExample, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(PieChart, {
        width: 400,
        height: 400
      }, /*#__PURE__*/React.createElement(Pie, {
        activeIndex: this.state.activeIndex,
        activeShape: renderActiveShape,
        data: data,
        cx: 200,
        cy: 200,
        innerRadius: 60,
        outerRadius: 80,
        fill: "#8884d8",
        dataKey: "value",
        onMouseEnter: this.onPieEnter
      }, data.map(function (entry, index) {
        return /*#__PURE__*/React.createElement(Cell, {
          key: "cell-".concat(index),
          fill: COLORS[index % COLORS.length]
        });
      })));
    }
  }]);

  return PieChartExample;
}(PureComponent);

_defineProperty(PieChartExample, "jsfiddleUrl", 'https://jsfiddle.net/alidingling/hqnrgxpj/');