Chore: line chart adjustments

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

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}%`}
                 </div>
               </div>
-              <LineChart timeFrame={selectedRange} data={transactionsToShow} />
+              <LineChart
+                timeFrame={selectedRange}
+                data={transactionsToShow}
+                previousTimeData={transactionsLastTimePeriod}
+                previousProfit={getProfit(transactionsLastTimePeriod)}
+              />
             </Grid>
             <Grid item xs={4}>
               <Grid container>