89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
import Switch from '@mui/material/Switch'
|
|
import React, { useState } from 'react'
|
|
import { H2, Label1 } from 'src/components/typography'
|
|
|
|
import { Select } from 'src/components/inputs'
|
|
import { primaryColor } from 'src/styling/variables'
|
|
|
|
import Graph from '../../graphs/Graph'
|
|
import LegendEntry from '../LegendEntry'
|
|
import classes from './wrappers.module.css'
|
|
|
|
const OverTimeDotGraphHeader = ({
|
|
title,
|
|
representing,
|
|
period,
|
|
data,
|
|
machines,
|
|
selectedMachine,
|
|
handleMachineChange,
|
|
timezone,
|
|
currency,
|
|
}) => {
|
|
const [logarithmic, setLogarithmic] = useState()
|
|
|
|
const legend = {
|
|
cashIn: <div className={classes.cashInIcon}></div>,
|
|
cashOut: <div className={classes.cashOutIcon}></div>,
|
|
transaction: <div className={classes.txIcon}></div>,
|
|
median: (
|
|
<svg height="12" width="18">
|
|
<path
|
|
stroke={primaryColor}
|
|
strokeWidth="3"
|
|
strokeDasharray="5, 2"
|
|
d="M 5 6 l 20 0"
|
|
/>
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={classes.graphHeaderWrapper}>
|
|
<div className={classes.graphHeaderLeft}>
|
|
<H2 noMargin>{title}</H2>
|
|
<div className={classes.graphLegend}>
|
|
<LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
|
|
<LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
|
|
<LegendEntry
|
|
IconElement={legend.transaction}
|
|
label={'One transaction'}
|
|
/>
|
|
<LegendEntry IconElement={legend.median} label={'Median'} />
|
|
</div>
|
|
</div>
|
|
<div className={classes.graphHeaderRight}>
|
|
<div className={classes.graphHeaderSwitchBox}>
|
|
<Label1 noMargin className="mb-1 text-comet">
|
|
Log. scale
|
|
</Label1>
|
|
<Switch
|
|
className="m-0"
|
|
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 OverTimeDotGraphHeader
|