From b465b7abba726d2f1095b19e5d92f85f0ad0267b Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 29 Mar 2022 18:20:00 +0900
Subject: [PATCH] Add data zoom on pool hashrate chart

---
 .../app/components/pool/pool.component.scss   |  7 +++++
 .../src/app/components/pool/pool.component.ts | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 2a06de54a..3bf3745c8 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -31,6 +31,13 @@
   }
 }
 
+.chart {
+  margin-bottom: 20px;
+  @media (max-width: 768px) {
+    margin-bottom: 10px;
+  }
+}
+
 div.scrollable {
   width: 100%;
   height: 100%;
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 023d3dcdb..8a887c85f 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -172,6 +172,34 @@ export class PoolComponent implements OnInit {
           },
         },
       ],
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 10,
+        moveOnMouseMove: false,
+      }, {
+        fillerColor: '#aaaaff15',
+        borderColor: '#ffffff88',
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        bottom: 0,
+        left: 20,
+        right: 15,
+        selectedDataBackground: {          
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          },          
+        },
+      }],
     };
   }