From ce51770d44ea77436ec7ca937c2cb97c868bb925 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Wed, 19 Dec 2018 14:42:04 -0500
Subject: [PATCH] add progress

---
 app/components/dashboard/FundingSummary.jsx | 38 ++++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/components/dashboard/FundingSummary.jsx b/app/components/dashboard/FundingSummary.jsx
index f71299d..9862ffb 100644
--- a/app/components/dashboard/FundingSummary.jsx
+++ b/app/components/dashboard/FundingSummary.jsx
@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles'
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import Typography from '@material-ui/core/Typography'
+import LinearProgress from '@material-ui/core/LinearProgress'
 import { FundingContext } from '../../context'
 import { getDepositWithdrawTotals } from '../../selectors/pledging'
 
@@ -27,8 +28,16 @@ const styles = {
   pos: {
     marginBottom: 12,
   },
+  linearColorPrimary: {
+    backgroundColor: '#b2dfdb',
+  },
+  linearBarColorPrimary: {
+    backgroundColor: '#00695c',
+  },
 }
 
+const getNet = (deposits, withdraws) => Number(deposits) - Number(withdraws)
+const getValue = (deposits, withdraws) => (getNet(deposits, withdraws) / Number(deposits)) * 100
 function SimpleCard(props) {
   const { classes, title } = props
 
@@ -50,15 +59,26 @@ function SimpleCard(props) {
                          <Typography variant="h5" component="h2">
                            {name}
                          </Typography>
-                         <Typography key={name + 'withdraw'} className={classes.pos} color="textSecondary">
-                           Funded: {deposits}
-                         </Typography>
-                         <Typography key={name + 'deposit'} className={classes.pos} color="textSecondary">
-                           Withdrawn: {withdraws}
-                         </Typography>
-                         <Typography key={name + 'total'} className={classes.pos} color="textSecondary">
-                           Net: {Number(deposits) - Number(withdraws)}
-                         </Typography>
+                         <CardContent>
+                           <Typography key={name + 'withdraw'} className={classes.pos} color="textSecondary">
+                             Funded: {deposits}
+                           </Typography>
+                           <Typography key={name + 'deposit'} className={classes.pos} color="textSecondary">
+                             Withdrawn: {withdraws}
+                           </Typography>
+                           <Typography key={name + 'total'} className={classes.pos} color="textSecondary">
+                             Net: {Number(deposits) - Number(withdraws)}
+                           </Typography>
+                           <LinearProgress
+                             classes={{
+                               colorPrimary: classes.linearColorPrimary,
+                               barColorPrimary: classes.linearBarColorPrimary,
+                             }}
+                             color="primary"
+                             variant="buffer"
+                             value={getValue(deposits, withdraws)}
+                             valueBuffer={100} />
+                         </CardContent>
                        </Card>
                      )
                    })}