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/components/wrappers/OverTimeWrapper.js

@@ -0,0 +1,82 @@
+import { Box } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import React from 'react'
+
+import { Select } from 'src/components/inputs'
+import { H2 } from 'src/components/typography'
+import { primaryColor } from 'src/styling/variables'
+
+import styles from '../../Analytics.styles'
+import Graph from '../../graphs/Graph'
+import LegendEntry from '../LegendEntry'
+
+const useStyles = makeStyles(styles)
+
+const OverTimeDotGraphHeader = ({
+  title,
+  representing,
+  period,
+  data,
+  machines,
+  selectedMachine,
+  handleMachineChange,
+  timezone,
+  currency
+}) => {
+  const classes = useStyles()
+
+  const legend = {
+    cashIn: <div className={classes.cashInIcon}></div>,
+    cashOut: <div className={classes.cashOutIcon}></div>,
+    transaction: <div className={classes.txIcon}></div>,
+    average: (
+      <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>
+          <Box 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.average} label={'Average'} />
+          </Box>
+        </div>
+        <div className={classes.graphHeaderRight}>
+          <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}
+      />
+    </>
+  )
+}
+
+export default OverTimeDotGraphHeader