[WebApp] Show earning line chart (#1150)

packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx

@@ -1,6 +1,6 @@
 import { connect } from '../../connect'
 import type { RootStore } from '../../Store'
-import { EarningLineChart } from './components'
+import { EarningLineChart } from './components/EarningLineChart'
 
 const mockedEarningsPerMachine = (daysShowing: number) => {
   const shouldShowAmPm = daysShowing === 1

packages/web-app/src/modules/earn-views/EarningSummaryContainer.tsx

@@ -26,6 +26,9 @@ const mapStoreToProps = (store: RootStore): any => {
     trackEarnPageFAQLinkClicked: store.analytics.trackEarnPageFAQLinkClicked,
     trackEarnPageViewed: store.analytics.trackEarnPageViewed,
     trackAndNavigateToRewardVaultPage,
+    viewLast24Hours: store.balance.viewLast24Hours,
+    viewLast7Days: store.balance.viewLast7Days,
+    viewLast30Days: store.balance.viewLast30Days,
   }
 }
 

packages/web-app/src/modules/earn-views/components/EarningChart.tsx

@@ -1,4 +1,4 @@
-import { DefaultTheme as GardenTheme, Switch } from '@saladtechnologies/garden-components'
+import { DefaultTheme as GardenTheme } from '@saladtechnologies/garden-components'
 import classnames from 'classnames'
 import { uniq } from 'lodash'
 import moment from 'moment'
@@ -10,36 +10,14 @@ import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis
 import type { CategoricalChartState } from 'recharts/types/chart/types'
 import type { SaladTheme } from '../../../SaladTheme'
 import { P } from '../../../components'
-import { Segments } from '../../../components/elements/Segments'
 import { formatBalance } from '../../../utils'
 import type { ChartDaysShowing, EarningWindow } from '../../balance/models'
 import { MidnightHour, NoonHour } from '../pages/constants'
 
 const styles = (theme: SaladTheme) => ({
-  container: {
-    display: 'flex',
-    height: 250,
-    width: '100%',
-    position: 'relative',
-    flexDirection: 'column',
-  },
   removeContainerPadding: {
     paddingTop: 0,
   },
-  chartHeader: {
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-end',
-    flexDirection: 'row',
-  },
-  segmentsContainer: {
-    '&>label:first-child': {
-      borderRadius: '2px 0px 0px 2px',
-    },
-    '&>label:last-child': {
-      borderRadius: '0px 2px 2px 0px',
-    },
-  },
   placeholderText: {
     fontFamily: 'Mallory',
     fontSize: 12,
@@ -99,9 +77,6 @@ const styles = (theme: SaladTheme) => ({
   tickMobile: {
     display: 'block',
   },
-  earningPerMachineSwitchWrapper: {
-    marginLeft: 32,
-  },
   '@media screen and (min-width: 1025px)': {
     tickDesktop: {
       display: 'block',
@@ -296,22 +271,16 @@ interface State {
   selectedLeftToRight?: boolean
   selectedRangeIndexes: number[]
   showEarningsRange?: boolean
-  isEarningsPerMachineEnabled: boolean
 }
 
 class _EarningChart extends Component<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
       selectedRangeIndexes: [],
-      isEarningsPerMachineEnabled: false,
     }
   }
 
-  public override componentDidMount() {
-    this.props.viewLast24Hours()
-  }
-
   public override shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     if (this.props.earningHistory !== nextProps.earningHistory) {
       return true
@@ -335,10 +304,6 @@ class _EarningChart extends Component<Props, State> {
       return true
     }
 
-    if (this.state.isEarningsPerMachineEnabled !== nextState.isEarningsPerMachineEnabled) {
-      return true
-    }
-
     return false
   }
 
@@ -442,46 +407,21 @@ class _EarningChart extends Component<Props, State> {
 
   getTimeValue = (earningWindow: EarningWindow) => moment(earningWindow.timestamp).valueOf()
 
-  handleEarningsPerMachineClick = () => {
-    this.setState((prevState) => ({
-      isEarningsPerMachineEnabled: !prevState.isEarningsPerMachineEnabled,
-    }))
-  }
-
   public override render(): ReactNode {
-    const { daysShowing, classes, earningHistory, viewLast24Hours, viewLast7Days, viewLast30Days } = this.props
+    const { daysShowing, classes, earningHistory } = this.props
     const { hoverIndex, showEarningsRange, earningsRangeSum, rangeCenterCoordinate, selectedRangeIndexes } = this.state
     const isZero: boolean =
       !earningHistory || earningHistory.length === 0 || !earningHistory.some((x) => x.earnings > 0)
 
-    const segmentOptions = [
-      { name: '24 Hours', action: viewLast24Hours },
-      { name: '7 Days', action: viewLast7Days },
-      { name: '30 Days', action: viewLast30Days },
-    ]
-
     return (
-      <div className={classnames(classes.container)}>
+      <>
         <div
           className={classnames(classes.placeholderText, {
             [classes.placeholderTextHidden]: !isZero,
           })}
         >
           <P>No data to display</P>
         </div>
-        <div className={classes.chartHeader}>
-          <div className={classes.segmentsContainer}>
-            <Segments options={segmentOptions} />
-          </div>
-          <div className={classes.earningPerMachineSwitchWrapper}>
-            <Switch
-              label="Earnings Per Machine"
-              checked={this.state.isEarningsPerMachineEnabled}
-              onChange={this.handleEarningsPerMachineClick}
-              variant="light"
-            />
-          </div>
-        </div>
         {earningHistory && (
           <>
             <ResponsiveContainer>
@@ -573,7 +513,7 @@ class _EarningChart extends Component<Props, State> {
             </ResponsiveContainer>
           </>
         )}
-      </div>
+      </>
     )
   }
 }

packages/web-app/src/modules/earn-views/components/EarningHistory.tsx

@@ -1,8 +1,11 @@
-import type { FC } from 'react'
+import { Switch } from '@saladtechnologies/garden-components'
+import { useState } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import type { SaladTheme } from '../../../SaladTheme'
+import { Segments } from '../../../components/elements/Segments'
 import { EarningChartContainer } from '../EarningChartContainer'
+import { EarningLineChartContainer } from '../EarningLineChartContainer'
 import { EarnSectionHeader } from './EarnSectionHeader'
 
 const styles = (theme: SaladTheme) => ({
@@ -12,6 +15,13 @@ const styles = (theme: SaladTheme) => ({
     maxWidth: 860,
     position: 'relative',
   },
+  chartContainer: {
+    display: 'flex',
+    height: 250,
+    width: '100%',
+    position: 'relative',
+    flexDirection: 'column',
+  },
   subtitle: {
     fontFamily: 'Mallory',
     fontSize: 16,
@@ -21,16 +31,61 @@ const styles = (theme: SaladTheme) => ({
     marginTop: 32,
     marginBottom: 10,
   },
+  chartHeader: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+  },
+  segmentsContainer: {
+    '&>label:first-child': {
+      borderRadius: '2px 0px 0px 2px',
+    },
+    '&>label:last-child': {
+      borderRadius: '0px 2px 2px 0px',
+    },
+  },
+  earningPerMachineSwitchWrapper: {
+    marginLeft: 32,
+  },
 })
 
-interface Props extends WithStyles<typeof styles> {}
+interface Props extends WithStyles<typeof styles> {
+  viewLast24Hours: () => void
+  viewLast7Days: () => void
+  viewLast30Days: () => void
+}
+
+const EarningHistoryRaw = ({ classes, viewLast24Hours, viewLast7Days, viewLast30Days }: Props) => {
+  const [isEarningsPerMachineEnabled, setIsEarningsPerMachineEnabled] = useState(false)
+  const segmentOptions = [
+    { name: '24 Hours', action: viewLast24Hours },
+    { name: '7 Days', action: viewLast7Days },
+    { name: '30 Days', action: viewLast30Days },
+  ]
 
-const EarningHistoryRaw: FC<Props> = ({ classes }) => (
-  <div className={classes.container}>
-    <EarnSectionHeader>Earning History</EarnSectionHeader>
-    <p className={classes.subtitle}>See earnings from the last...</p>
-    <EarningChartContainer />
-  </div>
-)
+  return (
+    <div className={classes.container}>
+      <EarnSectionHeader>Earning History</EarnSectionHeader>
+      <p className={classes.subtitle}>See earnings from the last...</p>
+      <div className={classes.chartHeader}>
+        <div className={classes.segmentsContainer}>
+          <Segments options={segmentOptions} />
+        </div>
+        <div className={classes.earningPerMachineSwitchWrapper}>
+          <Switch
+            label="Earnings Per Machine"
+            checked={isEarningsPerMachineEnabled}
+            onChange={setIsEarningsPerMachineEnabled}
+            variant="light"
+          />
+        </div>
+      </div>
+      <div className={classes.chartContainer}>
+        {isEarningsPerMachineEnabled ? <EarningLineChartContainer /> : <EarningChartContainer />}
+      </div>
+    </div>
+  )
+}
 
 export const EarningHistory = withStyles(styles)(EarningHistoryRaw)

packages/web-app/src/modules/earn-views/components/EarningLineChart/EarningLineChart.tsx

@@ -39,8 +39,8 @@ const _EarningLineChart = ({ classes, earningsPerMachine, daysShowing }: Props)
   }))
 
   return (
-    <ResponsiveContainer width="100%" height={210}>
-      <LineChart>
+    <ResponsiveContainer>
+      <LineChart margin={{ top: 30, left: 10, right: 0, bottom: 10 }}>
         <CartesianGrid vertical={false} stroke="#3B4D5C" />
         <XAxis
           allowDuplicatedCategory={false}

packages/web-app/src/modules/earn-views/pages/EarningSummaryPage.tsx

@@ -33,6 +33,9 @@ interface Props extends WithStyles<typeof styles> {
   trackAndNavigateToRewardVaultPage: () => void
   trackEarnPageFAQLinkClicked: (faqLink: string) => void
   trackEarnPageViewed: () => void
+  viewLast24Hours: () => void
+  viewLast7Days: () => void
+  viewLast30Days: () => void
 }
 
 const _EarningSummaryPage: FC<Props> = ({
@@ -51,6 +54,9 @@ const _EarningSummaryPage: FC<Props> = ({
   trackAndNavigateToRewardVaultPage,
   trackEarnPageFAQLinkClicked,
   trackEarnPageViewed,
+  viewLast24Hours,
+  viewLast7Days,
+  viewLast30Days,
 }) => {
   useEffect(() => {
     startRedemptionsRefresh()
@@ -77,7 +83,11 @@ const _EarningSummaryPage: FC<Props> = ({
           redeemedRewardsCount={redeemedRewardsCount}
           totalChoppingHours={totalChoppingHours}
         />
-        <EarningHistory />
+        <EarningHistory
+          viewLast24Hours={viewLast24Hours}
+          viewLast7Days={viewLast7Days}
+          viewLast30Days={viewLast30Days}
+        />
         <LatestRewardsRedeemed
           latestCompletedRedeemedRewards={latestCompletedRedeemedRewardsArray}
           navigateToRewardVaultPage={trackAndNavigateToRewardVaultPage}