From f18d98ddcc115c334b06db3e9fb6a120567c13a0 Mon Sep 17 00:00:00 2001
From: Viktor <v.mozharovsky@gmail.com>
Date: Fri, 14 Jun 2024 13:27:00 +0200
Subject: [PATCH] EarningChart: Earnings Per Machine Switch - added (#1148)

---
 .../earn-views/components/EarningChart.tsx    | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/web-app/src/modules/earn-views/components/EarningChart.tsx b/packages/web-app/src/modules/earn-views/components/EarningChart.tsx
index b04742352..66e3afe43 100644
--- a/packages/web-app/src/modules/earn-views/components/EarningChart.tsx
+++ b/packages/web-app/src/modules/earn-views/components/EarningChart.tsx
@@ -1,4 +1,4 @@
-import { DefaultTheme as GardenTheme } from '@saladtechnologies/garden-components'
+import { DefaultTheme as GardenTheme, Switch } from '@saladtechnologies/garden-components'
 import classnames from 'classnames'
 import { uniq } from 'lodash'
 import moment from 'moment'
@@ -25,6 +25,12 @@ const styles = (theme: SaladTheme) => ({
   removeContainerPadding: {
     paddingTop: 0,
   },
+  chartHeader: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+  },
   segmentsContainer: {
     '&>label:first-child': {
       borderRadius: '2px 0px 0px 2px',
@@ -92,6 +98,9 @@ const styles = (theme: SaladTheme) => ({
   tickMobile: {
     display: 'block',
   },
+  earningPerMachineSwitchWrapper: {
+    marginLeft: 32,
+  },
   '@media screen and (min-width: 1025px)': {
     tickDesktop: {
       display: 'block',
@@ -286,6 +295,7 @@ interface State {
   selectedLeftToRight?: boolean
   selectedRangeIndexes: number[]
   showEarningsRange?: boolean
+  isEarningsPerMachineEnabled: boolean
 }
 
 class _EarningChart extends Component<Props, State> {
@@ -293,6 +303,7 @@ class _EarningChart extends Component<Props, State> {
     super(props)
     this.state = {
       selectedRangeIndexes: [],
+      isEarningsPerMachineEnabled: false,
     }
   }
 
@@ -323,6 +334,10 @@ class _EarningChart extends Component<Props, State> {
       return true
     }
 
+    if (this.state.isEarningsPerMachineEnabled !== nextState.isEarningsPerMachineEnabled) {
+      return true
+    }
+
     return false
   }
 
@@ -426,6 +441,12 @@ 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 { hoverIndex, showEarningsRange, earningsRangeSum, rangeCenterCoordinate, selectedRangeIndexes } = this.state
@@ -447,8 +468,18 @@ class _EarningChart extends Component<Props, State> {
         >
           <P>No data to display</P>
         </div>
-        <div className={classes.segmentsContainer}>
-          <Segments options={segmentOptions} />
+        <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 && (
           <>