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}%`}
-
+