68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import { Box } from '@mui/material'
|
|
import { makeStyles } from '@mui/material/styles'
|
|
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
import { H2 } from 'src/components/typography'
|
|
|
|
import styles from '../../Analytics.styles'
|
|
import Graph from '../../graphs/Graph'
|
|
import LegendEntry from '../LegendEntry'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const options = [
|
|
{ code: 'topMachinesTransactions', display: 'Transactions' },
|
|
{ code: 'topMachinesVolume', display: 'Volume' }
|
|
]
|
|
|
|
const TopMachinesBarGraphHeader = ({
|
|
title,
|
|
period,
|
|
data,
|
|
machines,
|
|
selectedMachine,
|
|
timezone,
|
|
currency
|
|
}) => {
|
|
const classes = useStyles()
|
|
|
|
const [graphType /*, setGraphType */] = useState(options[0].code)
|
|
|
|
const legend = {
|
|
cashIn: <div className={classes.cashInIcon}></div>,
|
|
cashOut: <div className={classes.cashOutIcon}></div>
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={classes.graphHeaderWrapper}>
|
|
<div className={classes.graphHeaderLeft}>
|
|
<H2 noMargin>{title}</H2>
|
|
<Box className={classes.graphLegend}>
|
|
<LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
|
|
<LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
|
|
</Box>
|
|
</div>
|
|
<div className={classes.graphHeaderRight}>
|
|
{/* <RadioGroup
|
|
options={options}
|
|
className={classes.topMachinesRadio}
|
|
value={graphType}
|
|
onChange={e => setGraphType(e.target.value)}
|
|
/> */}
|
|
</div>
|
|
</div>
|
|
<Graph
|
|
representing={R.find(R.propEq('code', graphType), options)}
|
|
period={period}
|
|
data={data}
|
|
timezone={timezone}
|
|
currency={currency}
|
|
selectedMachine={selectedMachine}
|
|
machines={machines}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default TopMachinesBarGraphHeader
|