From b427548973019893ad797a433153a3cb4f1b4428 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Fri, 25 Feb 2022 21:16:35 +0900
Subject: [PATCH] Merge pool pie and dominance into one widget

---
 .../hashrate-chart-pools.component.html       |  2 +-
 .../hashrate-chart-pools.component.scss       | 10 ++++++
 .../mining-dashboard.component.html           | 31 ++++++-------------
 .../mining-dashboard.component.scss           |  3 ++
 .../pool-ranking/pool-ranking.component.html  |  2 +-
 .../pool-ranking/pool-ranking.component.scss  | 10 ++++++
 .../pool-ranking/pool-ranking.component.ts    | 10 +-----
 7 files changed, 36 insertions(+), 32 deletions(-)

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 8750caa56..93cec63ca 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
@@ -27,7 +27,7 @@
 
   <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 
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 316f0fc47..06a3eeb25 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
@@ -48,3 +48,13 @@
     }
   }
 }
+
+.loadingGraphs {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 15px);
+  z-index: 100;
+}
+.loadingGraphs.widget {
+  top: 75%;
+}
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 65672ed08..4d811fc9a 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -1,25 +1,28 @@
 <div class="container-xl dashboard-container">
-  
+
   <div class="row row-cols-1 row-cols-md-2">
 
-    <!-- pools hashrate -->
     <div class="col">
-      <div class="card">
+      <div class="card double">
         <div class="card-body">
+          <!-- pool distribution -->
           <h5 class="card-title">
-            <a class="link" href="" [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="mining.pools-hashrate">
-              Mining Pools Dominance (1y)
+            <a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
+              Mining Pools Share (1w)
             </a>
           </h5>
+          <app-pool-ranking [widget]=true></app-pool-ranking>
+
+          <!-- pools hashrate -->
           <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
         </div>
       </div>
     </div>
 
-    <!-- hashrate -->
     <div class="col">
       <div class="card">
         <div class="card-body">
+          <!-- hashrate -->
           <h5 class="card-title">
             <a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
               Hashrate (1y)
@@ -28,21 +31,7 @@
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
         </div>
       </div>
-    </div>
-
-    <!-- pool distribution -->
-    <div class="col">
-      <div class="card">
-        <div class="card-body pool-ranking">
-          <h5 class="card-title">
-            <a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
-              Mining Pools Share (1w)
-            </a>
-          </h5>
-          <app-pool-ranking [widget]=true></app-pool-ranking>
-        </div>
-      </div>
-    </div>
+    </div>  
 
   </div>
 </div>
\ No newline at end of file
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 fca52ca79..4c75e9ea6 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -14,6 +14,9 @@
   background-color: #1d1f31;
   height: 340px;
 }
+.card.double {
+  height: 620px;
+}
 
 .card-title {
   font-size: 1rem;
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 5e6068866..067c61646 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -2,7 +2,7 @@
 
   <div [class]="widget ? 'chart-widget' : 'chart'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 
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 c06d0d763..a41891a8f 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -34,3 +34,13 @@
       padding: .3em !important;
    }
  }
+
+.loadingGraphs {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 15px);
+  z-index: 100;
+}
+.loadingGraphs.widget {
+  top: 25%;
+}
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 c46a85c65..cef04cca5 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -15,14 +15,6 @@ import { chartColors, poolsColor } from 'src/app/app.constants';
   selector: 'app-pool-ranking',
   templateUrl: './pool-ranking.component.html',
   styleUrls: ['./pool-ranking.component.scss'],
-  styles: [`
-    .loadingGraphs {
-      position: absolute;
-      top: 50%;
-      left: calc(50% - 15px);
-      z-index: 100;
-    }
-  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PoolRankingComponent implements OnInit {
@@ -164,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
 
     let radius: any[] = ['20%', '70%'];
     if (this.isMobile() || this.widget) {
-      radius = ['20%', '65%'];
+      radius = ['20%', '60%'];
     }
 
     this.chartOptions = {