import React, {Component} from 'react';
import './App.css';
import {PieChart, Pie, Sector} from 'recharts'

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
  { name: 'Group D', value: 200 },
];

const renderActiveShape = (props) => {
  const RADIAN = Math.PI / 180;
  const {
    cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
    fill, payload,
  } = props;
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const mx = cx + (innerRadius - 18) * cos;
  const my = cy + (innerRadius - 18) * sin;
  const ex = mx + (cos >= 0 ? 1 : -1) * 10;
  const ey = my;
  return (
    <g>
      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <g transform={`translate(${ex + (cos >= 0 ? 1 : -1) * 2} ${ey})`}>
        <g transform={`rotate(${-midAngle + 180})`}>
          {/* Draw the triangle with custom shape */}
          <polygon points="5,-5 5,5 -5,0 " style={{fill:'lime', stroke:'purple', strokeWidth:'1' }}/>
        </g>
      </g>
    </g>
  );
};

class PieCustom extends Component{
  state = {
    activeIndex: 0,
  };

  onPieEnter = (data, index) => {
    this.setState({
      activeIndex: index,
    });
  };

  render(){
  return (
    <div>
      <PieChart width={400} height={400}>
        <Pie
          activeIndex={this.state.activeIndex}
          activeShape={renderActiveShape}
          data={data}
          cx={200}
          cy={200}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
          onMouseEnter={this.onPieEnter}
        />
      </PieChart>
    </div>
  );
  }
}


function App() {
  return <PieCustom />
}

export default App;