92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import Box from '@mui/material/Box'
|
|
import Switch from '@mui/material/Switch'
|
|
import { makeStyles } from '@mui/styles'
|
|
import React, { useState } from 'react'
|
|
import { H2 } from 'src/components/typography'
|
|
|
|
import { Select } from 'src/components/inputs'
|
|
import { neon, java } from 'src/styling/variables'
|
|
|
|
import styles from '../../Analytics.styles'
|
|
import Graph from '../../graphs/Graph'
|
|
import LegendEntry from '../LegendEntry'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const VolumeOverTimeGraphHeader = ({
|
|
title,
|
|
representing,
|
|
period,
|
|
data,
|
|
machines,
|
|
selectedMachine,
|
|
handleMachineChange,
|
|
timezone,
|
|
currency
|
|
}) => {
|
|
const classes = useStyles()
|
|
|
|
const [logarithmic, setLogarithmic] = useState()
|
|
|
|
const legend = {
|
|
cashIn: (
|
|
<svg height="12" width="18">
|
|
<path
|
|
stroke={java}
|
|
strokeWidth="3"
|
|
d="M 3 6 l 12 0"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
),
|
|
cashOut: (
|
|
<svg height="12" width="18">
|
|
<path
|
|
stroke={neon}
|
|
strokeWidth="3"
|
|
d="M 3 6 l 12 0"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
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}>
|
|
<div className={classes.graphHeaderSwitchBox}>
|
|
<span>Log. scale</span>
|
|
<Switch onChange={event => setLogarithmic(event.target.checked)} />
|
|
</div>
|
|
<Select
|
|
label="Machines"
|
|
onSelectedItemChange={handleMachineChange}
|
|
items={machines}
|
|
default={machines[0]}
|
|
selectedItem={selectedMachine}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Graph
|
|
representing={representing}
|
|
period={period}
|
|
data={data}
|
|
timezone={timezone}
|
|
currency={currency}
|
|
selectedMachine={selectedMachine}
|
|
machines={machines}
|
|
log={logarithmic}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default VolumeOverTimeGraphHeader
|