From 5f2350b76308c76531b7ba5cab4b9636d440e113 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 13 Jan 2022 12:00:49 +0900
Subject: [PATCH] Disable graph touch interaction in dashboard on mobile so we
 can scroll properly

---
 .../incoming-transactions-graph.component.ts              | 7 ++++++-
 .../components/mempool-graph/mempool-graph.component.ts   | 8 ++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 3ae3bde51..157ec0a2f 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -67,7 +67,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         left: this.left,
       },
       animation: false,
-      dataZoom: [{
+      dataZoom: (this.template === 'widget' && this.isMobile()) ? null : [{
         type: 'inside',
         realtime: true,
         zoomLock: (this.template === 'widget') ? true : false,
@@ -93,6 +93,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         },
       }],
       tooltip: {
+        show: !this.isMobile(),
         trigger: 'axis',
         position: (pos, params, el, elRect, size) => {
           const obj = { top: -20 };
@@ -219,4 +220,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
       },
     };
   }
+
+  isMobile() {
+    return window.innerWidth <= 767.98;
+  }
 }
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 11618e35d..f290d91ca 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -170,7 +170,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       hover: true,
       color: this.inverted ? [...newColors].reverse() : newColors,
       tooltip: {
-        show: (window.innerWidth >= 768) ? true : false,
+        show: !this.isMobile(),
         trigger: 'axis',
         alwaysShowContent: false,
         position: (pos, params, el, elRect, size) => {
@@ -282,7 +282,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           </div>`;
         }
       },
-      dataZoom: [{
+      dataZoom: (this.template === 'widget' && this.isMobile()) ? null : [{
         type: 'inside',
         realtime: true,
         zoomLock: (this.template === 'widget') ? true : false,
@@ -382,5 +382,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     }
     this.chartColorsOrdered =  chartColors.slice(0, this.feeLevelsOrdered.length);
   }
+
+  isMobile() {
+    return window.innerWidth <= 767.98;
+  }
 }