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/tooltips/GraphTooltip.js

@@ -0,0 +1,86 @@
+import { Paper } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import * as R from 'ramda'
+import React, { memo } from 'react'
+
+import { Info2, Label3, P } from 'src/components/typography'
+import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
+import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import { singularOrPlural } from 'src/utils/string'
+import { formatDate, formatDateNonUtc } from 'src/utils/timezones'
+
+import styles from './GraphTooltip.styles'
+
+const useStyles = makeStyles(styles)
+
+const formatCurrency = amount =>
+  amount.toLocaleString('en-US', { maximumFractionDigits: 2 })
+
+const GraphTooltip = ({
+  coords,
+  data,
+  dateInterval,
+  period,
+  currency,
+  representing
+}) => {
+  const classes = useStyles(coords)
+
+  const formattedDateInterval = !R.includes('hourOfDay', representing.code)
+    ? [
+        formatDate(
+          dateInterval[1],
+          null,
+          period.code === 'day' ? 'MMM D, HH:mm' : 'MMM D'
+        ),
+        formatDate(
+          dateInterval[0],
+          null,
+          period.code === 'day' ? 'HH:mm' : 'MMM D'
+        )
+      ]
+    : [
+        formatDateNonUtc(dateInterval[1], 'HH:mm'),
+        formatDateNonUtc(dateInterval[0], 'HH:mm')
+      ]
+
+  const transactions = R.reduce(
+    (acc, value) => {
+      acc.volume += parseInt(value.fiat)
+      if (value.txClass === 'cashIn') acc.cashIn++
+      if (value.txClass === 'cashOut') acc.cashOut++
+      return acc
+    },
+    { volume: 0, cashIn: 0, cashOut: 0 },
+    data
+  )
+
+  return (
+    <Paper className={classes.dotOtWrapper}>
+      <Info2 noMargin>
+        {period.code === 'day' || R.includes('hourOfDay', representing.code)
+          ? `${formattedDateInterval[0]} - ${formattedDateInterval[1]}`
+          : `${formattedDateInterval[0]}`}
+      </Info2>
+      <P noMargin className={classes.dotOtTransactionAmount}>
+        {R.length(data)}{' '}
+        {singularOrPlural(R.length(data), 'transaction', 'transactions')}
+      </P>
+      <P noMargin className={classes.dotOtTransactionVolume}>
+        {formatCurrency(transactions.volume)} {currency} in volume
+      </P>
+      <div className={classes.dotOtTransactionClasses}>
+        <Label3 noMargin>
+          <TxInIcon />
+          <span>{transactions.cashIn} cash-in</span>
+        </Label3>
+        <Label3 noMargin>
+          <TxOutIcon />
+          <span>{transactions.cashOut} cash-out</span>
+        </Label3>
+      </div>
+    </Paper>
+  )
+}
+
+export default memo(GraphTooltip, (prev, next) => prev.coords === next.coords)