From 77a99a97ccd5e8a12a7e47161817887536fcda96 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 14 Mar 2022 18:06:54 +0100
Subject: [PATCH 1/2] Move all charts into /graphs page - Fix mining charts
 layouts

---
 frontend/src/app/app-routing.module.ts        | 138 +++++++++++++++---
 frontend/src/app/app.module.ts                |   2 +
 .../components/graphs/graphs.component.html   |  25 ++++
 .../components/graphs/graphs.component.scss   |   9 ++
 .../app/components/graphs/graphs.component.ts |  14 ++
 .../hashrate-chart.component.html             |   1 +
 .../hashrate-chart.component.scss             |  42 +++++-
 .../hashrate-chart.component.ts               |   8 +-
 .../hashrate-chart-pools.component.html       |   3 +-
 .../hashrate-chart-pools.component.scss       |  46 +++++-
 .../hashrate-chart-pools.component.ts         |  32 +++-
 .../master-page/master-page.component.html    |   2 +-
 .../mining-dashboard.component.html           |  23 +--
 .../mining-dashboard.component.scss           |   4 +
 .../mining-dashboard.component.ts             |   3 +-
 .../pool-ranking/pool-ranking.component.html  |  88 ++++++-----
 .../pool-ranking/pool-ranking.component.scss  |  53 +++++--
 .../pool-ranking/pool-ranking.component.ts    |  21 +--
 .../statistics/statistics.component.scss      |   8 +
 19 files changed, 399 insertions(+), 123 deletions(-)
 create mode 100644 frontend/src/app/components/graphs/graphs.component.html
 create mode 100644 frontend/src/app/components/graphs/graphs.component.scss
 create mode 100644 frontend/src/app/components/graphs/graphs.component.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 1ef7e5fe0..4541a0a25 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -31,6 +31,7 @@ import { MiningDashboardComponent } from './components/mining-dashboard/mining-d
 import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
 import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
