Merge pull request #1150 from chaotixkilla/chore-cleanup-analytics-page-for-8.0

Cleanup analytics page

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

@@ -3,7 +3,7 @@ import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import { endOfToday } from 'date-fns'
-import { subDays } from 'date-fns/fp'
+import { subDays, format, add, startOfWeek } from 'date-fns/fp'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -43,6 +43,16 @@ const TIME_OPTIONS = {
   month: MONTH
 }
 
+const DAY_OPTIONS = R.map(
+  it => ({
+    code: R.toLower(it),
+    display: it
+  }),
+  Array.from(Array(7)).map((_, i) =>
+    format('EEEE', add({ days: i }, startOfWeek(new Date())))
+  )
+)
+
 const GET_TRANSACTIONS = gql`
   query transactions(
     $from: Date
@@ -138,6 +148,9 @@ const Analytics = () => {
   const [representing, setRepresenting] = useState(REPRESENTING_OPTIONS[0])
   const [period, setPeriod] = useState(PERIOD_OPTIONS[0])
   const [machine, setMachine] = useState(MACHINE_OPTIONS[0])
+  const [selectedDay, setSelectedDay] = useState(
+    R.equals(representing.code, 'hourOfTheDay') ? DAY_OPTIONS[0] : null
+  )
 
   const loading = txLoading || configLoading
 
@@ -179,15 +192,27 @@ const Analytics = () => {
 
   const filteredData = timeInterval => ({
     current:
-      machineTxs.filter(
+      machineTxs.filter(d => {
-        d => new Date(d.created) >= Date.now() - TIME_OPTIONS[timeInterval]
+        const txDay = new Date(d.created)
-      ) ?? [],
+        const isSameWeekday = !R.isNil(selectedDay)
+          ? R.equals(R.toLower(format('EEEE', txDay)), selectedDay.code)
+          : true
+
+        return isSameWeekday && txDay >= Date.now() - TIME_OPTIONS[timeInterval]
+      }) ?? [],
     previous:
-      machineTxs.filter(
+      machineTxs.filter(d => {
-        d =>
+        const txDay = new Date(d.created)
-          new Date(d.created) < Date.now() - TIME_OPTIONS[timeInterval] &&
+        const isSameWeekday = !R.isNil(selectedDay)
-          new Date(d.created) >= Date.now() - 2 * TIME_OPTIONS[timeInterval]
+          ? R.equals(R.toLower(format('EEEE', txDay)), selectedDay.code)
-      ) ?? []
+          : true
+
+        return (
+          isSameWeekday &&
+          txDay < Date.now() - TIME_OPTIONS[timeInterval] &&
+          txDay >= Date.now() - 2 * TIME_OPTIONS[timeInterval]
+        )
+      }) ?? []
   })
 
   const txs = {
@@ -224,6 +249,13 @@ const Analytics = () => {
     )
   }
 
+  const handleRepresentationChange = newRepresentation => {
+    setRepresenting(newRepresentation)
+    setSelectedDay(
+      R.equals(newRepresentation.code, 'hourOfTheDay') ? DAY_OPTIONS[0] : null
+    )
+  }
+
   const getGraphInfo = representing => {
     switch (representing.code) {
       case 'overTime':
@@ -264,6 +296,9 @@ const Analytics = () => {
             machines={machineOptions}
             selectedMachine={machine}
             handleMachineChange={setMachine}
+            selectedDay={selectedDay}
+            dayOptions={DAY_OPTIONS}
+            handleDayChange={setSelectedDay}
             timezone={timezone}
             currency={fiatLocale}
           />
@@ -296,7 +331,7 @@ const Analytics = () => {
           <div className={classes.dropdowns}>
             <Select
               label="Representing"
-              onSelectedItemChange={setRepresenting}
+              onSelectedItemChange={handleRepresentationChange}
               items={REPRESENTING_OPTIONS}
               default={REPRESENTING_OPTIONS[0]}
               selectedItem={representing}

new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js

@@ -1,11 +1,10 @@
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { getTimezoneOffset } from 'date-fns-tz'
-import { format, add, startOfWeek } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { RadioGroup, Select } from 'src/components/inputs'
+import { Select } from 'src/components/inputs'
 import { H2 } from 'src/components/typography'
 import { MINUTE } from 'src/utils/time'
 
@@ -20,16 +19,6 @@ const options = [
   { code: 'hourOfDayVolume', display: 'Volume' }
 ]
 
-const dayOptions = R.map(
-  it => ({
-    code: R.toLower(it),
-    display: it
-  }),
-  Array.from(Array(7)).map((_, i) =>
-    format('EEEE', add({ days: i }, startOfWeek(new Date())))
-  )
-)
-
 const HourOfDayBarGraphHeader = ({
   title,
   period,
@@ -37,13 +26,15 @@ const HourOfDayBarGraphHeader = ({
   machines,
   selectedMachine,
   handleMachineChange,
+  selectedDay,
+  dayOptions,
+  handleDayChange,
   timezone,
   currency
 }) => {
   const classes = useStyles()
 
-  const [graphType, setGraphType] = useState(options[0].code)
+  const [graphType /*, setGraphType */] = useState(options[0].code)
-  const [selectedDay, setSelectedDay] = useState(dayOptions[0])
 
   const legend = {
     cashIn: <div className={classes.cashInIcon}></div>,
@@ -100,18 +91,18 @@ const HourOfDayBarGraphHeader = ({
           </Box>
         </div>
         <div className={classes.graphHeaderRight}>
-          <RadioGroup
+          {/* <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={setSelectedDay}
+            onSelectedItemChange={handleDayChange}
           />
           <Select
             label="Machines"

new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.js

@@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { RadioGroup } from 'src/components/inputs'
 import { H2 } from 'src/components/typography'
 
 import styles from '../../Analytics.styles'
@@ -28,7 +27,7 @@ const TopMachinesBarGraphHeader = ({
 }) => {
   const classes = useStyles()
 
-  const [graphType, setGraphType] = useState(options[0].code)
+  const [graphType /*, setGraphType */] = useState(options[0].code)
 
   const legend = {
     cashIn: <div className={classes.cashInIcon}></div>,
@@ -46,12 +45,12 @@ const TopMachinesBarGraphHeader = ({
           </Box>
         </div>
         <div className={classes.graphHeaderRight}>
-          <RadioGroup
+          {/* <RadioGroup
             options={options}
             className={classes.topMachinesRadio}
             value={graphType}
             onChange={e => setGraphType(e.target.value)}
-          />
+          /> */}
         </div>
       </div>
       <Graph