lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feat: new profit change icons

Browse source
This commit is contained in:
csrapr 2021-02-09 21:45:25 +00:00 • committed by Josh Harvey
parent 14e34131ba
commit fca38a5636
12 changed files with 154 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

11
new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
View file

@ -2,6 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import gql from 'graphql-tag'
import * as R from 'ramda'
import React from 'react'
@ -46,6 +47,11 @@ const Alerts = ({ onReset, onExpand, size }) => {
)(data?.machines ?? [])
const alertsLength = alerts.length
const alertsTableContainerClasses = {
[classes.alertsTableContainer]: !showAllItems,
[classes.expandedAlertsTableContainer]: showAllItems
}
return (
<>
<div className={classes.container}>
@ -63,7 +69,10 @@ const Alerts = ({ onReset, onExpand, size }) => {
</Label1>
)}
</div>
<Grid container spacing={1}>
<Grid
className={classnames(alertsTableContainerClasses)}
container
spacing={1}>
<Grid item xs={12} className={classes.alertsTableMargin}>
<AlertsTable
numToRender={showAllItems ? alerts.length : NUM_TO_RENDER}

14
new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js
View file

@ -63,6 +63,20 @@ const styles = {
},
alertsTableMargin: {
marginTop: -30
},
alertsTableContainer: {
height: 220,
overflowX: 'hidden',
overflowY: 'auto'
},
expandedAlertsTableContainer: {
minHeight: 476,
overflowX: 'hidden',
overflowY: 'auto'
},
centerLabel: {
marginTop: 40,
marginBottom: 0
}
}

17
new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js
View file