+import { GraphsComponent } from './components/graphs/graphs.component';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
 
 let routes: Routes = [
@@ -80,18 +81,6 @@ let routes: Routes = [
             path: 'blocks',
             component: BlocksList,
           },
-          {
-            path: 'hashrate',
-            component: HashrateChartComponent,
-          },
-          {
-            path: 'hashrate/pools',
-            component: HashrateChartPoolsComponent,
-          },
-          {
-            path: 'pools',
-            component: PoolRankingComponent,
-          },
           {
             path: 'pool',
             children: [
@@ -105,7 +94,30 @@ let routes: Routes = [
       },
       {
         path: 'graphs',
-        component: StatisticsComponent,
+        component: GraphsComponent,
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            redirectTo: 'mempool',
+          },
+          {
+            path: 'mempool',
+            component: StatisticsComponent,
+          },
+          {
+            path: 'mining/hashrate-difficulty',
+            component: HashrateChartComponent,
+          },
+          {
+            path: 'mining/pools-dominance',
+            component: HashrateChartPoolsComponent,
+          },
+          {
+            path: 'mining/pools',
+            component: PoolRankingComponent,
+          },
+        ],
       },
       {
         path: 'about',
@@ -224,7 +236,30 @@ let routes: Routes = [
           },
           {
             path: 'graphs',
-            component: StatisticsComponent,
+            component: GraphsComponent,
+            children: [
+              {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'mempool',
+              },
+              {
+                path: 'mempool',
+                component: StatisticsComponent,
+              },
+              {
+                path: 'mining/hashrate-difficulty',
+                component: HashrateChartComponent,
+              },
+              {
+                path: 'mining/pools-dominance',
+                component: HashrateChartPoolsComponent,
+              },
+              {
+                path: 'mining/pools',
+                component: PoolRankingComponent,
+              },
+            ]
           },
           {
             path: 'address/:id',
@@ -337,7 +372,30 @@ let routes: Routes = [
           },
           {
             path: 'graphs',
-            component: StatisticsComponent,
+            component: GraphsComponent,
+            children: [
+              {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'mempool',
+              },
+              {
+                path: 'mempool',
+                component: StatisticsComponent,
+              },
+              {
+                path: 'mining/hashrate-difficulty',
+                component: HashrateChartComponent,
+              },
+              {
+                path: 'mining/pools-dominance',
+                component: HashrateChartPoolsComponent,
+              },
+              {
+                path: 'mining/pools',
+                component: PoolRankingComponent,
+              },
+            ]
           },
           {
             path: 'address/:id',
@@ -439,7 +497,30 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
       },
       {
         path: 'graphs',
-        component: StatisticsComponent,
+        component: GraphsComponent,
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            redirectTo: 'mempool',
+          },
+          {
+            path: 'mempool',
+            component: StatisticsComponent,
+          },
+          {
+            path: 'mining/hashrate-difficulty',
+            component: HashrateChartComponent,
+          },
+          {
+            path: 'mining/pools-dominance',
+            component: HashrateChartPoolsComponent,
+          },
+          {
+            path: 'mining/pools',
+            component: PoolRankingComponent,
+          },
+        ]
       },
       {
         path: 'address/:id',
@@ -548,7 +629,30 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
           },
           {
             path: 'graphs',
-            component: StatisticsComponent,
+            component: GraphsComponent,
+            children: [
+              {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'mempool',
+              },
+              {
+                path: 'mempool',
+                component: StatisticsComponent,
+              },
+              {
+                path: 'mining/hashrate-difficulty',
+                component: HashrateChartComponent,
+              },
+              {
+                path: 'mining/pools-dominance',
+                component: HashrateChartPoolsComponent,
+              },
+              {
+                path: 'mining/pools',
+                component: PoolRankingComponent,
+              },
+            ]
           },
           {
             path: 'address/:id',
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 3affdc7ba..99917815c 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -75,6 +75,7 @@ import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
 import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
+import { GraphsComponent } from './components/graphs/graphs.component';
 import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
 
@@ -133,6 +134,7 @@ import { BlocksList } from './components/blocks-list/blocks-list.component';
     HashrateChartPoolsComponent,
     MiningStartComponent,
     AmountShortenerPipe,
+    GraphsComponent,
     DifficultyAdjustmentsTable,
     BlocksList,
   ],
diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html
new file mode 100644
index 000000000..3a5b3ec73
--- /dev/null
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -0,0 +1,25 @@
+<ul ngbNav #nav="ngbNav" class="nav-pills mb-3" style="padding: 0px 35px">
+  <div class="d-inline-flex flex-wrap menu">
+    <li ngbNavItem class="menu-li">
+      <a [routerLink]="['/graphs/mempool' | relativeUrl]" ngbNavLink>Mempool</a>
+    </li>
+    <li ngbNavItem class="menu-li">
+      <a [routerLink]="['/graphs/mining/pools' | relativeUrl]" ngbNavLink i18n="mining.pools">
+        Pools ranking
+      </a>
+    </li>
+    <li ngbNavItem class="menu-li">
+      <a [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" ngbNavLink i18n="mining.pools-dominance">
+        Pools dominance
+      </a>
+    </li>
+    <li ngbNavItem class="menu-li">
+      <a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" ngbNavLink
+        i18n="mining.hashrate-difficulty">
+        Hashrate & Difficulty
+      </a>
+    </li>
+  </div>
+</ul>
+
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/frontend/src/app/components/graphs/graphs.component.scss b/frontend/src/app/components/graphs/graphs.component.scss
new file mode 100644
index 000000000..c4ca483bd
--- /dev/null
+++ b/frontend/src/app/components/graphs/graphs.component.scss
@@ -0,0 +1,9 @@
+.menu {
+  flex-grow: 1;
+  max-width: 600px;
+}
+
+.menu-li {
+  flex-grow: 1;
+  text-align: center;
+}
diff --git a/frontend/src/app/components/graphs/graphs.component.ts b/frontend/src/app/components/graphs/graphs.component.ts
new file mode 100644
index 000000000..61fa65196
--- /dev/null
+++ b/frontend/src/app/components/graphs/graphs.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: 'app-graphs',
+  templateUrl: './graphs.component.html',
+  styleUrls: ['./graphs.component.scss'],
+})
+export class GraphsComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+}
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index 2ca0e8376..e4bbfa298 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/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">
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 0254d3175..fc455ccd7 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index 382071e37..0260db374 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
index 69da008d2..32f6a7b25 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/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">
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
index 4f15e51d6..095d33583 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
index 3257465a1..b563e4ca0 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/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,
+          }
+        },
+      }],
     };
   }
 
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 28db64bbd..98e490f37 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -38,7 +38,7 @@
         <a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
