diff --git a/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js b/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js index 89208a4a..02b1ab19 100644 --- a/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js +++ b/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 ( - {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]}`} diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js index 1b86af23..bf705a09 100644 --- a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js +++ b/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') diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeLineGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeLineGraph.js index f2ac39fa..6c5613a1 100644 --- a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeLineGraph.js +++ b/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') diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js index 9d3d288d..6148c966 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js +++ b/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'),