Move all charts into /graphs page - Fix mining charts layouts

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -1,6 +1,7 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
-  <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
+  <div class="card-header" [style]="widget ? 'display:none' : ''">
+    <span *ngIf="!widget" i18n="mining.pools-dominance">Mining pools dominance</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss

@@ -1,3 +1,11 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
 .main-title {
   position: relative;
   color: #ffffff91;
@@ -10,21 +18,37 @@
 }
 
 .full-container {
+  padding: 0px 15px;
   width: 100%;
-  height: calc(100% - 100px);
-  @media (max-width: 992px) {
-    height: calc(100% - 140px);
+  height: calc(100% - 140px);
+  @media (max-width: 991px) {
+    height: calc(100% - 190px);
   };
-  @media (max-width: 576px) {
-    height: calc(100% - 180px);
+  @media (max-width: 575px) {
+    height: calc(100% - 235px);
   };
 }
 
 .chart {
   width: 100%;
   height: 100%;
-  padding-bottom: 20px;
-  padding-right: 20px;
+  padding-bottom: 25px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 85px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 85px;
+  }
 }
 .chart-widget {
   width: 100%;
@@ -36,6 +60,14 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
+  @media (min-width: 1130px) {
+    position: relative;
+    top: -65px;
+  }
+  @media (min-width: 830px) and (max-width: 1130px) {
+    position: relative;
+    top: 0px;
+  }
   @media (min-width: 830px) {
     flex-direction: row;
     float: right;

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -23,7 +23,7 @@ import { poolsColor } from 'src/app/app.constants';
 })
 export class HashrateChartPoolsComponent implements OnInit {
   @Input() widget = false;
-  @Input() right: number | string = 40;
+  @Input() right: number | string = 45;
   @Input() left: number | string = 25;
 
   radioGroupForm: FormGroup;
@@ -153,11 +153,12 @@ export class HashrateChartPoolsComponent implements OnInit {
 
     this.chartOptions = {
       title: title,
+      animation: false,
       grid: {
         right: this.right,
         left: this.left,
-        bottom: this.widget ? 30 : 20,
-        top: this.widget ? 10 : 40,
+        bottom: this.widget ? 30 : 60,
+        top: this.widget || this.isMobile() ? 10 : 50,
       },
       tooltip: {
         show: !this.isMobile() || !this.widget,
@@ -206,6 +207,31 @@ export class HashrateChartPoolsComponent implements OnInit {
         min: 0,
       },
       series: data.series,
+      dataZoom: this.widget ? null : [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        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,
+          }
+        },
+      }],
     };
   }