-        <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/graphs/mempool' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
       <li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
         <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index 63a93a3e4..b9772aa66 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -76,7 +76,7 @@
       <div class="card" style="height: 385px">
         <div class="card-body">
           <app-pool-ranking [widget]=true></app-pool-ranking>
-          <div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
+          <div class="mt-1"><a [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
         </div>
       </div>
@@ -90,26 +90,12 @@
             Hashrate (1y)
           </h5>
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
-          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
+          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
         </div>
       </div>
     </div>
 
-    <!-- pool dominance -->
-    <!-- <div class="col">
-      <div class="card" style="height: 385px">
-        <div class="card-body">
-          <h5 class="card-title">
-            Mining Pools Dominance (1y)
-          </h5>
-          <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
-          <div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
-              more &raquo;</a></div>
-        </div>
-      </div>
-    </div> -->
-
     <!-- Latest blocks -->
     <div class="col">
       <div class="card" style="height: 385px">
@@ -124,6 +110,7 @@
       </div>
     </div>
 
+    <!-- Difficult adjustments -->
     <div class="col">
       <div class="card" style="height: 385px">
         <div class="card-body">
@@ -131,11 +118,11 @@
             Adjustments
           </h5>
           <app-difficulty-adjustments-table></app-difficulty-adjustments-table>
-          <div><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
+          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
         </div>
       </div>
     </div>
 
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index a345be972..6d87f0a57 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -125,3 +125,7 @@
     max-width: 55px;
   }
 }
+
+.card-text {
+  font-size: 22px;
+}
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index c05c951b3..669316ca9 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
+import { formatNumber } from '@angular/common';
 import { Observable } from 'rxjs';
 
 @Component({
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 9a1dc01b2..15eed9f22 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,4 +1,4 @@
-<div [class]="widget === false ? 'container-xl' : ''">
+<div [class]="widget === false ? 'full-container' : ''">
 
   <div *ngIf="widget">
     <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
@@ -23,14 +23,10 @@
     </div>
   </div>
 
-  <div [class]="widget ? 'chart-widget' : 'chart'"
-    echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
-    <div class="spinner-border text-light"></div>
-  </div>
-
-  <div class="card-header mb-0 mb-lg-4 mt-md-3" [style]="widget ? 'display:none' : ''">
-    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(miningStatsObservable$ | async) as miningStats">
+  <div class="card-header" *ngIf="!widget">
+    <span i18n="mining.mining-pool-share">Mining pools share</span>
+    <form [formGroup]="radioGroupForm" class="formRadioGroup"
+      *ngIf="!widget && (miningStatsObservable$ | async) as miningStats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1">
           <input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
@@ -66,36 +62,48 @@
     </form>
   </div>
 
-  <table *ngIf="widget === false" class="table table-borderless text-center pools-table">
-    <thead>
-      <tr>
-        <th class="d-none d-md-block" i18n="mining.rank">Rank</th>
-        <th class=""></th>
-        <th class="" i18n="mining.pool-name">Pool</th>
-        <th class="" *ngIf="this.poolsWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
-        <th class="" i18n="master-page.blocks">Blocks</th>
-        <th class="d-none d-md-block" i18n="mining.empty-blocks">Empty Blocks</th>
-      </tr>
-    </thead>
-    <tbody *ngIf="(miningStatsObservable$ | async) as miningStats">
-      <tr *ngFor="let pool of miningStats.pools">
-        <td class="d-none d-md-block">{{ pool.rank }}</td>
-        <td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
-        <td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td>
-        <td class="" *ngIf="this.poolsWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
-        <td class="">{{ pool['blockText'] }}</td>
-        <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
-      </tr>
-      <tr style="border-top: 1px solid #555">
-        <td class="d-none d-md-block"></td>
-        <td class="text-right"></td>
-        <td class="" i18n="mining.all-miners"><b>All miners</b></td>
-        <td class="" *ngIf="this.poolsWindowPreference === '24h'"><b>{{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }}</b></td>
-        <td class=""><b>{{ miningStats.blockCount }}</b></td>
-        <td class="d-none d-md-block"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</b></td>
-      </tr>
-    </tbody>
-  </table>
+  <div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
+    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+      (chartInit)="onChartInit($event)"></div>
+    <div class="text-center loadingGraphs" *ngIf="isLoading">
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <table *ngIf="widget === false" class="table table-borderless text-center pools-table">
+      <thead>
+        <tr>
+          <th class="d-none d-md-block" i18n="mining.rank">Rank</th>
+          <th class=""></th>
+          <th class="" i18n="mining.pool-name">Pool</th>
+          <th class="" *ngIf="this.poolsWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
+          <th class="" i18n="master-page.blocks">Blocks</th>
+          <th class="d-none d-md-block" i18n="mining.empty-blocks">Empty Blocks</th>
+        </tr>
+      </thead>
+      <tbody *ngIf="(miningStatsObservable$ | async) as miningStats">
+        <tr *ngFor="let pool of miningStats.pools">
+          <td class="d-none d-md-block">{{ pool.rank }}</td>
+          <td class="text-right"><img width="25" height="25" src="{{ pool.logo }}"
+              onError="this.src = './resources/mining-pools/default.svg'"></td>
+          <td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td>
+          <td class="" *ngIf="this.poolsWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{
+            miningStats.miningUnits.hashrateUnit }}</td>
+          <td class="">{{ pool['blockText'] }}</td>
+          <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
+        </tr>
+        <tr style="border-top: 1px solid #555">
+          <td class="d-none d-md-block"></td>
+          <td class="text-right"></td>
+          <td class="" i18n="mining.all-miners"><b>All miners</b></td>
+          <td class="" *ngIf="this.poolsWindowPreference === '24h'"><b>{{ miningStats.lastEstimatedHashrate}} {{
+              miningStats.miningUnits.hashrateUnit }}</b></td>
+          <td class=""><b>{{ miningStats.blockCount }}</b></td>
+          <td class="d-none d-md-block"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio
+              }}%)</b></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 
 </div>
 
