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

2022-03-14 18:06:54 +01:00
parent 3fd42e9f26
commit 338c42e3d8
19 changed files with 399 additions and 123 deletions
--- 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>
+</ng-template>
--- 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;
--- 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',