From 80715259b1af76e06fe59c1ba1d1e8ef556ecb20 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Thu, 11 Aug 2022 20:19:59 +0200
Subject: [PATCH] feat: add y log scale

---
 .../src/pages/Analytics/Analytics.styles.js   | 24 ++++++-
 .../components/wrappers/OverTimeWrapper.js    | 11 ++-
 .../src/pages/Analytics/graphs/Graph.js       |  4 +-
 .../Analytics/graphs/OverTimeDotGraph.js      | 69 +++++++++++--------
 4 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Analytics/Analytics.styles.js b/new-lamassu-admin/src/pages/Analytics/Analytics.styles.js
index 089547f8..8274d929 100644
--- a/new-lamassu-admin/src/pages/Analytics/Analytics.styles.js
+++ b/new-lamassu-admin/src/pages/Analytics/Analytics.styles.js
@@ -1,4 +1,14 @@
-import { offDarkColor, tomato, neon, java } from 'src/styling/variables'
+import {
+  offColor,
+  offDarkColor,
+  tomato,
+  neon,
+  java
+} from 'src/styling/variables'
+
+import typographyStyles from '../../components/typography/styles'
+
+const { label1 } = typographyStyles
 
 const styles = {
   overviewLegend: {
@@ -135,6 +145,18 @@ const styles = {
   topMachinesRadio: {
     display: 'flex',
     flexDirection: 'row'
+  },
+  graphHeaderSwitchBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& > *': {
+      margin: 0
+    },
+    '& > :first-child': {
+      marginBottom: 2,
+      extend: label1,
+      color: offColor
+    }
   }
 }
 
diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.js b/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.js
index 502d817a..def8fe90 100644
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.js
+++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.js
@@ -1,8 +1,8 @@
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
+import React, { useState } from 'react'
 
-import { Select } from 'src/components/inputs'
+import { Select, Switch } from 'src/components/inputs'
 import { H2 } from 'src/components/typography'
 import { primaryColor } from 'src/styling/variables'
 
