{"size": 973, "ext": "js", "max_stars_repo_path": "src/components/PieChart/index.js", "max_stars_repo_name": "arielsvn/refinebio-frontend", "max_stars_repo_stars_event_min_datetime": "2019-03-04T17:53:57.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-19T19:11:04.000Z", "max_issues_repo_path": "src/components/PieChart/index.js", "max_issues_repo_name": "arielsvn/refinebio-frontend", "max_issues_repo_issues_event_min_datetime": "2018-03-22T15:34:40.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-12T07:10:36.000Z", "max_forks_repo_path": "src/components/PieChart/index.js", "max_forks_repo_name": "AlexsLemonade/refinebio-frontend", "max_forks_repo_forks_event_min_datetime": "2019-04-13T08:28:49.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-02T16:40:14.000Z"}
{"max_stars_count": 7, "max_issues_count": 615, "max_forks_count": 8, "avg_line_length": 20.2708333333, "max_line_length": 50, "alphanum_fraction": 0.4964028777}
// @flow
import React from 'react';
import {
  ResponsiveContainer,
  PieChart as PieRechart,
  Pie,
  Cell,
  Tooltip,
  Legend,
} from 'recharts';
import { COLORS } from '../../common/constants';

// type Props = {
//   data: Array<{ value: any, name: string }>,
// };

const PieChart = props => {
  const { data = [] } = props;
  return (
    <ResponsiveContainer>
      <PieRechart>
        <Tooltip />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          outerRadius="100%"
          fill="#8884d8"
          paddingAngle={0}
          label
        >
          {data.map((entry, index) => (
            <Cell
              key={COLORS[index % COLORS.length]}
              fill={COLORS[index % COLORS.length]}
            />
          ))}
        </Pie>
        <Legend iconType="circle" iconSize={10} />
      </PieRechart>
    </ResponsiveContainer>
  );
};

export default PieChart;
