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

frontend/src/app/components/hashrate-chart/hashrate-chart.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' : ''">
+    <span i18n="mining.mining-pool-share">Hashrate & Difficulty</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/hashrate-chart/hashrate-chart.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,13 +18,14 @@
 }
 
 .full-container {
+  padding: 0px 15px;
   width: 100%;
-  height: calc(100% - 100px);
+  height: calc(100% - 170px);
   @media (max-width: 992px) {
-    height: calc(100% - 140px);
+    height: calc(100% - 220px);
   };
-  @media (max-width: 576px) {
-    height: calc(100% - 180px);
+  @media (max-width: 575px) {
+    height: calc(100% - 260px);
   };
 }
 
@@ -24,7 +33,22 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
-  padding-right: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
 }
 .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/hashrate-chart/hashrate-chart.component.ts

@@ -61,6 +61,7 @@ export class HashrateChartComponent implements OnInit {
       .pipe(
         startWith('1y'),
         switchMap((timespan) => {
+          this.isLoading = true;
           return this.apiService.getHistoricalHashrate$(timespan)
             .pipe(
               tap((data: any) => {
@@ -155,6 +156,7 @@ export class HashrateChartComponent implements OnInit {
 
     this.chartOptions = {
       title: title,
+      animation: false,
       color: [
         new graphic.LinearGradient(0, 0, 0, 0.65, [
           { offset: 0, color: '#F4511E' },
@@ -241,7 +243,6 @@ export class HashrateChartComponent implements OnInit {
             return value.min * 0.9;
           },
           type: 'value',
-          name: 'Hashrate',
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val) => {
@@ -259,7 +260,6 @@ export class HashrateChartComponent implements OnInit {
             return value.min * 0.9;
           },
           type: 'value',
-          name: 'Difficulty',
           position: 'right',
           axisLabel: {
             color: 'rgb(110, 112, 121)',
@@ -301,8 +301,6 @@ export class HashrateChartComponent implements OnInit {
         type: 'inside',
         realtime: true,
         zoomLock: true,
-        zoomOnMouseWheel: true,
-        moveOnMouseMove: true,
         maxSpan: 100,
         minSpan: 10,
       }, {
@@ -312,6 +310,8 @@ export class HashrateChartComponent implements OnInit {
         brushSelect: false,
         realtime: true,
         bottom: 0,
+        left: 20,
+        right: 15,
         selectedDataBackground: {
           lineStyle: {
             color: '#fff',