@@ -121,4 +129,4 @@
       </p>
     </div>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index d25148df1..5dddabe80 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -1,7 +1,27 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100% - 140px);
+  @media (max-width: 992px) {
+    height: calc(100% - 190px);
+  };
+  @media (max-width: 575px) {
+    height: calc(100% - 230px);
+  };
+}
+
 .chart {
   max-height: 400px;
   @media (max-width: 767.98px) {
-    max-height: 270px;
+    max-height: 230px;
   }
 }
 .chart-widget {
@@ -17,10 +37,17 @@
   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) {
-    margin-left: 2%;
     flex-direction: row;
-    float: left;
+    float: right;
     margin-top: 0px;
   }
   .btn-sm {
@@ -31,12 +58,21 @@
   }
 }
 
-@media (max-width: 767.98px) { 
+.bottom-padding {
+  @media (max-width: 992px) {
+    padding-bottom: 65px
+  };
+  @media (max-width: 576px) {
+    padding-bottom: 65px
+  };
+}
+
+@media (max-width: 767.98px) {
   .pools-table th,
   .pools-table td {
-      padding: .3em !important;
-   }
- }
+    padding: .3em !important;
+  }
+}
 
 .loadingGraphs {
   position: absolute;
@@ -44,9 +80,6 @@
   left: calc(50% - 15px);
   z-index: 100;
 }
