Improve hashrate chart and mining dashboard design

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 {
-  height: 100%;
-  min-height: 400px;
+.chart {
+  max-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%'),
-          bottom: this.widget ? '0%' : (this.isMobile() ? '0%' : '5%'),
+          top: this.widget ? 0 : 35,
           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,
             },