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

fix: dashboard UI tweaks

Browse source
This commit is contained in:
Sérgio Salgado 2021-12-20 20:22:12 +00:00
parent c641d6d3fa
commit 97f52616cf
11 changed files with 594 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,10 +9,11 @@ import * as R from 'ramda'
import React, { useState } from 'react'
import { EmptyTable } from 'src/components/table'
import { Label1, Label2 } from 'src/components/typography/index'
import { Label1, Label2, P } from 'src/components/typography/index'
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 { java, neon } from 'src/styling/variables'
import { fromNamespace } from 'src/utils/config'
import { toTimezone } from 'src/utils/timezones'
@ -199,9 +200,27 @@ const SystemPerformance = () => {
</Grid>
{/* todo new customers */}
</Grid>
<Grid container className={classes.gridContainer}>
<Grid container className={classes.txGraphContainer}>
<Grid item xs={12}>
<Label2>Transactions</Label2>
<div className={classes.graphHeader}>
<Label2 noMargin>Transactions</Label2>
<div className={classes.labelWrapper}>
<P noMargin>{timezone} timezone</P>
<span className={classes.verticalLine} />
<div>
<svg width={8} height={8}>
<rect width={8} height={8} rx={4} fill={java} />
</svg>
<Label1 noMargin>In</Label1>
</div>
<div>
<svg width={8} height={8}>
<rect width={8} height={8} rx={4} fill={neon} />
</svg>
<Label1 noMargin>Out</Label1>
</div>
</div>
</div>
<Scatterplot
timeFrame={selectedRange}
data={transactionsToShow}
@ -209,9 +228,9 @@ const SystemPerformance = () => {
/>
</Grid>
</Grid>
<Grid container className={classes.gridContainer}>
<Grid container className={classes.commissionGraphContainer}>
<Grid item xs={8}>
<Label2 className={classes.labelMargin}>
<Label2 noMargin className={classes.commissionProfitTitle}>
Profit from commissions
</Label2>
<div className={classes.profitContainer}>
@ -233,23 +252,22 @@ const SystemPerformance = () => {
/>
</Grid>
<Grid item xs={4}>
<Grid container>
<Grid item>
<Label2 className={classes.labelMargin}>Direction</Label2>
</Grid>
<Grid
item
className={classnames(
classes.directionLabelContainer,
classes.dirLabContMargin
)}>
<div className={classes.outSquare} />
<Label1 className={classes.directionLabel}>Out</Label1>
</Grid>
<Grid item className={classes.directionLabelContainer}>
<div className={classes.inSquare} />
<Label1 className={classes.directionLabel}>In</Label1>
</Grid>
<Grid container className={classes.graphHeader}>
<Label2 noMargin>Direction</Label2>
<div className={classes.labelWrapper}>
<div>
<svg width={8} height={8}>
<rect width={8} height={8} rx={2} fill={java} />
</svg>
<Label1 noMargin>In</Label1>
</div>
<div>
<svg width={8} height={8}>
<rect width={8} height={8} rx={2} fill={neon} />
</svg>
<Label1 noMargin>Out</Label1>
</div>
</div>
</Grid>
<Grid item xs>
<PercentageChart