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

Merge pull request #1289 from chaotixkilla/fix-scatterplot-datapoints-cut-on-edge

Browse source 
Fix scatterplot datapoints being cut when on the right edge of the graph
This commit is contained in:
Rafael Taranto 2022-07-12 15:57:28 +01:00 • committed by GitHub
commit 0680e96ffa
2 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -34,7 +34,7 @@ const Graph = ({
const GRAPH_MARGIN = useMemo( const GRAPH_MARGIN = useMemo(
() => ({ () => ({
top: 25, top: 25,
right: 0.5, right: 3.5,
bottom: 27, bottom: 27,
left: 36.5 left: 36.5
}), }),
@ -158,6 +158,12 @@ const Graph = ({
.domain(periodDomains[period.code]) .domain(periodDomains[period.code])
.range([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right]) .range([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right])
// Create a second X axis for mouseover events to be placed correctly across the entire graph width and not limited by X's domain
const x2 = d3
.scaleUtc()
.domain(periodDomains[period.code])
.range([GRAPH_MARGIN.left, GRAPH_WIDTH])
const y = d3 const y = d3
.scaleLinear() .scaleLinear()
.domain([ .domain([
@ -167,11 +173,11 @@ const Graph = ({
.nice() .nice()
.range([GRAPH_HEIGHT - GRAPH_MARGIN.bottom, GRAPH_MARGIN.top]) .range([GRAPH_HEIGHT - GRAPH_MARGIN.bottom, GRAPH_MARGIN.top])
const getAreaInterval = (breakpoints, limits) => { const getAreaInterval = (breakpoints, dataLimits, graphLimits) => {
const fullBreakpoints = [ const fullBreakpoints = [
limits[1], graphLimits[1],
...R.filter(it => it > limits[0] && it < limits[1], breakpoints), ...R.filter(it => it > dataLimits[0] && it < dataLimits[1], breakpoints),
limits[0] dataLimits[0]
] ]
const intervals = [] const intervals = []
@ -238,7 +244,7 @@ const Graph = ({
.selectAll('.tick line') .selectAll('.tick line')
.filter(d => d === 0) .filter(d => d === 0)
.clone() .clone()
.attr('x2', GRAPH_WIDTH - GRAPH_MARGIN.right - GRAPH_MARGIN.left) .attr('x2', GRAPH_WIDTH - GRAPH_MARGIN.left)
.attr('stroke-width', 1) .attr('stroke-width', 1)
.attr('stroke', primaryColor) .attr('stroke', primaryColor)
), ),
@ -276,7 +282,7 @@ const Graph = ({
.attr('y1', d => 0.5 + y(d)) .attr('y1', d => 0.5 + y(d))
.attr('y2', d => 0.5 + y(d)) .attr('y2', d => 0.5 + y(d))
.attr('x1', GRAPH_MARGIN.left) .attr('x1', GRAPH_MARGIN.left)
.attr('x2', GRAPH_WIDTH - GRAPH_MARGIN.right) .attr('x2', GRAPH_WIDTH)
) )
// Vertical transparent rectangles for events // Vertical transparent rectangles for events
.call(g => .call(g =>
@ -291,7 +297,8 @@ const Graph = ({
const xValue = Math.round(x(d) * 100) / 100 const xValue = Math.round(x(d) * 100) / 100
const intervals = getAreaInterval( const intervals = getAreaInterval(
buildAreas(x.domain()).map(it => Math.round(x(it) * 100) / 100), buildAreas(x.domain()).map(it => Math.round(x(it) * 100) / 100),
x.range() x.range(),
x2.range()
) )
const interval = getAreaIntervalByX(intervals, xValue) const interval = getAreaIntervalByX(intervals, xValue)
return Math.round((interval[0] - interval[1]) * 100) / 100 return Math.round((interval[0] - interval[1]) * 100) / 100
@ -307,10 +314,12 @@ const Graph = ({
const areas = buildAreas(x.domain()) const areas = buildAreas(x.domain())
const intervals = getAreaInterval( const intervals = getAreaInterval(
buildAreas(x.domain()).map(it => Math.round(x(it) * 100) / 100), buildAreas(x.domain()).map(it => Math.round(x(it) * 100) / 100),
x.range() x.range(),
x2.range()
) )
const dateInterval = getDateIntervalByX(areas, intervals, xValue) const dateInterval = getDateIntervalByX(areas, intervals, xValue)
if (!dateInterval) return
const filteredData = data.filter(it => { const filteredData = data.filter(it => {
const created = new Date(it.created) const created = new Date(it.created)
const tzCreated = created.setTime(created.getTime() + offset) const tzCreated = created.setTime(created.getTime() + offset)
@ -426,6 +435,7 @@ const Graph = ({
buildTicks, buildTicks,
getPastAndCurrentDayLabels, getPastAndCurrentDayLabels,
x, x,
x2,
y, y,
period, period,
buildAreas, buildAreas,
@ -482,7 +492,7 @@ const Graph = ({
0.5 + y(d3.mean(data, d => new BigNumber(d.fiat).toNumber()) ?? 0) 0.5 + y(d3.mean(data, d => new BigNumber(d.fiat).toNumber()) ?? 0)
) )
.attr('x1', GRAPH_MARGIN.left) .attr('x1', GRAPH_MARGIN.left)
.attr('x2', GRAPH_WIDTH - GRAPH_MARGIN.right) .attr('x2', GRAPH_WIDTH)
) )
}, },
[GRAPH_MARGIN, y, data] [GRAPH_MARGIN, y, data]

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

@ -22,7 +22,7 @@ const Graph = ({ data, timeFrame, timezone }) => {
const GRAPH_MARGIN = useMemo( const GRAPH_MARGIN = useMemo(
() => ({ () => ({
top: 20, top: 20,
right: 0.5, right: 3.5,
bottom: 27, bottom: 27,
left: 33.5 left: 33.5
}), }),
@ -211,7 +211,7 @@ const Graph = ({ data, timeFrame, timezone }) => {
.attr('y1', d => 0.5 + y(d)) .attr('y1', d => 0.5 + y(d))
.attr('y2', d => 0.5 + y(d)) .attr('y2', d => 0.5 + y(d))
.attr('x1', GRAPH_MARGIN.left) .attr('x1', GRAPH_MARGIN.left)
.attr('x2', GRAPH_WIDTH - GRAPH_MARGIN.right) .attr('x2', GRAPH_WIDTH)
) )
// Thick vertical lines // Thick vertical lines
.call(g => .call(g =>