{"size": 3200, "ext": "js", "max_stars_repo_path": "src/pages/HomePage/Stats.js", "max_stars_repo_name": "Tiamat-Tech/platform-app", "max_stars_repo_stars_event_min_datetime": "2019-07-29T17:57:10.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-27T02:05:41.000Z", "max_issues_repo_path": "src/pages/HomePage/Stats.js", "max_issues_repo_name": "Tiamat-Tech/platform-app", "max_issues_repo_issues_event_min_datetime": "2019-02-22T15:27:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T11:55:54.000Z", "max_forks_repo_path": "src/pages/HomePage/Stats.js", "max_forks_repo_name": "thehyve/opentargets_platform_app", "max_forks_repo_forks_event_min_datetime": "2020-04-22T13:00:36.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-30T18:32:54.000Z"}
{"max_stars_count": 82, "max_issues_count": 154, "max_forks_count": 21, "avg_line_length": 33.3333333333, "max_line_length": 79, "alphanum_fraction": 0.5678125}
import React, { useState, useEffect } from 'react';
import { Grid, Typography, withStyles } from '@material-ui/core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDna, faStethoscope } from '@fortawesome/free-solid-svg-icons';

const styles = theme => {
  return {
    container: {
      backgroundColor: theme.palette.grey[300],
      height: '205px',
    },
    title: {
      fontWeight: 600,
    },
    icon: {
      fill: theme.palette.grey[700],
      height: '56px',
    },
  };
};

const Stats = ({ classes }) => {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    let isCurrent = true;
    // TODO: design GraphQL schema from stats and get this data from the
    // GraphQL API
    fetch('https://platform-api.opentargets.io/v3/platform/public/utils/stats')
      .then(res => res.json())
      .then(data => {
        if (isCurrent) {
          const numDataSources = Object.values(
            data.associations.datatypes
          ).reduce((acc, current) => {
            return acc + Object.keys(current.datasources).length;
          }, 0);

          setStats({
            numTargets: data.targets.total,
            numDiseases: data.diseases.total,
            numAssociations: data.associations.total,
            numDataSources,
          });
        }
      });

    return () => (isCurrent = false);
  }, []);

  return (
    <Grid className={classes.container} container justify="center">
      <Grid item container direction="column" md={7} justify="space-around">
        <Typography className={classes.title} variant="h5" align="center">
          Platform Stats
        </Typography>
        <Typography align="center" variant="subtitle1">
          Data last updated September 2019
        </Typography>
        {stats && (
          <Grid container justify="space-around">
            <Grid item container md={3} direction="column" alignItems="center">
              <FontAwesomeIcon icon={faDna} className={classes.icon} />
              <Typography variant="h6">
                {stats.numTargets.toLocaleString()}
              </Typography>
              <Typography> targets</Typography>
            </Grid>
            <Grid item container md={3} direction="column" alignItems="center">
              <FontAwesomeIcon icon={faStethoscope} className={classes.icon} />
              <Typography variant="h6">
                {stats.numDiseases.toLocaleString()}
              </Typography>
              <Typography>diseases</Typography>
            </Grid>
            <Grid item container md={3} direction="column" alignItems="center">
              <Typography variant="h6">
                {stats.numAssociations.toLocaleString()}
              </Typography>
              <Typography>associations</Typography>
            </Grid>
            <Grid item container md={3} direction="column" alignItems="center">
              <Typography variant="h6">
                {stats.numDataSources.toLocaleString()}
              </Typography>
              <Typography>data sources</Typography>
            </Grid>
          </Grid>
        )}
      </Grid>
    </Grid>
  );
};

export default withStyles(styles)(Stats);
