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:
+
+ Log. scale
+ setLogarithmic(event.target.checked)} />
+
>
)
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)
)