Recharts Piechart - 在饼图的每个部分有条件地显示标签

Question

我需要使用React Recharts制作带有三个部分的饼图。

我有两个问题：

1. 在鼠标悬停时，我想在工具提示中显示带百分比的文本。如何在工具提示中获得百分比值？

2. 在尺寸变化时，如果饼图中的某些部分太小，我需要隐藏标签;如何实现这个目标？

我的示例代码

const {PieChart, Pie, Sector} = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
                  {name: 'Group C', value: 300}, {name: 'Group D', value: 200}]; 
function renderCustomToolTip({active, label, payload}) {
  return(
  <div>
    <p> payload[0].label </p>
// need to add percentage value in tooltip
  </div>
);
}
class PieChart extends from React.Component{
    constructor() {
        super(props);
        this.state = {
            activeIndex: 0
        }
    }
    onPieEnter(data, index) {
        this.setState({
          activeIndex: index,
        });
      }
      render () {
        return (
            <div>
                <PieChart width={800} height={400}>
                <Pie 
                    activeIndex={this.state.activeIndex}
                    activeShape={renderActiveShape} 
                    data={data} 
                    cx={300} 
                    cy={200} 
                    innerRadius={60}
                    outerRadius={80} 
                    fill="#8884d8"
                    labelLine={false}
                    label={renderCustomizedLabel}
                    onMouseEnter={this.onPieEnter}
                />
          {
            data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
          <ToolTip content={renderCustomToolTip} />
          </PieChart>
         </div>
      );
    }
}

使用activeShape，能够获取每个部分的百分比值，但我需要在工具提示中显示百分比。

感谢。