[SALAD-22078] WebApp: EarningLineChart: filter inactive machines (#1210)

* EarningLineChart: filter inactive machines * EarningLineChart: no data text changed
SaladTechnologies · Oct 3, 2024 · b1a4fee · b1a4fee
1 parent e8fcd74
commit b1a4fee
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/packages/web-app/src/modules/balance/BalanceStore.tsx b/packages/web-app/src/modules/balance/BalanceStore.tsx
@@ -1,5 +1,6 @@
 import type { AxiosInstance } from 'axios'
 import type { Guid } from 'guid-typescript'
+import { DateTime } from 'luxon'
 import { action, computed, flow, observable, runInAction } from 'mobx'
 import type { Moment } from 'moment'
 import moment from 'moment'
@@ -108,8 +109,17 @@ export class BalanceStore {
       const machinesResponse = await this.machinesApiClient?.v2.machines.get()
 
       if (machinesResponse?.items) {
-        return machinesResponse?.items
+        const machines = machinesResponse?.items.filter((machine) => {
+          if (machine.update_time) {
+            return DateTime.fromJSDate(machine.update_time) > DateTime.now().minus({ days: 32 })
+          }
+          return false
+        })
+
+        return machines.length > 0 ? machines : null
       }
+
+      return null
     } catch (error) {
       console.error('BalanceStore.getMultipleMachinesEarnings: ', error)
     }
@@ -149,13 +159,15 @@ export class BalanceStore {
 
       this.getMachines()
         .then((machines) => {
-          if (machines) {
-            runInAction(() => {
-              this.machines = machines
-            })
-            return this.getEarningsPerMachine(machines, 30)
+          runInAction(() => {
+            this.machines = machines
+          })
+
+          if (machines === null) {
+            throw new Error('There is no machines')
           }
-          throw new Error('There is no machines')
+
+          return this.getEarningsPerMachine(machines, 30)
         })
         .then((earningsPerMachine) => {
           if (earningsPerMachine) {

diff --git a/packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx b/packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx
@@ -5,6 +5,7 @@ import { EarningLineChart } from './components/EarningLineChart'
 const mapStoreToProps = (store: RootStore): any => {
   return {
     earningsPerMachine: store.balance.earningsPerMachine,
+    machines: store.balance.machines,
     daysShowing: store.balance.getDaysShowingEarnings,
     fetchEarningsPerMachine: store.balance.fetchEarningsPerMachine,
   }

diff --git a/packages/web-app/src/modules/earn-views/components/EarningLineChart/EarningLineChart.tsx b/packages/web-app/src/modules/earn-views/components/EarningLineChart/EarningLineChart.tsx
@@ -1,10 +1,11 @@
-import { LoadingSpinner } from '@saladtechnologies/garden-components'
+import { LoadingSpinner, Text } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import type { Machine } from '../../../../api/machinesApiClient/generated/models'
 import { DefaultTheme, type SaladTheme } from '../../../../SaladTheme'
 import { formatBalance } from '../../../../utils'
 import type { ChartDaysShowing, EarningPerMachine, EarningWindow } from '../../../balance/models'
@@ -30,6 +31,7 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    color: theme.lightGreen,
   },
   tickFont: {
     fontFamily: 'Mallory',
@@ -63,11 +65,12 @@ const getMachineOptions = (earningsPerMachine: EarningPerMachine) => {
 
 interface Props extends WithStyles<typeof styles> {
   earningsPerMachine: EarningPerMachine
+  machines: Machine[] | null
   daysShowing: ChartDaysShowing
   fetchEarningsPerMachine: () => void
 }
 
-const _EarningLineChart = ({ classes, earningsPerMachine, daysShowing, fetchEarningsPerMachine }: Props) => {
+const _EarningLineChart = ({ classes, machines, earningsPerMachine, daysShowing, fetchEarningsPerMachine }: Props) => {
   const is24HoursChart = daysShowing === 1
   const [machineOptions, setMachineOptions] = useState<MachineOptions>({})
 
@@ -98,9 +101,19 @@ const _EarningLineChart = ({ classes, earningsPerMachine, daysShowing, fetchEarn
     fetchEarningsPerMachine()
   }, [fetchEarningsPerMachine])
 
+  const withMachinesData = machines !== null
   const isLoading = machineEarningsData.length <= 0
   const isNoMachineOptionChecked = !Object.values(machineOptions).some((machineOption) => machineOption.isChecked)
 
+  if (!withMachinesData) {
+    return (
+      <div className={classes.earningLineChartWrapper}>
+        <div className={classes.loaderWrapper}>
+          <Text variant="baseM">No data to display</Text>
+        </div>
+      </div>
+    )
+  }
   return (
     <div className={classes.earningLineChartWrapper}>
       {isLoading ? (