@ -36,7 +36,7 @@ const Footer = () => {
const [delayedExpand, setDelayedExpand] = useState(null)
const classes = useStyles({
bigFooter: R.keys(data?.cryptoRates?.withCommissions).length < 8,
bigFooter: R.keys(data?.cryptoRates?.withCommissions).length > 8,
expanded
})
@ -84,7 +84,7 @@ const Footer = () => {
const localeLanguage = data.config.locale_languages[0]
return (
<Grid key={key} item xs={3} className={classes.footerItemContainer}>
<Grid key={key} item xs={3}>
<Label2 className={classes.label}>
{data.cryptoCurrencies[idx].display}
</Label2>
@ -122,10 +122,12 @@ const Footer = () => {
}
return (
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={classes.footer}>
<>
<div
className={classes.mouseWatcher}
onMouseLeave={handleMouseLeave}
onMouseEnter={handleMouseEnter}
/>
<div className={classes.content}>
{!loading && data && (
<Grid container spacing={1}>
@ -137,7 +139,8 @@ const Footer = () => {
</Grid>
)}
</div>
</div>
<div className={classes.footer} />
</>
)
}

38
new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js
View file

@ -18,14 +18,15 @@ const styles = {
marginLeft: spacer * 3
},
footer: ({ expanded, bigFooter }) => ({
height: expanded
? bigFooter
height:
expanded && bigFooter
? spacer * 12 * 3 + spacer * 3
: expanded
? spacer * 12 * 2 + spacer * 2
: spacer * 12 * 3 + spacer * 3
: spacer * 12,
position: 'fixed',
: spacer * 12,
left: 0,
bottom: 0,
position: 'fixed',
width: '100vw',
backgroundColor: white,
textAlign: 'left',
@ -37,17 +38,28 @@ const styles = {
},
content: {
width: 1200,
margin: '0 auto',
backgroundColor: white,
marginTop: 4
zIndex: 1
},
footerContainer: {
footerContainer: ({ expanded, bigFooter }) => ({
marginLeft: spacer * 5,
marginBottom: spacer * 2
},
footerItemContainer: {
marginBottom: 18
}
height: 100,
marginTop: expanded && bigFooter ? -300 : expanded ? -200 : -100,
overflow: !expanded && 'hidden'
}),
mouseWatcher: ({ expanded, bigFooter }) => ({
position: 'fixed',
bottom: 0,
left: 0,
width: '100vw',
height:
expanded && bigFooter
? spacer * 12 * 3 + spacer * 3
: expanded
? spacer * 12 * 2 + spacer * 2
: spacer * 12,
zIndex: 2
})
}
export default styles

33
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
View file

@ -9,8 +9,9 @@ import * as R from 'ramda'
import React, { useState } from 'react'
import { Label1, Label2 } from 'src/components/typography/index'
import { ReactComponent as TriangleDown } from 'src/styling/icons/arrow/triangle_down.svg'
import { ReactComponent as TriangleUp } from 'src/styling/icons/arrow/triangle_up.svg'
import { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/down.svg'
import { ReactComponent as PercentNeutralIcon } from 'src/styling/icons/dashboard/equal.svg'
import { ReactComponent as PercentUpIcon } from 'src/styling/icons/dashboard/up.svg'
import { fromNamespace } from 'src/utils/config'
import PercentageChart from './Graphs/PercentageChart'
@ -130,6 +131,7 @@ const SystemPerformance = () => {
const thisTimePeriodProfit = getProfit(transactionsToShow)
const previousTimePeriodProfit = getProfit(transactionsLastTimePeriod)
if (thisTimePeriodProfit === previousTimePeriodProfit) return 0
if (previousTimePeriodProfit === 0) return 100
return Math.round(
@ -155,6 +157,22 @@ const SystemPerformance = () => {
const percentChange = getPercentChange()
console.log(percentChange)
const percentageClasses = {
[classes.percentDown]: percentChange < 0,
[classes.percentUp]: percentChange > 0,
[classes.percentNeutral]: percentChange === 0
}
const getPercentageIcon = () => {
if (percentChange === 0)
return <PercentNeutralIcon className={classes.directionIcon} />
if (percentChange > 0)
return <PercentUpIcon className={classes.directionIcon} />
return <PercentDownIcon className={classes.directionIcon} />
}
return (
<>
<Nav handleSetRange={setSelectedRange} />
@ -193,15 +211,8 @@ const SystemPerformance = () => {
data?.config.locale_fiatCurrency
}`}
</div>
<div
className={
percentChange <= 0 ? classes.percentDown : classes.percentUp
}>
{percentChange <= 0 ? (
<TriangleDown className={classes.percentDown} />
) : (
<TriangleUp className={classes.percentUp} />
)}{' '}
<div className={classnames(percentageClasses)}>
{getPercentageIcon()}
{`${percentChange}%`}
</div>
</div>

18
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js
View file

@ -8,7 +8,8 @@ import {
spring4,
tomato,
java,
neon
neon,
comet
} from 'src/styling/variables'
const styles = {
@ -84,6 +85,12 @@ const styles = {
color: tomato,
height: 13
},
percentNeutral: {
fontSize: fontSize3,
fontFamily: fontSecondary,
fontWeight: 700,
color: comet
},
profitContainer: {
display: 'flex',
justifyContent: 'space-between',
@ -91,7 +98,8 @@ const styles = {
position: 'relative'
},
gridContainer: {
marginTop: 30
marginTop: 30,
height: 225
},
inSquare: {
width: 8,
@ -114,6 +122,12 @@ const styles = {
},
dirLabContMargin: {
marginRight: 20
},
directionIcon: {
width: 16,
height: 16,
marginBottom: -2,
marginRight: 4
}
}

10
new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js
View file

@ -40,7 +40,8 @@ const styles = {
}
},
buttonLabel: {
textAlign: 'center',
position: 'absolute',
bottom: 160,
marginBottom: 0
},
upperButtonLabel: {
@ -74,7 +75,12 @@ const styles = {
display: 'inline'
},
machinesTableContainer: {
marginTop: 23
marginTop: 10,
height: 230
},
expandedMachinesTableContainer: {
marginTop: 10,
height: 442
}
}

19
new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js
View file

@ -2,7 +2,9 @@ import { useQuery } from '@apollo/react-hooks'
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import gql from 'graphql-tag'
import * as R from 'ramda'
import React from 'react'
import { cardState as cardState_ } from 'src/components/CollapsibleCard'
@ -50,8 +52,13 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
const classes = useStyles()
const { data, loading } = useQuery(GET_DATA)
const machines = R.path(['machines'])(data) ?? []
const showAllItems = size === cardState_.EXPANDED
const machinesTableContainerClasses = {
[classes.machinesTableContainer]: !showAllItems,
[classes.expandedMachinesTableContainer]: showAllItems
}
// const uptime = data?.uptime ?? [{}]
return (
<>
@ -99,15 +106,13 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
<Grid
container
spacing={1}
className={classes.machinesTableContainer}>
className={classnames(machinesTableContainerClasses)}>
<Grid item xs={12}>
<MachinesTable
numToRender={
showAllItems ? data?.machines.length : NUM_TO_RENDER
}
machines={data?.machines ?? []}
numToRender={showAllItems ? Infinity : NUM_TO_RENDER}
machines={machines}
/>
{!showAllItems && data.machines.length > NUM_TO_RENDER && (
{!showAllItems && machines.length > NUM_TO_RENDER && (
<>
<Label1 className={classes.buttonLabel}>
<Button
@ -116,7 +121,7 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
disableRipple
disableFocusRipple
className={classes.button}>
{`Show all (${data.machines.length})`}
{`Show all (${machines.length})`}
</Button>
</Label1>
</>

2
new-lamassu-admin/src/routing/routes.js
View file

@ -301,7 +301,7 @@ const Routes = () => {
return (
<Switch>
<Route exact path="/">
<Redirect to={{ pathname: '/transactions' }} />
<Redirect to={{ pathname: '/dashboard' }} />
</Route>
<Route path={'/dashboard'}>
<Transition

12
new-lamassu-admin/src/styling/icons/dashboard/down.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/label/icon/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-6">
<circle id="Oval" fill="#FFECEB" cx="6" cy="6" r="6"></circle>
<g id="Group-5" transform="translate(6.096194, 6.096194) rotate(-315.000000) translate(-6.096194, -6.096194) translate(2.596194, 3.096194)" stroke="#FF584A">
<polyline id="Path-2" points="3.15780333 -4.54747351e-13 6.15780333 2.82998193 3.15780333 5.65996386"></polyline>
<line x1="5.42178888" y1="2.82998193" x2="-5.45696821e-13" y2="2.82998193" id="Path-3"></line>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 837 B

12
new-lamassu-admin/src/styling/icons/dashboard/equal.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/label/icon/equal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-6" fill="#EBEFFF">
<circle id="Oval" cx="6" cy="6" r="6"></circle>
</g>
<g id="Group" transform="translate(4.000000, 4.000000)" stroke="#5F668A" stroke-linecap="square">
<line x1="0" y1="1" x2="4" y2="1" id="Line-12"></line>
<line x1="0" y1="3" x2="4" y2="3" id="Line-12"></line>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 663 B

12
new-lamassu-admin/src/styling/icons/dashboard/up.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/label/icon/up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-6">
<circle id="Oval" fill="#ECFBEF" cx="6" cy="6" r="6"></circle>
<g id="Group-5" transform="translate(6.096194, 6.096194) rotate(-45.000000) translate(-6.096194, -6.096194) translate(2.596194, 3.096194)" stroke="#00CD5A">
<polyline id="Path-2" points="3.15780333 -4.54747351e-13 6.15780333 2.82998193 3.15780333 5.65996386"></polyline>
<line x1="5.42178888" y1="2.82998193" x2="-5.45696821e-13" y2="2.82998193" id="Path-3"></line>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 834 B