{"size": 1265, "ext": "js", "max_stars_repo_path": "frontend/src/Container/Content/Data/account.js", "max_stars_repo_name": "martinfengshenxiang/what_are_human_backend", "max_stars_repo_stars_event_min_datetime": "2018-03-11T20:27:33.000Z", "max_stars_repo_stars_event_max_datetime": "2018-03-11T20:27:33.000Z", "max_issues_repo_path": "frontend/src/Container/Content/Data/account.js", "max_issues_repo_name": "martinfengshenxiang/what_are_human_backend", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/Container/Content/Data/account.js", "max_forks_repo_name": "martinfengshenxiang/what_are_human_backend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.1111111111, "max_line_length": 154, "alphanum_fraction": 0.5604743083}
import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { PieChart, Pie, Tooltip } from 'recharts';
import PropTypes from 'prop-types';
import Spinner from 'react-spinkit'

const allUsers = gql`
    query allUsers {
        allUsers {
            gender
        }
    }
`;

const Account = ({ data }) => {
    if (data.loading) {
        return <Spinner name="ball-scale-ripple-multiple" color="coral" />;
    }
    let female = 0;
    let male = 0;
    data.allUsers.forEach((value) => {
        if (value.gender === 'female') {
            female += 1;
        } else {
            male += 1;
        }
    });
    const pie = [{ name: '男', value: male }, { name: '女', value: female }];
    return (
        <div style={{ width: '600px', height: '400px', display: 'flex', justifyContent: 'center', backgroundColor: 'transparent', alignItems: 'center' }}>
            <PieChart width={600} height={400}>
                <Pie isAnimationActive data={pie} cx={200} cy={200} outerRadius={80} fill="#8884d8" dataKey="value" label />
                <Tooltip />
            </PieChart>
        </div>
    );
};

Account.propTypes = {
    data: PropTypes.object.isRequired,
};

export default graphql(allUsers)(Account);
