feat: add analytics screen

feat: analytics header overview and legend
feat: data selectors
feat: graph axis and introductory stale data

feat: change graph tick labeling
feat: color formatting
feat: day and month separation in graph grid
refactor: move graph logic to its own file
chore: create dummy transaction factory
feat: make the analytics overview dynamic with data

feat: apply timezone to the analytics screen
fix: multiple bug fixes

fix: graph txs colors
fix: graph no data scenario

feat: remove placeholder icons
fix: used currencies on filtered data

fix: remove timezone object formatting

fix: forex rates on transaction data
fix: styles

fix: growth percentage margin

refactor: pull up variables
fix: clean up code

feat: add transparent areas for mouse event purposes

fix: replace DateTime with Date

fix: small fixes to graph area intervals

fix: graph rectangle location

fix: d3 onClick event in dot graph

chore: move graph popover component to components folder

feat: memo dot graph to avoid expensive rerendering
refactor: separate Graph component for future refactoring purposes

refactor: restructure Graph related components
fix: graph memoizing

feat: top machines stacked bar graph
refactor: further analytics refactor
fix: small fixes on top machines graph

fix: top machines stacked bar grapy y-axis scaling

fix: small fixes on the stacked bar graph
feat: add top machines header

fix: bar drawing
fix: transaction grouping per day of week
refactor: general code cleaning up
feat: mouseover events

fix: transaction filtering on cross-day hour intervals

fix: top machines graph edge case

fix: NaN instances on graph drawing

fix: tooltip date presentation
fix: rearrange files for easier understanding

fix: tooltip date interval

fix: multiple small fixes

fix: remove unnecessary arguments
fix: add second group of hoverable rectangles

new-lamassu-admin/src/pages/Analytics/graphs/Graph.js

@@ -0,0 +1,119 @@
+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 TopMachinesBarGraph from './TopMachinesBarGraph'
+
+const GraphWrapper = ({
+  data,
+  representing,
+  period,
+  timezone,
+  currency,
+  selectedMachine,
+  machines,
+  selectedDay
+}) => {
+  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}
+          />
+        )
+      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)