Improve hashrate chart and mining dashboard design

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

@@ -25,13 +25,14 @@
     </form>
   </div>
 
-  <div *ngIf="hashrateObservable$ | async" [class]="widget === false ? 'chart' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
+    echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
   
-  <div class="container-xl mt-3">
+  <div class="mt-3" *ngIf="!widget">
-    <table class="table table-borderless table-sm text-center" *ngIf="!widget">
+    <table class="table table-borderless table-sm text-center">
       <thead>
         <tr>
           <th i18n="mining.rank">Block</th>

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

@@ -26,6 +26,11 @@
   padding-bottom: 20px;
   padding-right: 20px;
 }
+.chart-widget {
+  width: 100%;
+  height: 100%;
+  max-height: 275px;
+}
 
 .formRadioGroup {
   margin-top: 6px;

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

@@ -133,6 +133,7 @@ export class HashrateChartComponent implements OnInit {
       grid: {
         right: this.right,
         left: this.left,
+        bottom: 30,
       },
       tooltip: {
         trigger: 'axis',
@@ -146,6 +147,25 @@ export class HashrateChartComponent implements OnInit {
           color: '#b1b1b1',
         },
         borderColor: '#000',
+        formatter: function (data) {
+          let hashratePowerOfTen: any = selectPowerOfTen(1);
+          let hashrate = data[0].data[1];
+          let difficultyPowerOfTen = hashratePowerOfTen;
+          let difficulty = data[1].data[1];
+
+          if (this.isMobile()) {
+            hashratePowerOfTen = selectPowerOfTen(data[0].data[1]);
+            hashrate = Math.round(data[0].data[1] / hashratePowerOfTen.divider);
+            difficultyPowerOfTen = selectPowerOfTen(data[1].data[1]);
+            difficulty = Math.round(data[1].data[1] / difficultyPowerOfTen.divider);
+          }
+
+          return `
+            <b style="color: white; margin-left: 18px">${data[0].axisValueLabel}</b><br>
+            <span>${data[0].marker} ${data[0].seriesName}: ${formatNumber(hashrate, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s</span><br>
+            <span>${data[1].marker} ${data[1].seriesName}: ${formatNumber(difficulty, this.locale, '1.0-0')} ${difficultyPowerOfTen.unit}</span>
+          `;
+        }.bind(this)
       },
       xAxis: {
         type: 'time',
@@ -179,13 +199,16 @@ export class HashrateChartComponent implements OnInit {
       },
       yAxis: [
         {
+          min: function (value) {
+            return value.min * 0.9;
+          },
           type: 'value',
           name: 'Hashrate',
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val) => {
               const selectedPowerOfTen: any = selectPowerOfTen(val);
-              const newVal = val / selectedPowerOfTen.divider;
+              const newVal = Math.round(val / selectedPowerOfTen.divider);
               return `${newVal} ${selectedPowerOfTen.unit}H/s`
             }
           },
@@ -194,6 +217,9 @@ export class HashrateChartComponent implements OnInit {
           }
         },
         {
+          min: function (value) {
+            return value.min * 0.9;
+          },
           type: 'value',
           name: 'Difficulty',
           position: 'right',
@@ -201,7 +227,7 @@ export class HashrateChartComponent implements OnInit {
             color: 'rgb(110, 112, 121)',
             formatter: (val) => {
               const selectedPowerOfTen: any = selectPowerOfTen(val);
-              const newVal = val / selectedPowerOfTen.divider;
+              const newVal = Math.round(val / selectedPowerOfTen.divider);
               return `${newVal} ${selectedPowerOfTen.unit}`
             }
           },

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -5,11 +5,13 @@
     <!-- pool distribution -->
     <div class="col">
       <div class="card">
-        <div class="card-body">
+        <div class="card-body pool-ranking">
-          <h5 class="card-title" i18n="mining.pool-share">Mining Pools Share (1w)</h5>
+          <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 class="text-center"><a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
-              &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -18,10 +20,12 @@
     <div class="col">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title" i18n="mining.hashrate">Hashrate (1y)</h5>
+          <h5 class="card-title">
+            <a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
+              Hashrate (1y)
+            </a>
+          </h5>
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
-          <div class="text-center"><a href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
-              &raquo;</a></div>
         </div>
       </div>
     </div>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -16,22 +16,17 @@
 }
 
 .card-title {
-  color: #4a68b9;
   font-size: 1rem;
 }
+.card-title > a {
+  color: #4a68b9;
+}
 
-.card-wrapper {
-  .card {
-    height: auto !important;
-  }
 .card-body {
-    display: flex;
+  padding: 1.25rem 1rem 0.75rem 1rem;
-    flex: inherit;
-    text-align: center;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: 22px 20px;
 }
+.card-body.pool-ranking {
+  padding: 1.25rem 0.25rem 0.75rem 0.25rem;
 }
 
 #blockchain-container {

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -1,11 +1,12 @@
 <div [class]="widget === false ? 'container-xl' : ''">
 
-  <div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></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" [style]="widget === true ? 'display:none' : ''">
+  <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="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1">

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -1,10 +1,14 @@
-.hashrate-pie {
+.chart {
-  height: 100%;
+  max-height: 400px;
-  min-height: 400px;
   @media (max-width: 767.98px) {
-    min-height: 300px;
+    max-height: 300px;
   }
 }
+.chart-widget {
+  width: 100%;
+  height: 100%;
+  max-height: 275px;
+}
 
 .formRadioGroup {
   margin-top: 6px;

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

@@ -33,7 +33,9 @@ export class PoolRankingComponent implements OnInit {
   isLoading = true;
   chartOptions: EChartsOption = {};
   chartInitOptions = {
-    renderer: 'svg'
+    renderer: 'svg',
+    width: 'auto',
+    height: 'auto',
   };
   chartInstance: any = undefined;
 
@@ -156,6 +158,11 @@ export class PoolRankingComponent implements OnInit {
     }
     network = network.charAt(0).toUpperCase() + network.slice(1);
 
+    let radius: any[] = ['20%', '70%'];
+    if (this.isMobile() || this.widget) {
+      radius = ['20%', '65%'];
+    }
+
     this.chartOptions = {
       title: {
         text: this.widget ? '' : $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`,
@@ -173,13 +180,14 @@ export class PoolRankingComponent implements OnInit {
       },
       series: [
         {
-          top: this.widget ? '0%' : (this.isMobile() ? '5%' : '10%'),
+          top: this.widget ? 0 : 35,
-          bottom: this.widget ? '0%' : (this.isMobile() ? '0%' : '5%'),
           name: 'Mining pool',
           type: 'pie',
-          radius: this.widget ? ['20%', '60%'] : (this.isMobile() ? ['10%', '50%'] : ['20%', '70%']),
+          radius: radius,
           data: this.generatePoolsChartSerieData(miningStats),
           labelLine: {
+            length: this.isMobile() ? 10 : 15,
+            length2: this.isMobile() ? 0 : 15,
             lineStyle: {
               width: 2,
             },