lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use k for thousands

Browse source 
fix: graph tooltip for `threeDays` interval

fix: y domain for log graph

fix: line graph drawing order

fix: line graph dots
This commit is contained in:
Nikola Ubavic 2022-08-15 14:33:54 +02:00 • committed by Rafael
parent bd806848b3
commit b5e798339b
4 changed files with 39 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

@ -12,6 +12,7 @@ import {
fontSecondary, fontSecondary,
backgroundColor backgroundColor
} from 'src/styling/variables' } from 'src/styling/variables'
import { numberToFiatAmount } from 'src/utils/number'
import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time' import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time'
const Graph = ({ data, timeFrame, timezone }) => { const Graph = ({ data, timeFrame, timezone }) => {
@ -172,7 +173,16 @@ const Graph = ({ data, timeFrame, timezone }) => {
g => g =>
g g
.attr('transform', `translate(${GRAPH_MARGIN.left}, 0)`) .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()) .call(g => g.select('.domain').remove())
.selectAll('text') .selectAll('text')
.attr('dy', '-0.25rem'), .attr('dy', '-0.25rem'),