@@ -25,6 +25,8 @@ const OverTimeDotGraphHeader = ({
 }) => {
   const classes = useStyles()
 
+  const [logarithmic, setLogarithmic] = useState()
+
   const legend = {
     cashIn: <div className={classes.cashInIcon}></div>,
     cashOut: <div className={classes.cashOutIcon}></div>,
@@ -57,6 +59,10 @@ const OverTimeDotGraphHeader = ({
           </Box>
         </div>
         <div className={classes.graphHeaderRight}>
+          <div className={classes.graphHeaderSwitchBox}>
+            <span>Log. scale</span>
+            <Switch onChange={event => setLogarithmic(event.target.checked)} />
+          </div>
           <Select
             label="Machines"
             onSelectedItemChange={handleMachineChange}
@@ -74,6 +80,7 @@ const OverTimeDotGraphHeader = ({
         currency={currency}
         selectedMachine={selectedMachine}
         machines={machines}
+        log={logarithmic}
       />
     </>
   )
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/Graph.js b/new-lamassu-admin/src/pages/Analytics/graphs/Graph.js
index 81870a0c..720ee687 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/Graph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/Graph.js
@@ -15,7 +15,8 @@ const GraphWrapper = ({
   currency,
   selectedMachine,
   machines,
-  selectedDay
+  selectedDay,
+  log
 }) => {
   const [selectionCoords, setSelectionCoords] = useState(null)
   const [selectionDateInterval, setSelectionDateInterval] = useState(null)
@@ -33,6 +34,7 @@ const GraphWrapper = ({
             setSelectionDateInterval={setSelectionDateInterval}
             setSelectionData={setSelectionData}
             selectedMachine={selectedMachine}
+            log={log}
           />
         )
       case 'topMachinesVolume':
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
index 2dad847c..1b86af23 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
@@ -23,7 +23,8 @@ const Graph = ({
   timezone,
   setSelectionCoords,
   setSelectionData,
-  setSelectionDateInterval
+  setSelectionDateInterval,
+  log = false
 }) => {
   const ref = useRef(null)
 
@@ -171,7 +172,7 @@ const Graph = ({
     .domain(periodDomains[period.code])
     .range([GRAPH_MARGIN.left, GRAPH_WIDTH])
 
-  const y = d3
+  const yLin = d3
     .scaleLinear()
     .domain([
       0,
@@ -180,6 +181,16 @@ const Graph = ({
     .nice()
     .range([GRAPH_HEIGHT - GRAPH_MARGIN.bottom, GRAPH_MARGIN.top])
 
+  const yLog = d3
+    .scaleLog()
+    .domain([
+      (d3.min(data, d => new BigNumber(d.fiat).toNumber()) ?? 1) * 0.9,
+      (d3.max(data, d => new BigNumber(d.fiat).toNumber()) ?? 1000) * 1.1
+    ])
+    .range([GRAPH_HEIGHT - GRAPH_MARGIN.bottom, GRAPH_MARGIN.top])
+
+  const y = log ? yLog : yLin
+
   const getAreaInterval = (breakpoints, dataLimits, graphLimits) => {
     const fullBreakpoints = [
       graphLimits[1],
@@ -226,14 +237,11 @@ const Graph = ({
                 d.getTime() + d.getTimezoneOffset() * MINUTE
               )
             })
+            .tickSizeOuter(0)
         )
-        .call(g => g.select('.domain').remove())
         .call(g =>
           g
-            .append('line')
-            .attr('x1', GRAPH_MARGIN.left)
-            .attr('y1', -GRAPH_HEIGHT + GRAPH_MARGIN.top + GRAPH_MARGIN.bottom)
-            .attr('x2', GRAPH_MARGIN.left)
+            .select('.domain')
             .attr('stroke', primaryColor)
             .attr('stroke-width', 1)
         ),
@@ -244,18 +252,22 @@ const Graph = ({
     g =>
       g
         .attr('transform', `translate(${GRAPH_MARGIN.left}, 0)`)
-        .call(d3.axisLeft(y).ticks(GRAPH_HEIGHT / 100))
-        .call(g => g.select('.domain').remove())
-        .call(g =>
-          g
-            .selectAll('.tick line')
-            .filter(d => d === 0)
-            .clone()
-            .attr('x2', GRAPH_WIDTH - GRAPH_MARGIN.left)
-            .attr('stroke-width', 1)
-            .attr('stroke', primaryColor)
-        ),
-    [GRAPH_MARGIN, y]
+        .call(
+          d3
+            .axisLeft(y)
+            .ticks(GRAPH_HEIGHT / 100)
+            .tickSizeOuter(0)
+            .tickFormat(d => {
+              if (log && !['1', '2', '5'].includes(d.toString()[0])) return ''
+
+              if (d > 1000) return Math.floor(d / 1000) + 'k'
+              else return d
+            })
+        )
+        .select('.domain')
+        .attr('stroke', primaryColor)
+        .attr('stroke-width', 1),
+    [GRAPH_MARGIN, y, log]
   )
 
   const buildGrid = useCallback(
@@ -484,25 +496,23 @@ const Graph = ({
 
   const buildAvg = useCallback(
     g => {
+      const mean = d3.mean(data, d => new BigNumber(d.fiat).toNumber()) ?? 0
+
+      if (log && mean === 0) return
+
       g.attr('stroke', primaryColor)
         .attr('stroke-width', 3)
         .attr('stroke-dasharray', '10, 5')
         .call(g =>
           g
             .append('line')
-            .attr(
-              'y1',
-              0.5 + y(d3.mean(data, d => new BigNumber(d.fiat).toNumber()) ?? 0)
-            )
-            .attr(
-              'y2',
-              0.5 + y(d3.mean(data, d => new BigNumber(d.fiat).toNumber()) ?? 0)
-            )
+            .attr('y1', 0.5 + y(mean))
+            .attr('y2', 0.5 + y(mean))
             .attr('x1', GRAPH_MARGIN.left)
             .attr('x2', GRAPH_WIDTH)
         )
     },
-    [GRAPH_MARGIN, y, data]
+    [GRAPH_MARGIN, y, data, log]
   )
 
   const drawData = useCallback(
@@ -561,5 +571,6 @@ export default memo(
   Graph,
   (prev, next) =>
     R.equals(prev.period, next.period) &&
-    R.equals(prev.selectedMachine, next.selectedMachine)
+    R.equals(prev.selectedMachine, next.selectedMachine) &&
+    R.equals(prev.log, next.log)
 )