fix: use k for thousands

fix: graph tooltip for `threeDays` interval

fix: y domain for log graph

fix: line graph drawing order

fix: line graph dots

new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js

@@ -29,12 +29,14 @@ const GraphTooltip = ({
         formatDate(
           dateInterval[1],
           null,
-          period.code === 'day' ? 'MMM d, HH:mm' : 'MMM d'
+          R.includes(period.code, ['day', 'threeDays'])
+            ? 'MMM d, HH:mm'
+            : 'MMM d'
         ),
         formatDate(
           dateInterval[0],
           null,
-          period.code === 'day' ? 'HH:mm' : 'MMM d'
+          R.includes(period.code, ['day', 'threeDays']) ? 'HH:mm' : 'MMM d'
         )
       ]
     : [
@@ -56,7 +58,8 @@ const GraphTooltip = ({
   return (
     <Paper className={classes.dotOtWrapper}>
       <Info2 noMargin>
-        {period.code === 'day' || R.includes('hourOfDay', representing.code)
+        {R.includes(period.code, ['day', 'threeDays']) ||
+        R.includes('hourOfDay', representing.code)
           ? `${formattedDateInterval[0]} - ${formattedDateInterval[1]}`
           : `${formattedDateInterval[0]}`}
       </Info2>

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

@@ -15,6 +15,7 @@ import {
   fontSecondary,
   subheaderColor
 } from 'src/styling/variables'
+import { numberToFiatAmount } from 'src/utils/number'
 import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time'
 
 const Graph = ({
@@ -37,7 +38,7 @@ const Graph = ({
       top: 25,
       right: 3.5,
       bottom: 27,
-      left: 36.5
+      left: 38
     }),
     []
   )
@@ -260,8 +261,9 @@ const Graph = ({
             .tickFormat(d => {
               if (log && !['1', '2', '5'].includes(d.toString()[0])) return ''
 
-              if (d > 1000) return Math.floor(d / 1000) + 'k'
-              else return d
+              if (d >= 1000) return numberToFiatAmount(d / 1000) + 'k'
+
+              return numberToFiatAmount(d)
             })
         )
         .select('.domain')

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

@@ -23,6 +23,7 @@ import {
   fontSecondary,
   subheaderColor
 } from 'src/styling/variables'
+import { numberToFiatAmount } from 'src/utils/number'
 import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time'
 
 const Graph = ({
@@ -45,7 +46,7 @@ const Graph = ({
       top: 25,
       right: 3.5,
       bottom: 27,
-      left: 36.5
+      left: 38
     }),
     []
   )
@@ -234,7 +235,7 @@ const Graph = ({
   const yLog = d3
     .scaleLog()
     .domain([
-      min === 0 ? 1 : min * 0.9,
+      min === 0 ? 0.9 : min * 0.9,
       (max === min ? min + Math.pow(10, 2 * min + 1) : max) * 2
     ])
     .clamp(true)
@@ -311,8 +312,9 @@ const Graph = ({
             .tickFormat(d => {
               if (log && !['1', '2', '5'].includes(d.toString()[0])) return ''
 
-              if (d > 999) return Math.floor(d / 1000) + 'k'
-              else return d
+              if (d >= 1000) return numberToFiatAmount(d / 1000) + 'k'
+
+              return numberToFiatAmount(d)
             })
         )
         .select('.domain')
@@ -564,17 +566,7 @@ const Graph = ({
         .attr('cx', d => x(d.date))
         .attr('cy', d => y(d.cashIn))
         .attr('fill', java)
-        .attr('r', 3.5)
-
-      g.append('g')
-        .attr('clip-path', 'url(#clip-path)')
-        .selectAll('circle .cashIn')
-        .data(bins)
-        .join('circle')
-        .attr('cx', d => x(d.date))
-        .attr('cy', d => y(d.cashOut))
-        .attr('fill', neon)
-        .attr('r', 3.5)
+        .attr('r', d => (d.cashIn === 0 ? 0 : 3.5))
 
       g.append('path')
         .datum(bins)
@@ -591,6 +583,16 @@ const Graph = ({
             .y(d => y(d.cashIn))
         )
 
+      g.append('g')
+        .attr('clip-path', 'url(#clip-path)')
+        .selectAll('circle .cashIn')
+        .data(bins)
+        .join('circle')
+        .attr('cx', d => x(d.date))
+        .attr('cy', d => y(d.cashOut))
+        .attr('fill', neon)
+        .attr('r', d => (d.cashOut === 0 ? 0 : 3.5))
+
       g.append('path')
         .datum(bins)
         .attr('fill', 'none')

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js

@@ -12,6 +12,7 @@ import {
   fontSecondary,
   backgroundColor
 } from 'src/styling/variables'
+import { numberToFiatAmount } from 'src/utils/number'
 import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time'
 
 const Graph = ({ data, timeFrame, timezone }) => {
@@ -172,7 +173,16 @@ const Graph = ({ data, timeFrame, timezone }) => {
     g =>
       g
         .attr('transform', `translate(${GRAPH_MARGIN.left}, 0)`)
-        .call(d3.axisLeft(y).ticks(5))
+        .call(
+          d3
+            .axisLeft(y)
+            .ticks(5)
+            .tickFormat(d => {
+              if (d >= 1000) return numberToFiatAmount(d / 1000) + 'k'
+
+              return numberToFiatAmount(d)
+            })
+        )
         .call(g => g.select('.domain').remove())
         .selectAll('text')
         .attr('dy', '-0.25rem'),