Merge pull request #1472 from mempool/nymkappa/feature/pool-chart-timespan

Add data zoom on pool hashrate chart

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%;

frontend/src/app/components/pool/pool.component.ts

@@ -174,6 +174,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,
+          },          
+        },
+      }],
     };
   }