Merge branch 'master' into feature/update-hashrate-widget

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

@@ -19,6 +19,7 @@
   </div>
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
+    <span i18n="mining.mining-pool-share">Hashrate & Difficulty</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">

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

@@ -1,3 +1,11 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
 .main-title {
   position: relative;
   color: #ffffff91;
@@ -10,13 +18,14 @@
 }
 
 .full-container {
+  padding: 0px 15px;
   width: 100%;
-  height: calc(100% - 100px);
+  height: calc(100% - 170px);
   @media (max-width: 992px) {
-    height: calc(100% - 140px);
+    height: calc(100% - 220px);
   };
-  @media (max-width: 576px) {
-    height: calc(100% - 180px);
+  @media (max-width: 575px) {
+    height: calc(100% - 260px);
   };
 }
 
@@ -24,7 +33,22 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
-  padding-right: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
 }
 .chart-widget {
   width: 100%;
@@ -36,6 +60,14 @@
   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) {
     flex-direction: row;
     float: right;

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

@@ -61,6 +61,7 @@ export class HashrateChartComponent implements OnInit {
       .pipe(
         startWith('1y'),
         switchMap((timespan) => {
+          this.isLoading = true;
           return this.apiService.getHistoricalHashrate$(timespan)
             .pipe(
               tap((data: any) => {
@@ -144,6 +145,7 @@ export class HashrateChartComponent implements OnInit {
 
     this.chartOptions = {
       title: title,
+      animation: false,
       color: [
         new graphic.LinearGradient(0, 0, 0, 0.65, [
           { offset: 0, color: '#F4511E' },
@@ -158,7 +160,7 @@ export class HashrateChartComponent implements OnInit {
         top: 30,
         right: this.right,
         left: this.left,
-        bottom: this.widget ? 30 : 60,
+        bottom: this.widget ? 30 : this.isMobile() ? 90 : 60,
       },
       tooltip: {
         show: !this.isMobile() || !this.widget,
@@ -289,17 +291,18 @@ export class HashrateChartComponent implements OnInit {
         type: 'inside',
         realtime: true,
         zoomLock: true,
-        zoomOnMouseWheel: true,
-        moveOnMouseMove: true,
         maxSpan: 100,
         minSpan: 10,
+        moveOnMouseMove: false,
       }, {
         showDetail: false,
         show: true,
         type: 'slider',
         brushSelect: false,
         realtime: true,
-        bottom: 0,
+        bottom: this.isMobile() ? 30 : 0,
+        left: 20,
+        right: 15,
         selectedDataBackground: {
           lineStyle: {
             color: '#fff',