Cleanup hashrate/difficulty widget

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

@@ -1,5 +1,23 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
+  <div *ngIf="widget">
+    <div class="pool-distribution" *ngIf="(hashrateObservable$ | async) as hashrates; else loadingStats">
+      <div class="item">
+        <h5 class="card-title" i18n="mining.hashrate">Hashrate</h5>
+        <p class="card-text">
+          {{ hashrates.currentHashrate | amountShortener }}
+          <span class="symbol">hashes/tx</span>
+        </p>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
+        <p class="card-text">
+          {{ hashrates.currentDifficulty | amountShortener }}
+        </p>
+      </div>
+    </div>
+  </div>
+
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
@@ -32,3 +50,20 @@
   </div>
   
 </div>
+
+<ng-template #loadingStats>
+  <div class="pool-distribution">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+  </div>
+</ng-template>

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

@@ -29,7 +29,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 293px;
+  max-height: 270px;
 }
 
 .formRadioGroup {
@@ -48,3 +48,66 @@
     }
   }
 }
+
+.pool-distribution {
+  min-height: 56px;
+  display: block;
+  @media (min-width: 485px) {
+    display: flex;
+    flex-direction: row;
+  }
+  h5 {
+    margin-bottom: 10px;
+  }
+  .item {
+    width: 50%;
+    margin: 0px auto 10px;
+    display: inline-block;
+    @media (min-width: 485px) {
+      margin: 0px auto 10px;
+    }
+    @media (min-width: 785px) {
+      margin: 0px auto 0px;
+    }
+    &:last-child {
+      margin: 0px auto 0px;
+    }
+    &:nth-child(2) {
+      order: 2;
+      @media (min-width: 485px) {
+        order: 3;
+      }
+    }
+    &:nth-child(3) {
+      order: 3;
+      @media (min-width: 485px) {
+        order: 2;
+        display: block;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: block;
+      }
+    }
+    .card-title {
+      font-size: 1rem;
+      color: #4a68b9;
+    }
+    .card-text {
+      font-size: 18px;
+      span {
+        color: #ffffff66;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  max-width: 80px;
+  margin: 15px auto 3px;
+}

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

@@ -109,21 +109,10 @@ export class HashrateChartComponent implements OnInit {
                   (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
                 ) / 3600 / 24;
 
-                const tableData = [];
-                for (let i = data.difficulty.length - 1; i > 0; --i) {
-                  const selectedPowerOfTen: any = selectPowerOfTen(data.difficulty[i].difficulty);
-                  const change = (data.difficulty[i].difficulty / data.difficulty[i - 1].difficulty - 1) * 100;
-
-                  tableData.push(Object.assign(data.difficulty[i], {
-                    change: change,
-                    difficultyShorten: formatNumber(
-                      data.difficulty[i].difficulty / selectedPowerOfTen.divider,
-                      this.locale, '1.2-2') + selectedPowerOfTen.unit
-                  }));
-                }
                 return {
                   availableTimespanDay: availableTimespanDay,
-                  difficulty: this.tableOnly ? tableData.slice(0, 5) : tableData,
+                  currentDifficulty: Math.round(data.difficulty[data.difficulty.length - 1].difficulty * 100) / 100,
+                  currentHashrate: data.hashrates[data.hashrates.length - 1].avgHashrate,
                 };
               }),
               retryWhen((errors) => errors.pipe(
@@ -166,6 +155,7 @@ export class HashrateChartComponent implements OnInit {
         '#D81B60',
       ],
       grid: {
+        top: 30,
         right: this.right,
         left: this.left,
         bottom: this.widget ? 30 : 60,
@@ -209,7 +199,7 @@ export class HashrateChartComponent implements OnInit {
         type: 'time',
         splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
       },
-      legend: data.hashrates.length === 0 ? undefined : {
+      legend: (this.widget || data.hashrates.length === 0) ? undefined : {
         data: [
           {
             name: 'Hashrate',
@@ -241,7 +231,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 +248,6 @@ export class HashrateChartComponent implements OnInit {
             return value.min * 0.9;
           },
           type: 'value',
-          name: 'Difficulty',
           position: 'right',
           axisLabel: {
             color: 'rgb(110, 112, 121)',

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

@@ -86,9 +86,6 @@
     <div class="col">
       <div class="card" style="height: 385px">
         <div class="card-body">
-          <h5 class="card-title">
-            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
               &raquo;</a></div>
@@ -96,20 +93,6 @@
       </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">