chore: use monorepo organization
This commit is contained in:
Rafael Taranto
parent
deaf7d6ecc
commit
a687827f7e
1099 changed files with 8184 additions and 11535 deletions
|
|
@ -0,0 +1,124 @@
|
|||
import { getTimezoneOffset } from 'date-fns-tz'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
import { H2 } from 'src/components/typography'
|
||||
|
||||
import { Select } from 'src/components/inputs'
|
||||
import { MINUTE } from 'src/utils/time'
|
||||
|
||||
import Graph from '../../graphs/Graph'
|
||||
import LegendEntry from '../LegendEntry'
|
||||
import classes from './wrappers.module.css'
|
||||
|
||||
const options = [
|
||||
{ code: 'hourOfDayTransactions', display: 'Transactions' },
|
||||
{ code: 'hourOfDayVolume', display: 'Volume' }
|
||||
]
|
||||
|
||||
const HourOfDayBarGraphHeader = ({
|
||||
title,
|
||||
period,
|
||||
data,
|
||||
machines,
|
||||
selectedMachine,
|
||||
handleMachineChange,
|
||||
selectedDay,
|
||||
dayOptions,
|
||||
handleDayChange,
|
||||
timezone,
|
||||
currency
|
||||
}) => {
|
||||
const [graphType /*, setGraphType */] = useState(options[0].code)
|
||||
|
||||
const legend = {
|
||||
cashIn: <div className={classes.cashInIcon}></div>,
|
||||
cashOut: <div className={classes.cashOutIcon}></div>
|
||||
}
|
||||
|
||||
const offset = getTimezoneOffset(timezone)
|
||||
|
||||
const txsPerWeekday = R.reduce(
|
||||
(acc, value) => {
|
||||
const created = new Date(value.created)
|
||||
created.setTime(
|
||||
created.getTime() + created.getTimezoneOffset() * MINUTE + offset
|
||||
)
|
||||
switch (created.getDay()) {
|
||||
case 0:
|
||||
acc.sunday.push(value)
|
||||
break
|
||||
case 1:
|
||||
acc.monday.push(value)
|
||||
break
|
||||
case 2:
|
||||
acc.tuesday.push(value)
|
||||
break
|
||||
case 3:
|
||||
acc.wednesday.push(value)
|
||||
break
|
||||
case 4:
|
||||
acc.thursday.push(value)
|
||||
break
|
||||
case 5:
|
||||
acc.friday.push(value)
|
||||
break
|
||||
case 6:
|
||||
acc.saturday.push(value)
|
||||
break
|
||||
default:
|
||||
throw new Error('Day of week not recognized')
|
||||
}
|
||||
return acc
|
||||
},
|
||||
R.fromPairs(R.map(it => [it.code, []], dayOptions)),
|
||||
data
|
||||
)
|
||||
|
||||
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'} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.graphHeaderRight}>
|
||||
{/* <RadioGroup
|
||||
options={options}
|
||||
className={classes.topMachinesRadio}
|
||||
value={graphType}
|
||||
onChange={e => setGraphType(e.target.value)}
|
||||
/> */}
|
||||
<Select
|
||||
label="Day of the week"
|
||||
items={dayOptions}
|
||||
default={dayOptions[0]}
|
||||
selectedItem={selectedDay}
|
||||
onSelectedItemChange={handleDayChange}
|
||||
/>
|
||||
<Select
|
||||
label="Machines"
|
||||
onSelectedItemChange={handleMachineChange}
|
||||
items={machines}
|
||||
default={machines[0]}
|
||||
selectedItem={selectedMachine}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Graph
|
||||
representing={R.find(it => it.code === graphType)(options)}
|
||||
period={period}
|
||||
data={txsPerWeekday[selectedDay.code]}
|
||||
timezone={timezone}
|
||||
currency={currency}
|
||||
selectedMachine={selectedMachine}
|
||||
machines={machines}
|
||||
selectedDay={selectedDay}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default HourOfDayBarGraphHeader
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
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
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
import { H2 } from 'src/components/typography'
|
||||
|
||||
import Graph from '../../graphs/Graph'
|
||||
import LegendEntry from '../LegendEntry'
|
||||
import classes from './wrappers.module.css'
|
||||
|
||||
const options = [
|
||||
{ code: 'topMachinesTransactions', display: 'Transactions' },
|
||||
{ code: 'topMachinesVolume', display: 'Volume' }
|
||||
]
|
||||
|
||||
const TopMachinesBarGraphHeader = ({
|
||||
title,
|
||||
period,
|
||||
data,
|
||||
machines,
|
||||
selectedMachine,
|
||||
timezone,
|
||||
currency
|
||||
}) => {
|
||||
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>
|
||||
<div className={classes.graphLegend}>
|
||||
<LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
|
||||
<LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
|
||||
</div>
|
||||
</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
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
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 { neon, java } from 'src/styling/variables'
|
||||
|
||||
import Graph from '../../graphs/Graph'
|
||||
import LegendEntry from '../LegendEntry'
|
||||
import classes from './wrappers.module.css'
|
||||
|
||||
const VolumeOverTimeGraphHeader = ({
|
||||
title,
|
||||
representing,
|
||||
period,
|
||||
data,
|
||||
machines,
|
||||
selectedMachine,
|
||||
handleMachineChange,
|
||||
timezone,
|
||||
currency
|
||||
}) => {
|
||||
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>
|
||||
<div className={classes.graphLegend}>
|
||||
<LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
|
||||
<LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
|
||||
</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 VolumeOverTimeGraphHeader
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
.graphHeaderWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.graphHeaderLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.graphHeaderRight {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
gap: 30px
|
||||
}
|
||||
|
||||
.cashInIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--java);
|
||||
}
|
||||
|
||||
.cashOutIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--neon);
|
||||
}
|
||||
|
||||
.graphLegend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.txIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.graphHeaderSwitchBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*'& > *': {*/
|
||||
/* margin: 0*/
|
||||
/*},*/
|
||||
/*'& > :first-child': {*/
|
||||
/* marginBottom: 2,*/
|
||||
/* extend: label1,*/
|
||||
/* color: offColor*/
|
||||
/*}*/
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue