diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js index 29d92d4f..e5b69302 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js @@ -28,7 +28,18 @@ const reducer = (acc, tx) => { return { ...tx, profit: currentProfit + transactionProfit(tx) } } -const RefLineChart = ({ data: realData, timeFrame }) => { +const timeFrameMS = { + Day: 24 * 3600 * 1000, + Week: 7 * 24 * 3600 * 1000, + Month: 30 * 24 * 3600 * 1000 +} + +const RefLineChart = ({ + data: realData, + previousTimeData, + previousProfit, + timeFrame +}) => { const svgRef = useRef() const drawGraph = useCallback(() => { @@ -43,14 +54,49 @@ const RefLineChart = ({ data: realData, timeFrame }) => { const aggregatedTX = R.values(R.reduceBy(reducer, [], method, realData)) // if no point exists, then return 2 points at y = 0 - if (aggregatedTX.length === 0) { + if (!aggregatedTX.length && !previousTimeData.length) { const mockPoint1 = { created: new Date().toISOString(), profit: 0 } const mockPoint2 = mockPoint(mockPoint1) return [[mockPoint1, mockPoint2], true] } + // if this time period has no txs, but previous time period has, then % change is -100% + if (!aggregatedTX.length && previousTimeData.length) { + const mockPoint1 = { + created: new Date().toISOString(), + profit: 0 + } + const mockPoint2 = { + created: new Date(Date.now() - 1).toISOString(), + profit: 1 + } + return [[mockPoint1, mockPoint2], false] + } + // if this time period has txs, but previous doesn't, then % change is +100% + if (aggregatedTX.length && !previousTimeData.length) { + const mockPoint1 = { + created: new Date().toISOString(), + profit: 1 + } + const mockPoint2 = { + created: new Date(Date.now() - timeFrameMS[timeFrame]).toISOString(), + profit: 0 + } + return [[mockPoint1, mockPoint2], false] + } // if only one point exists, create point on the left - otherwise the line won't be drawn if (aggregatedTX.length === 1) { - return [R.append(mockPoint(aggregatedTX[0]), aggregatedTX), false] + return [ + R.append( + { + created: new Date( + Date.now() - timeFrameMS[timeFrame] + ).toISOString(), + profit: previousProfit + }, + aggregatedTX + ), + false + ] } // the boolean value is for zeroProfit. It makes the line render at y = 0 instead of y = 50% of container height return [aggregatedTX, false] @@ -148,7 +194,7 @@ const RefLineChart = ({ data: realData, timeFrame }) => { .attr('stroke-width', '2') .attr('stroke-linejoin', 'round') .attr('stroke', primaryColor) - }, [realData, timeFrame]) + }, [realData, timeFrame, previousTimeData, previousProfit]) useEffect(() => { // first we clear old chart DOM elements on component update diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js index f96b7e00..b8242396 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js @@ -157,8 +157,6 @@ const SystemPerformance = () => { const percentChange = getPercentChange() - console.log(percentChange) - const percentageClasses = { [classes.percentDown]: percentChange < 0, [classes.percentUp]: percentChange > 0, @@ -216,7 +214,12 @@ const SystemPerformance = () => { {`${percentChange}%`} - +