-.loadingGraphs.widget {
-  top: 25%;
-}
 
 .pool-distribution {
   min-height: 56px;
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
index 58c383266..0722466fc 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -117,7 +117,7 @@ export class PoolRankingComponent implements OnInit {
     if (this.isMobile() && this.widget) {
       edgeDistance = 0;
     } else if (this.isMobile() && !this.widget || this.widget) {
-      edgeDistance = 35;
+      edgeDistance = 10;
     }
 
     miningStats.pools.forEach((pool) => {
@@ -209,13 +209,13 @@ export class PoolRankingComponent implements OnInit {
     network = network.charAt(0).toUpperCase() + network.slice(1);
 
     let radius: any[] = ['20%', '80%'];
-    let top: any = undefined; let bottom = undefined; let height = undefined;
+    let top: number = 0; let height = undefined;
     if (this.isMobile() && this.widget) {
       top = -30;
       height = 270;
       radius = ['10%', '50%'];
     } else if (this.isMobile() && !this.widget) {
-      top = 0;
+      top = -40;
       height = 300;
       radius = ['10%', '50%'];
     } else if (this.widget) {
@@ -223,22 +223,12 @@ export class PoolRankingComponent implements OnInit {
       top = -20;
       height = 330;
     } else {
-      top = 35;
+      top = 0;
     }
 
     this.chartOptions = {
+      animation: false,
       color: chartColors,
-      title: {
-        text: this.widget ? '' : $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`,
-        left: 'center',
-        textStyle: {
-          color: '#FFF',
-        },
-        subtextStyle: {
-          color: '#CCC',
-          fontStyle: 'italic',
-        }
-      },
       tooltip: {
         trigger: 'item',
         textStyle: {
@@ -249,7 +239,6 @@ export class PoolRankingComponent implements OnInit {
         {
           minShowLabelAngle: 3.6,
           top: top,
-          bottom: bottom,
           height: height,
           name: 'Mining pool',
           type: 'pie',
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 17d97026a..cffe035b3 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -40,6 +40,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;

From 8e61720e09faf5e0ecde1768583b1be9bb32292e Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 14 Mar 2022 18:25:16 +0100
Subject: [PATCH 2/2] Add active router links - Disable graph touch scroll

---
 frontend/src/app/components/graphs/graphs.component.html  | 8 ++++----
 .../components/hashrate-chart/hashrate-chart.component.ts | 5 +++--
 .../hashrate-chart-pools.component.ts                     | 1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html
index 3a5b3ec73..9788437a9 100644
--- a/frontend/src/app/components/graphs/graphs.component.html
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -1,20 +1,20 @@
 <ul ngbNav #nav="ngbNav" class="nav-pills mb-3" style="padding: 0px 35px">
   <div class="d-inline-flex flex-wrap menu">
     <li ngbNavItem class="menu-li">
-      <a [routerLink]="['/graphs/mempool' | relativeUrl]" ngbNavLink>Mempool</a>
+      <a routerLinkActive="active" [routerLink]="['/graphs/mempool' | relativeUrl]" ngbNavLink>Mempool</a>
     </li>
     <li ngbNavItem class="menu-li">
-      <a [routerLink]="['/graphs/mining/pools' | relativeUrl]" ngbNavLink i18n="mining.pools">
+      <a routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]" ngbNavLink i18n="mining.pools">
         Pools ranking
       </a>
     </li>
     <li ngbNavItem class="menu-li">
-      <a [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" ngbNavLink i18n="mining.pools-dominance">
+      <a routerLinkActive="active" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" ngbNavLink i18n="mining.pools-dominance">
         Pools dominance
       </a>
     </li>
     <li ngbNavItem class="menu-li">
-      <a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" ngbNavLink
+      <a routerLinkActive="active" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" ngbNavLink
         i18n="mining.hashrate-difficulty">
         Hashrate & Difficulty
       </a>
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index 0260db374..2c0ac0413 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -170,7 +170,7 @@ export class HashrateChartComponent implements OnInit {
       grid: {
         right: this.right,
         left: this.left,
-        bottom: this.widget ? 30 : 60,
+        bottom: this.widget ? 30 : this.isMobile() ? 90 : 60,
       },
       tooltip: {
         show: !this.isMobile() || !this.widget,
@@ -303,13 +303,14 @@ export class HashrateChartComponent implements OnInit {
         zoomLock: true,
         maxSpan: 100,
         minSpan: 10,
+        moveOnMouseMove: false,
       }, {
         showDetail: false,
         show: true,
         type: 'slider',
         brushSelect: false,
         realtime: true,
-        bottom: 0,
+        bottom: this.isMobile() ? 30 : 0,
         left: 20,
         right: 15,
         selectedDataBackground: {
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
index b563e4ca0..280852d47 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -213,6 +213,7 @@ export class HashrateChartPoolsComponent implements OnInit {
         zoomLock: true,
         maxSpan: 100,
         minSpan: 10,
+        moveOnMouseMove: false,
       }, {
         showDetail: false,
         show: true,