add category table statistic

src/components/CategoryStatisticTable.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { withStyles } from 'material-ui/styles';
+import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
+import Paper from 'material-ui/Paper';
+
+const CustomTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+    textAlign: 'center'
+  },
+  body: {
+    fontSize: 14,
+    textAlign: 'center'
+  },
+}))(TableCell);
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing.unit * 3,
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 200,
+    textAlign: 'center'
+  },
+  row: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.background.default,
+    },
+  },
+});
+
+const CategoryStatisticTable = (props) => {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <CustomTableCell>Category</CustomTableCell>
+            <CustomTableCell numeric>Amount (€)</CustomTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {props.data.map(n => {
+            return (
+              <TableRow key={n.categories} className={classes.row}>
+                <CustomTableCell>{n.categories}</CustomTableCell>
+                <CustomTableCell numeric>{n.expense}</CustomTableCell>
+
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+
+
+export default withStyles(styles)(CategoryStatisticTable);

src/containers/Dashboard.js

@@ -17,6 +17,7 @@ import FilterDashboard from '../components/FilterDashboard';
 import _ from 'lodash';
 import moment from 'moment';
 import Statistic from '../components/Statistic';
+import CategoryStatisticTable from '../components/CategoryStatisticTable';
 
 class Dashboard extends React.Component {
     constructor(props) {
@@ -181,6 +182,11 @@ class Dashboard extends React.Component {
                         <TransactionList rowsPerPage={5}/>
                     </Grid>
 
+                    <Grid item xs={12} sm={12} md={4} lg={4}>
+                        <CategoryStatisticTable data={this.state.expensesByCategory} />
+                    </Grid>
+
+
                     {/*<Grid item xs={10} sm={10} md={6} lg={6}>
                         <AccountList/>
                     </Grid>