135 lines
4.1 KiB
JavaScript
135 lines
4.1 KiB
JavaScript
import * as R from 'ramda'
|
|
import React, { memo, useState } from 'react'
|
|
|
|
import GraphTooltip from '../components/tooltips/GraphTooltip'
|
|
|
|
import HourOfDayBarGraph from './HourOfDayBarGraph'
|
|
import OverTimeDotGraph from './OverTimeDotGraph'
|
|
import OverTimeLineGraph from './OverTimeLineGraph'
|
|
import TopMachinesBarGraph from './TopMachinesBarGraph'
|
|
|
|
const GraphWrapper = ({
|
|
data,
|
|
representing,
|
|
period,
|
|
timezone,
|
|
currency,
|
|
selectedMachine,
|
|
machines,
|
|
selectedDay,
|
|
log
|
|
}) => {
|
|
const [selectionCoords, setSelectionCoords] = useState(null)
|
|
const [selectionDateInterval, setSelectionDateInterval] = useState(null)
|
|
const [selectionData, setSelectionData] = useState(null)
|
|
|
|
const getGraph = representing => {
|
|
switch (representing.code) {
|
|
case 'overTime':
|
|
return (
|
|
<OverTimeDotGraph
|
|
data={data}
|
|
period={period}
|
|
timezone={timezone}
|
|
setSelectionCoords={setSelectionCoords}
|
|
setSelectionDateInterval={setSelectionDateInterval}
|
|
setSelectionData={setSelectionData}
|
|
selectedMachine={selectedMachine}
|
|
log={log}
|
|
/>
|
|
)
|
|
case 'volumeOverTime':
|
|
return (
|
|
<OverTimeLineGraph
|
|
data={data}
|
|
period={period}
|
|
timezone={timezone}
|
|
setSelectionCoords={setSelectionCoords}
|
|
setSelectionDateInterval={setSelectionDateInterval}
|
|
setSelectionData={setSelectionData}
|
|
selectedMachine={selectedMachine}
|
|
log={log}
|
|
/>
|
|
)
|
|
case 'topMachinesVolume':
|
|
return (
|
|
<TopMachinesBarGraph
|
|
data={data}
|
|
period={period}
|
|
timezone={timezone}
|
|
setSelectionCoords={setSelectionCoords}
|
|
setSelectionDateInterval={setSelectionDateInterval}
|
|
setSelectionData={setSelectionData}
|
|
selectedMachine={selectedMachine}
|
|
machines={R.filter(it => it.code !== 'all', machines)}
|
|
currency={currency}
|
|
/>
|
|
)
|
|
case 'topMachinesTransactions':
|
|
return (
|
|
<TopMachinesBarGraph
|
|
data={data}
|
|
period={period}
|
|
timezone={timezone}
|
|
setSelectionCoords={setSelectionCoords}
|
|
setSelectionDateInterval={setSelectionDateInterval}
|
|
setSelectionData={setSelectionData}
|
|
selectedMachine={selectedMachine}
|
|
machines={R.filter(it => it.code !== 'all', machines)}
|
|
currency={currency}
|
|
/>
|
|
)
|
|
case 'hourOfDayVolume':
|
|
return (
|
|
<HourOfDayBarGraph
|
|
data={data}
|
|
period={period}
|
|
timezone={timezone}
|
|
setSelectionCoords={setSelectionCoords}
|
|
setSelectionDateInterval={setSelectionDateInterval}
|
|
setSelectionData={setSelectionData}
|
|
selectedMachine={selectedMachine}
|
|
machines={R.filter(it => it.code !== 'all', machines)}
|
|
currency={currency}
|
|
selectedDay={selectedDay}
|
|
/>
|
|
)
|
|
case 'hourOfDayTransactions':
|
|
return (
|
|
<HourOfDayBarGraph
|
|
data={data}
|
|
period={period}
|
|
timezone={timezone}
|
|
setSelectionCoords={setSelectionCoords}
|
|
setSelectionDateInterval={setSelectionDateInterval}
|
|
setSelectionData={setSelectionData}
|
|
selectedMachine={selectedMachine}
|
|
machines={R.filter(it => it.code !== 'all', machines)}
|
|
currency={currency}
|
|
selectedDay={selectedDay}
|
|
/>
|
|
)
|
|
default:
|
|
throw new Error(`There's no graph to represent ${representing}`)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{!R.isNil(selectionCoords) && (
|
|
<GraphTooltip
|
|
coords={selectionCoords}
|
|
dateInterval={selectionDateInterval}
|
|
data={selectionData}
|
|
period={period}
|
|
currency={currency}
|
|
timezone={timezone}
|
|
representing={representing}
|
|
/>
|
|
)}
|
|
{getGraph(representing)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(GraphWrapper)
|