diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js index 9c96df9d..707f73a6 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js @@ -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 ( <>
@@ -63,7 +69,10 @@ const Alerts = ({ onReset, onExpand, size }) => { )}
- + { 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 ( - + {data.cryptoCurrencies[idx].display} @@ -122,10 +122,12 @@ const Footer = () => { } return ( -
+ <> +
{!loading && data && ( @@ -137,7 +139,8 @@ const Footer = () => { )}
-
+
+ ) } diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js index e6a9b657..b2766a68 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js @@ -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 diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js index 8acd5b77..f96b7e00 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js @@ -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 + if (percentChange > 0) + return + return + } + return ( <>
-
- {percentChange <= 0 ? ( - - ) : ( - - )}{' '} +
+ {getPercentageIcon()} {`${percentChange}%`}
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js index 0c87aad2..831a2cfa 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js @@ -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 } } diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js index 9492f096..574bf476 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js @@ -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 } } diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js index 189c0902..a97661c7 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js @@ -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 }) => { + className={classnames(machinesTableContainerClasses)}> - {!showAllItems && data.machines.length > NUM_TO_RENDER && ( + {!showAllItems && machines.length > NUM_TO_RENDER && ( <> diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js index d7714a12..8d8285ac 100644 --- a/new-lamassu-admin/src/routing/routes.js +++ b/new-lamassu-admin/src/routing/routes.js @@ -301,7 +301,7 @@ const Routes = () => { return ( - + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/dashboard/equal.svg b/new-lamassu-admin/src/styling/icons/dashboard/equal.svg new file mode 100644 index 00000000..c277c866 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/dashboard/equal.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/dashboard/up.svg b/new-lamassu-admin/src/styling/icons/dashboard/up.svg new file mode 100644 index 00000000..74bb17cb --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/dashboard/up.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file