status-im
/
liquid-funding
mirror of https://github.com/status-im/liquid-funding.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add dashboard

This commit is contained in:
Barry Gitarts 2018-12-16 12:59:33 -05:00
parent a211bd0d08
commit 4b0ad681e8
6 changed files with 171 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/Dashboard.jsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import InfoCard from './dashboard/InfoCard'
const Dashboard = () => (
<div>
<InfoCard title="Pledge Allocations" />
</div>
)
export default Dashboard

20
app/components/MainCointainer.jsx
View File

@ -21,6 +21,7 @@ import InboxIcon from '@material-ui/icons/MoveToInbox';
import FundsManagement from './FundsManagement'
import ContractAdmin from './ContractAdmin'
import TransferGraph from './TransfersGraph'
import Dashboard from './Dashboard'
const drawerWidth = 240
@ -143,10 +144,12 @@ class PersistentDrawerLeft extends React.Component {
</div>
<Divider />
<List>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
<Link to="/dashboard" className={classes.link}>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
</Link>
</List>
<List>
<Link to="/funds-management/" className={classes.link}>
@ -183,9 +186,12 @@ class PersistentDrawerLeft extends React.Component {
<div className={classNames(classes.appBar, {
[classes.childrenShift]: open,
})}>
<Route path="/funds-management" render={() => <FundsManagement open={open} />} />
<Route path="/admin" component={ContractAdmin} />
<Route path="/insights" component={TransferGraph} />
<Switch>
<Route path="/(|dashboard)" component={Dashboard} />
<Route path="/admin" component={ContractAdmin} />
<Route path="/funds-management" render={() => <FundsManagement open={open} />} />
<Route path="/insights" component={TransferGraph} />
</Switch>
{this.props.children}
</div>
</main>

84
app/components/dashboard/InfoCard.jsx Normal file
View File

@ -0,0 +1,84 @@
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import randomMC from 'random-material-color'
import { Doughnut } from 'react-chartjs-2'
import { FundingContext } from '../../context'
import { toEther } from '../../utils/conversions'
import { getTokenLabel } from '../../utils/currencies'
const styles = {
card: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
}
const pledgesChartData = pledges => {
const data = []
const labels = []
const backgroundColor = []
pledges.forEach(pledge => {
const { id, amount, token } = pledge
const converted = toEther(amount)
data.push(converted)
labels.push(
`pledge ${id} - ${getTokenLabel(token)}`
)
backgroundColor.push(randomMC.getColor({ text: `${id}` }))
})
return {
datasets: [
{
data,
backgroundColor,
hoverBackgroundColor: backgroundColor
}
],
labels
}
}
function SimpleCard(props) {
const { classes, title } = props
return (
<FundingContext.Consumer>
{({ allPledges }) =>
<Card className={classes.card}>
<CardContent>
<Typography variant="h5" component="h2">
{title}
</Typography>
<Typography className={classes.pos} color="textSecondary">
How your funds are distributed among pledges
</Typography>
<Doughnut data={pledgesChartData(allPledges)} />
</CardContent>
</Card>
}
</FundingContext.Consumer>
)
}
SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
title: PropTypes.string
}
export default withStyles(styles)(SimpleCard)

4
app/dapp.js
View File

@ -50,8 +50,8 @@ class App extends React.Component {
transfers
})
}
});
});
})
})
}
appendFundProfile = async event => {

3
package.json
View File

@ -58,6 +58,7 @@
"@material-ui/icons": "^3.0.1",
"async": "^2.4.0",
"chai": "^4.1.0",
"chart.js": "^2.7.3",
"cytoscape": "^3.3.0",
"cytoscape-cose-bilkent": "^4.0.0",
"cytoscape-dagre": "^2.2.2",
@ -66,7 +67,9 @@
"formik": "^1.3.2",
"material-table": "^1.3.0",
"ramda": "^0.26.1",
"random-material-color": "^1.0.3",
"react": "^16.6.3",
"react-chartjs-2": "^2.7.4",
"react-cytoscapejs": "^1.1.0",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1"

60
yarn.lock
View File

@ -1437,6 +1437,29 @@ chardet@^0.7.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chart.js@^2.7.3:
version "2.7.3"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.3.tgz#cdb61618830bf216dc887e2f7b1b3c228b73c57e"
integrity sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
integrity sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
integrity sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=
dependencies:
chartjs-color-string "^0.5.0"
color-convert "^0.5.3"
check-error@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
@ -1555,6 +1578,11 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
color-convert@^1.9.0:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@ -1565,6 +1593,11 @@ color-name@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
color-name@^1.0.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
columnify@^1.5.4:
version "1.5.4"
resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
@ -5008,6 +5041,11 @@ modify-values@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
moment@^2.10.2:
version "2.23.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.23.0.tgz#759ea491ac97d54bac5ad776996e2a58cc1bc225"
integrity sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==
moment@^2.6.0:
version "2.22.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
@ -5025,6 +5063,11 @@ ms@^2.1.1:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
murmurhash-js@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=
mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@ -5564,7 +5607,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@ -5679,6 +5722,13 @@ random-bytes@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"
random-material-color@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/random-material-color/-/random-material-color-1.0.3.tgz#14d60d20413b9b46bf02f9a2f2cd4aa21a139a37"
integrity sha1-FNYNIEE7m0a/Avmi8s1KohoTmjc=
dependencies:
murmurhash-js "^1.0.0"
randomatic@^3.0.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@ -5726,6 +5776,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-chartjs-2@^2.7.4:
version "2.7.4"
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.7.4.tgz#e41ea4e81491dc78347111126a48e96ee57db1a6"
integrity sha512-lXTpBaDlk9rIMjRONjZd76dIUhEm3vOp2jOrJrsFG/UpFI5VqX8Xw83apVHTnUGJ968f8i/i/syLddls4NHy2g==
dependencies:
lodash "^4.17.4"
prop-types "^15.5.8"
react-cytoscapejs@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-1.1.0.tgz#2175e444f12f4023901a960f71e761cb5b5d0b3a"