{"size": 1909, "ext": "js", "max_stars_repo_path": "client/src/components/Expense/components/ExpenseAnalytics/components/SpendingOnIncome.js", "max_stars_repo_name": "shraddha-chadha/expense-time-tracker", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/Expense/components/ExpenseAnalytics/components/SpendingOnIncome.js", "max_issues_repo_name": "shraddha-chadha/expense-time-tracker", "max_issues_repo_issues_event_min_datetime": "2021-03-09T22:42:27.000Z", "max_issues_repo_issues_event_max_datetime": "2021-10-06T07:03:34.000Z", "max_forks_repo_path": "client/src/components/Expense/components/ExpenseAnalytics/components/SpendingOnIncome.js", "max_forks_repo_name": "shraddha-chadha/ExpenseTrackerWithVoice", "max_forks_repo_forks_event_min_datetime": "2019-11-12T00:42:02.000Z", "max_forks_repo_forks_event_max_datetime": "2019-11-12T00:42:02.000Z"}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": 1, "avg_line_length": 28.0735294118, "max_line_length": 151, "alphanum_fraction": 0.5741225773}
import React from 'react';
import Grid from '@material-ui/core/Grid';
import { makeStyles, withStyles, lighten } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import ProgressBar from './ProgressBar';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },

  card: {
    maxWidth: 900,
    borderStyle: 'solid',
    borderColor: '#F4F8F8',
    borderWidth: 1,
    boxShadow: '5px 5px 15px grey',
    background: theme.palette.grey[100],
    margin: 'auto'
  },

  content: {
    width: 900,
    padding: 0,
    textAlign: 'center',
    marginBottom: 0
  },

  incomeText: {
    fontSize: 20
  }
}));

export default function SpendingOnIncome(props) {
  const classes = useStyles();
  let { totalIncome, categories, categoriesResult } = props;
  
  return (
    <div className={classes.root}>
      <Card className={classes.card}>
        <CardContent component="div" className={classes.content}>
          <Grid container spacing={2} direction="column">
            <Grid item>
              <Typography color="textPrimary" className={classes.incomeText}>
              {props.title}
              </Typography>
            </Grid>
            <Grid item>
            <Grid container direction="row" justify="space-around" spacing={2}>
            {(totalIncome === 0 || totalIncome === null) ? (
              <div></div>
            ) : (
              categories.map((category, index) => {
                return <Grid item key={index}>
                <ProgressBar category={category} expense={categoriesResult[category]} amount={(categoriesResult[category] / totalIncome).toFixed(2)} />
              </Grid>
              })
            )}
          </Grid>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    </div>
  );
}