From b1dcacaea1965d0502a5eccedc25bd197ed347bf Mon Sep 17 00:00:00 2001
From: Maks <41080668+Maks19@users.noreply.github.com>
Date: Fri, 21 Jun 2024 15:53:32 +0300
Subject: [PATCH] [WebApp] Create earning line chart (#1149)

---
 .../src/modules/balance/BalanceStore.tsx      |    8 +-
 .../modules/balance/models/EarningWindow.tsx  |    6 +
 .../earn-views/EarningLineChartContainer.tsx  | 1254 +++++++++++++++++
 .../earn-views/components/EarningChart.tsx    |   11 +-
 .../EarningLineChart/EarningLineChart.tsx     |   87 ++
 .../components/CustomizedXAxisTick.tsx        |   34 +
 .../EarningLineChart/components/index.tsx     |    1 +
 .../components/EarningLineChart/index.tsx     |    1 +
 .../modules/earn-views/components/index.tsx   |    3 +-
 .../modules/earn-views/pages/constants.tsx    |   26 +
 .../web-app/src/modules/earn-views/utils.tsx  |   29 +-
 11 files changed, 1448 insertions(+), 12 deletions(-)
 create mode 100644 packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx
 create mode 100644 packages/web-app/src/modules/earn-views/components/EarningLineChart/EarningLineChart.tsx
 create mode 100644 packages/web-app/src/modules/earn-views/components/EarningLineChart/components/CustomizedXAxisTick.tsx
 create mode 100644 packages/web-app/src/modules/earn-views/components/EarningLineChart/components/index.tsx
 create mode 100644 packages/web-app/src/modules/earn-views/components/EarningLineChart/index.tsx

diff --git a/packages/web-app/src/modules/balance/BalanceStore.tsx b/packages/web-app/src/modules/balance/BalanceStore.tsx
index d942e8652..2e10b5c35 100644
--- a/packages/web-app/src/modules/balance/BalanceStore.tsx
+++ b/packages/web-app/src/modules/balance/BalanceStore.tsx
@@ -2,7 +2,7 @@ import type { AxiosInstance } from 'axios'
 import { action, computed, flow, observable } from 'mobx'
 import moment from 'moment'
 import type { RootStore } from '../../Store'
-import type { EarningWindow } from './models'
+import type { ChartDaysShowing, EarningWindow } from './models'
 import { batchEarningsWindow, getEarningWindowsGroupedByDay } from './utils'
 
 enum EarningChartTimeFilter {
@@ -22,7 +22,7 @@ export class BalanceStore {
   private earningHistory: Map<number, number> = new Map()
 
   @observable
-  private daysShowingEarnings: 1 | 7 | 30 = 1
+  private daysShowingEarnings: ChartDaysShowing = 1
 
   @computed
   public get earningsHistory(): EarningWindow[] {
@@ -30,7 +30,7 @@ export class BalanceStore {
   }
 
   @computed
-  public get getDaysShowingEarnings(): 1 | 7 | 30 {
+  public get getDaysShowingEarnings(): ChartDaysShowing {
     return this.daysShowingEarnings
   }
 
@@ -73,7 +73,7 @@ export class BalanceStore {
   @observable
   public lastMonthEarnings: number = 0
 
-  private getEarningWindows = (numberOfDays: 1 | 7 | 30): EarningWindow[] => {
+  private getEarningWindows = (numberOfDays: ChartDaysShowing): EarningWindow[] => {
     const windows: EarningWindow[] = []
 
     const now = moment.utc()
diff --git a/packages/web-app/src/modules/balance/models/EarningWindow.tsx b/packages/web-app/src/modules/balance/models/EarningWindow.tsx
index 245cb90d8..e45b67db6 100644
--- a/packages/web-app/src/modules/balance/models/EarningWindow.tsx
+++ b/packages/web-app/src/modules/balance/models/EarningWindow.tsx
@@ -7,3 +7,9 @@ export interface EarningWindow {
   /** Total earnings during the window */
   earnings: number
 }
+
+export interface EarningPerMachine {
+  [key: string]: EarningWindow[]
+}
+
+export type ChartDaysShowing = 1 | 7 | 30
diff --git a/packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx b/packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx
new file mode 100644
index 000000000..d8e22c9c9
--- /dev/null
+++ b/packages/web-app/src/modules/earn-views/EarningLineChartContainer.tsx
@@ -0,0 +1,1254 @@
+import { connect } from '../../connect'
+import type { RootStore } from '../../Store'
+import { EarningLineChart } from './components'
+
+const mockedEarningsPerMachine = (daysShowing: number) => {
+  const shouldShowAmPm = daysShowing === 1
+  const shouldShowDateMonth = daysShowing === 7
+  const earningsPerMachine24hours = {
+    'cd6649d2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-06-18T10:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T10:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T10:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T10:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:15:00.000Z',
+        earnings: 0.04214125125,
+      },
+      {
+        timestamp: '2024-06-18T12:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:45:00.000Z',
+        earnings: 0.012131424125125,
+      },
+      {
+        timestamp: '2024-06-18T13:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:45:00.000Z',
+        earnings: 0.05215215215,
+      },
+      {
+        timestamp: '2024-06-18T14:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cdfkd234-1374-4133-a0fd-783e05egd24g': [
+      {
+        timestamp: '2024-06-18T10:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T10:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T10:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T10:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T11:30:00.000Z',
+        earnings: 0.05215215215,
+      },
+      {
+        timestamp: '2024-06-18T11:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T12:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T13:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T14:45:00.000Z',
+        earnings: 0.05215215215,
+      },
+      {
+        timestamp: '2024-06-18T15:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T15:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T16:45:00.000Z',
+        earnings: 0.05215215215,
+      },
+      {
+        timestamp: '2024-06-18T17:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T17:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T18:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T19:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T20:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T21:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T23:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T00:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T01:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T02:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T03:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T04:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T05:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T06:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T07:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T08:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:00:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:15:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:30:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-19T09:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+  }
+  const earningsPerMachine7days = {
+    'cd6649d2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0.29999238912,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.029999238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.00125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cdm649d2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0.5999238912,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.029999238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.10125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cd664xd2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0.29999238912,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.229999238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0.325325,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.00125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cd6649j2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0.29999238912,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.021499238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.00125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0.4324235,
+      },
+    ],
+    'gd6649d2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0.29999238912,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.029999238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.52125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cd1649d2-1374-4133-a0fd-783e057aa02': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0.29999238912,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.029999238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0.5325325,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0.21551,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.00125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cdfkd234-1374-4133-a0fd-783e05egd24g': [
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.212414,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+  }
+  const earningsPerMachine30days = {
+    'cd6649d2-1374-4133-a0fd-783e05e7aa02': [
+      {
+        timestamp: '2024-05-20T22:45:00.000Z',
+        earnings: 0.100675274272,
+      },
+      {
+        timestamp: '2024-05-21T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-22T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-23T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-24T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-25T22:45:00.000Z',
+        earnings: 0.4523523525352,
+      },
+      {
+        timestamp: '2024-05-26T22:45:00.000Z',
+        earnings: 0.0000878523786068759,
+      },
+      {
+        timestamp: '2024-05-27T22:45:00.000Z',
+        earnings: 0.0024540381142155914,
+      },
+      {
+        timestamp: '2024-05-28T22:45:00.000Z',
+        earnings: 0.000239697393818121,
+      },
+      {
+        timestamp: '2024-05-29T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-30T22:45:00.000Z',
+        earnings: 0.22224126002,
+      },
+      {
+        timestamp: '2024-05-31T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-01T22:45:00.000Z',
+        earnings: 0.003241766201949881,
+      },
+      {
+        timestamp: '2024-06-02T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-03T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-04T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-05T22:45:00.000Z',
+        earnings: 0.000216046054874071,
+      },
+      {
+        timestamp: '2024-06-06T22:45:00.000Z',
+        earnings: 0.0011643950392236195,
+      },
+      {
+        timestamp: '2024-06-07T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-08T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-09T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-10T22:45:00.000Z',
+        earnings: 0.00097026947760907,
+      },
+      {
+        timestamp: '2024-06-11T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.029999238912,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.00125658384,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+    'cdfkd234-1374-4133-a0fd-783e05egd24g': [
+      {
+        timestamp: '2024-05-20T22:45:00.000Z',
+        earnings: 0.000675274272,
+      },
+      {
+        timestamp: '2024-05-21T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-22T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-23T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-24T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-25T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-26T22:45:00.000Z',
+        earnings: 0.0000878523786068759,
+      },
+      {
+        timestamp: '2024-05-27T22:45:00.000Z',
+        earnings: 0.0024540381142155914,
+      },
+      {
+        timestamp: '2024-05-28T22:45:00.000Z',
+        earnings: 0.000239697393818121,
+      },
+      {
+        timestamp: '2024-05-29T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-30T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-05-31T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-01T22:45:00.000Z',
+        earnings: 0.003241766201949881,
+      },
+      {
+        timestamp: '2024-06-02T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-03T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-04T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-05T22:45:00.000Z',
+        earnings: 0.000216046054874071,
+      },
+      {
+        timestamp: '2024-06-06T22:45:00.000Z',
+        earnings: 0.0011643950392236195,
+      },
+      {
+        timestamp: '2024-06-07T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-08T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-09T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-10T22:45:00.000Z',
+        earnings: 0.00097026947760907,
+      },
+      {
+        timestamp: '2024-06-11T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-12T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-13T22:45:00.000Z',
+        earnings: 0.06235235253532,
+      },
+      {
+        timestamp: '2024-06-14T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-15T22:45:00.000Z',
+        earnings: 0.241415626634,
+      },
+      {
+        timestamp: '2024-06-16T22:45:00.000Z',
+        earnings: 0.00004124124,
+      },
+      {
+        timestamp: '2024-06-17T22:45:00.000Z',
+        earnings: 0,
+      },
+      {
+        timestamp: '2024-06-18T22:45:00.000Z',
+        earnings: 0,
+      },
+    ],
+  }
+  if (shouldShowAmPm) {
+    return earningsPerMachine24hours
+  } else if (shouldShowDateMonth) {
+    return earningsPerMachine7days
+  } else {
+    return earningsPerMachine30days
+  }
+}
+
+const mapStoreToProps = (store: RootStore): any => ({
+  earningsPerMachine: mockedEarningsPerMachine(store.balance.getDaysShowingEarnings),
+  daysShowing: store.balance.getDaysShowingEarnings,
+})
+
+export const EarningLineChartContainer = connect(mapStoreToProps, EarningLineChart)
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 66e3afe43..9cb3cf809 100644
--- a/packages/web-app/src/modules/earn-views/components/EarningChart.tsx
+++ b/packages/web-app/src/modules/earn-views/components/EarningChart.tsx
@@ -12,7 +12,8 @@ import type { SaladTheme } from '../../../SaladTheme'
 import { P } from '../../../components'
 import { Segments } from '../../../components/elements/Segments'
 import { formatBalance } from '../../../utils'
-import type { EarningWindow } from '../../balance/models'
+import type { ChartDaysShowing, EarningWindow } from '../../balance/models'
+import { MidnightHour, NoonHour } from '../pages/constants'
 
 const styles = (theme: SaladTheme) => ({
   container: {
@@ -180,7 +181,7 @@ interface EarningRange {
 }
 
 interface CustomTick extends WithStyles<typeof styles> {
-  daysShowing: 1 | 7 | 30
+  daysShowing: ChartDaysShowing
   fill: string
   payload: {
     coordinate: number
@@ -204,8 +205,8 @@ const _CustomizedXAxisTick = (props: CustomTick) => {
     return null
   }
 
-  const isMidnight = moment(payload.value).add(15, 'minute').hours() === 0
-  const isNoon = moment(payload.value).add(15, 'minute').hours() === 12
+  const isMidnight = moment(payload.value).add(15, 'minute').hours().toString() === MidnightHour
+  const isNoon = moment(payload.value).add(15, 'minute').hours().toString() === NoonHour
   const shouldShowAmPm = daysShowing === 1
   const shouldShowDateMonth = daysShowing === 7
 
@@ -282,7 +283,7 @@ interface Props extends WithStyles<typeof styles> {
   viewLast24Hours: () => void
   viewLast7Days: () => void
   viewLast30Days: () => void
-  daysShowing: 1 | 7 | 30
+  daysShowing: ChartDaysShowing
 }
 
 interface State {
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
new file mode 100644
index 000000000..60b3b608c
--- /dev/null
+++ b/packages/web-app/src/modules/earn-views/components/EarningLineChart/EarningLineChart.tsx
@@ -0,0 +1,87 @@
+import type CSS from 'csstype'
+import moment from 'moment'
+import type { WithStyles } from 'react-jss'
+import withStyles from 'react-jss'
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { DefaultTheme, type SaladTheme } from '../../../../SaladTheme'
+import { formatBalance } from '../../../../utils'
+import type { ChartDaysShowing, EarningPerMachine, EarningWindow } from '../../../balance/models'
+import { earningsChartColors } from '../../pages/constants'
+import { normalizeEarningsPerMachineData } from '../../utils'
+import { CustomizedXAxisTick } from './components'
+
+const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
+  tickFont: {
+    fontFamily: 'Mallory',
+    color: theme.lightGreen,
+    fontSize: '12px',
+  },
+  tooltipWrapper: {
+    color: theme.lightGreen,
+    fontSize: '14px',
+    padding: '2px 9px',
+    borderRadius: '24px',
+    border: `1px solid ${theme.green}`,
+  },
+})
+
+interface Props extends WithStyles<typeof styles> {
+  earningsPerMachine: EarningPerMachine
+  daysShowing: ChartDaysShowing
+}
+
+const _EarningLineChart = ({ classes, earningsPerMachine, daysShowing }: Props) => {
+  const is24HoursChart = daysShowing === 1
+
+  const machineEarningsData = Object.keys(earningsPerMachine).map((key) => ({
+    name: key.substring(0, 8),
+    data: normalizeEarningsPerMachineData(earningsPerMachine[key] as EarningWindow[], daysShowing),
+  }))
+
+  return (
+    <ResponsiveContainer width="100%" height={210}>
+      <LineChart>
+        <CartesianGrid vertical={false} stroke="#3B4D5C" />
+        <XAxis
+          allowDuplicatedCategory={false}
+          className={classes.tickFont}
+          dataKey="timestamp"
+          padding={{ left: 5, right: is24HoursChart ? 5 : 30 }}
+          stroke={DefaultTheme.lightGreen}
+          tickMargin={0}
+          tickSize={15}
+          // @ts-ignore
+          tick={<CustomizedXAxisTick is24HoursChart={is24HoursChart} />}
+        />
+        <YAxis
+          axisLine={false}
+          className={classes.tickFont}
+          dataKey="earnings"
+          minTickGap={2}
+          stroke={DefaultTheme.lightGreen}
+          tickFormatter={(earnings) => (earnings === 0 ? '' : `$${earnings}`)}
+          tickLine={false}
+        />
+        <Tooltip
+          contentStyle={{ backgroundColor: DefaultTheme.darkBlue }}
+          formatter={(value) => formatBalance(Number(value))}
+          labelFormatter={(value) => (is24HoursChart ? moment(value, 'HH').format('h A') : value)}
+          wrapperClassName={classes.tooltipWrapper}
+        />
+        {machineEarningsData.map((machineEarning, index) => (
+          <Line
+            data={machineEarning.data}
+            dataKey="earnings"
+            fill={earningsChartColors[index]}
+            key={machineEarning.name}
+            name={machineEarning.name}
+            stroke={earningsChartColors[index]}
+            type="monotone"
+          />
+        ))}
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export const EarningLineChart = withStyles(styles)(_EarningLineChart)
diff --git a/packages/web-app/src/modules/earn-views/components/EarningLineChart/components/CustomizedXAxisTick.tsx b/packages/web-app/src/modules/earn-views/components/EarningLineChart/components/CustomizedXAxisTick.tsx
new file mode 100644
index 000000000..97e670dad
--- /dev/null
+++ b/packages/web-app/src/modules/earn-views/components/EarningLineChart/components/CustomizedXAxisTick.tsx
@@ -0,0 +1,34 @@
+import moment from 'moment'
+import { MidnightHour, NoonHour } from '../../../pages/constants'
+
+interface CustomizedXAxisTickProps {
+  x: number
+  y: number
+  payload: {
+    value: string
+  }
+  fill: string
+  is24HoursChart: boolean
+}
+
+export const CustomizedXAxisTick = (props: CustomizedXAxisTickProps) => {
+  const { x, y, fill, payload, is24HoursChart } = props
+  if (!payload.value || payload.value === '0') {
+    return null
+  }
+
+  const shouldShowAmPm = payload.value === NoonHour || payload.value === MidnightHour
+  const timestamp = is24HoursChart ? moment(payload.value, 'HH').format(shouldShowAmPm ? 'h A' : 'h') : payload.value
+
+  const lines = timestamp.split(' ')
+
+  return (
+    <text x={x} y={y} fill={fill}>
+      {lines.map((line, index) => (
+        <tspan x={x} dy={index === 0 ? 0 : 15} dx={10} key={index}>
+          {line}
+        </tspan>
+      ))}
+    </text>
+  )
+}
diff --git a/packages/web-app/src/modules/earn-views/components/EarningLineChart/components/index.tsx b/packages/web-app/src/modules/earn-views/components/EarningLineChart/components/index.tsx
new file mode 100644
index 000000000..9377d87c9
--- /dev/null
+++ b/packages/web-app/src/modules/earn-views/components/EarningLineChart/components/index.tsx
@@ -0,0 +1 @@
+export * from './CustomizedXAxisTick'
diff --git a/packages/web-app/src/modules/earn-views/components/EarningLineChart/index.tsx b/packages/web-app/src/modules/earn-views/components/EarningLineChart/index.tsx
new file mode 100644
index 000000000..61c38e1fa
--- /dev/null
+++ b/packages/web-app/src/modules/earn-views/components/EarningLineChart/index.tsx
@@ -0,0 +1 @@
+export { EarningLineChart } from './EarningLineChart'
diff --git a/packages/web-app/src/modules/earn-views/components/index.tsx b/packages/web-app/src/modules/earn-views/components/index.tsx
index 5217e8630..cf0c4c39d 100644
--- a/packages/web-app/src/modules/earn-views/components/index.tsx
+++ b/packages/web-app/src/modules/earn-views/components/index.tsx
@@ -1,5 +1,6 @@
+export * from './EarnSectionHeader'
 export * from './EarningFrequentlyAskedQuestions'
 export * from './EarningHistory'
+export * from './EarningLineChart'
 export * from './EarningSummary'
-export * from './EarnSectionHeader'
 export * from './LatestRewardsRedeemed'
diff --git a/packages/web-app/src/modules/earn-views/pages/constants.tsx b/packages/web-app/src/modules/earn-views/pages/constants.tsx
index 276a9a79c..a43f827cd 100644
--- a/packages/web-app/src/modules/earn-views/pages/constants.tsx
+++ b/packages/web-app/src/modules/earn-views/pages/constants.tsx
@@ -27,3 +27,29 @@ export const earnTypes = [
     imageSrc: BandwidthImage,
   },
 ]
+
+export const earningsChartColors = [
+  '#FF33BD',
+  '#33FF57',
+  '#33FFD7',
+  '#FF5733',
+  '#33D7FF',
+  '#B3FF33',
+  '#FF3375',
+  '#FFBD33',
+  '#75FF33',
+  '#33FFBD',
+  '#FF9A33',
+  '#BD33FF',
+  '#33B3FF',
+  '#FF3333',
+  '#EFC050',
+  '#7533FF',
+  '#FFD733',
+  '#3375FF',
+  '#FF33B3',
+  '#FF3375',
+]
+
+export const MidnightHour = '00'
+export const NoonHour = '12'
diff --git a/packages/web-app/src/modules/earn-views/utils.tsx b/packages/web-app/src/modules/earn-views/utils.tsx
index 6e2f84726..659f1e157 100644
--- a/packages/web-app/src/modules/earn-views/utils.tsx
+++ b/packages/web-app/src/modules/earn-views/utils.tsx
@@ -1,6 +1,7 @@
 import moment from 'moment'
+import type { ChartDaysShowing, EarningWindow } from '../balance/models'
 
-export const getTooltipTimestamp = (daysShowing: 1 | 7 | 30, timestamp: Object): string => {
+export const getTooltipTimestamp = (daysShowing: ChartDaysShowing, timestamp: Object): string => {
   let displayTime: string
   switch (daysShowing) {
     case 1:
@@ -29,7 +30,7 @@ interface RangeTooltipTimestamp {
 }
 
 export const getRangeTooltipTimestamp = (
-  daysShowing: 1 | 7 | 30,
+  daysShowing: ChartDaysShowing,
   startTime: Object,
   endTime: Object,
 ): RangeTooltipTimestamp => {
@@ -70,3 +71,27 @@ export const getRangeTooltipTimestamp = (
 export const getNumberWithCommas = (number: string): string => {
   return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 }
+
+export const normalizeEarningsPerMachineData = (earningPerMachine: EarningWindow[], daysShowing: number) => {
+  const is24HoursChart = daysShowing === 1
+  const is7DaysChart = daysShowing === 7
+
+  return earningPerMachine.map((earningPerMachine) => {
+    if (is24HoursChart) {
+      return {
+        timestamp: moment(earningPerMachine.timestamp).add(15, 'minute').format('HH'),
+        earnings: earningPerMachine.earnings,
+      }
+    } else if (is7DaysChart) {
+      return {
+        timestamp: moment(earningPerMachine.timestamp).add(15, 'minute').format('D/M'),
+        earnings: earningPerMachine.earnings,
+      }
+    } else {
+      return {
+        timestamp: moment(earningPerMachine.timestamp).add(15, 'minute').format('D'),
+        earnings: earningPerMachine.earnings,
+      }
+    }
+  })
+}