Added hashrate chart

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

@@ -1 +1,53 @@
-<p>hashrate-chart works!</p>
+<div [class]="widget === false ? 'container-xl' : ''">
+
+  <div *ngIf="hashrateObservable$ | async" class="" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></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 ? 'display:none' : ''">
+    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as diffChanges">
+      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
+        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/hashrate' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 90">
+          <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/hashrate' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 180">
+          <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/hashrate' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 365">
+          <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/hashrate' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 730">
+          <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/hashrate' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 1095">
+          <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'all'" [routerLink]="['/mining/hashrate' | relativeUrl]" fragment="all"> ALL
+        </label>
+      </div>
+    </form>
+  </div>
+
+  <!-- <table class="table table-borderless table-sm text-center" *ngIf="!widget">
+    <thead>
+      <tr>
+        <th i18n="mining.rank">Block</th>
+        <th i18n="block.timestamp">Timestamp</th>
+        <th i18n="mining.hashrate">Difficulty</th>
+        <th i18n="mining.change">Change</th>
+      </tr>
+    </thead>
+    <tbody *ngIf="(hashrateObservable$ | async) as diffChanges">
+      <tr *ngFor="let diffChange of diffChanges.data">
+        <td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
+        <td>&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
+        <td class="d-none d-md-block">{{ formatNumber(diffChange.hashrate, locale, '1.2-2') }}</td>
+        <td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td>
+        <td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
+      </tr>
+    </tbody>
+  </table> -->
+
+</div>

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

@@ -0,0 +1,10 @@
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}

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

@@ -1,15 +1,173 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { Observable } from 'rxjs';
+import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { formatNumber } from '@angular/common';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-hashrate-chart',
   templateUrl: './hashrate-chart.component.html',
-  styleUrls: ['./hashrate-chart.component.scss']
+  styleUrls: ['./hashrate-chart.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 38%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
 })
 export class HashrateChartComponent implements OnInit {
+  @Input() widget: boolean = false;
 
-  constructor() { }
+  radioGroupForm: FormGroup;
 
-  ngOnInit(): void {
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg'
+  };
+
+  hashrateObservable$: Observable<any>;
+  isLoading = true;
+  formatNumber = formatNumber;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private formBuilder: FormBuilder,
+  ) {
+    this.seoService.setTitle($localize`:@@mining.hashrate:hashrate`);
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
+    this.radioGroupForm.controls.dateSpan.setValue('1y');
   }
 
+  ngOnInit(): void {
+    this.hashrateObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+      .pipe(
+        startWith('1y'),
+        switchMap((timespan) => {
+          return this.apiService.getHistoricalHashrate$(timespan)
+            .pipe(
+              tap(data => {
+                this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
+                this.isLoading = false;
+              }),
+              map(data => {
+                const availableTimespanDay = (
+                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp / 1000)
+                ) / 3600 / 24;
+                return {
+                  availableTimespanDay: availableTimespanDay,
+                  data: data.hashrates
+                };
+              }),
+            );
+          }),
+          share()
+        );
+  }
+
+  prepareChartOptions(data) {
+    this.chartOptions = {
+      title: {
+        text: this.widget? '' : $localize`:@@mining.hashrate:Hashrate`,
+        left: 'center',
+        textStyle: {
+          color: '#FFF',
+        },
+      },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+      },
+      axisPointer: {
+        type: 'line',
+      },
+      xAxis: {
+        type: 'time',
+        splitNumber: this.isMobile() ? 5 : 10,
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          formatter: (val) => {
+            const powerOfTen = {
+              exa: Math.pow(10, 18),
+              peta: Math.pow(10, 15),
+              terra: Math.pow(10, 12),
+              giga: Math.pow(10, 9),
+              mega: Math.pow(10, 6),
+              kilo: Math.pow(10, 3),
+            }
+
+            let selectedPowerOfTen = { divider: powerOfTen.exa, unit: 'E' };
+            if (val < powerOfTen.mega) {
+              selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling
+            } else if (val < powerOfTen.giga) {
+              selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' };
+            } else if (val < powerOfTen.terra) {
+              selectedPowerOfTen = { divider: powerOfTen.giga, unit: 'G' };
+            } else if (val < powerOfTen.peta) {
+              selectedPowerOfTen = { divider: powerOfTen.terra, unit: 'T' };
+            } else if (val < powerOfTen.exa) {
+              selectedPowerOfTen = { divider: powerOfTen.peta, unit: 'P' };
+            }
+
+            const newVal = val / selectedPowerOfTen.divider;
+            return `${newVal} ${selectedPowerOfTen.unit}`
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        },
+      },
+      series: {
+        showSymbol: false,
+        data: data,
+        type: 'line',
+        smooth: false,
+        lineStyle: {
+          width: 3,
+        },
+        areaStyle: {},
+      },
+      dataZoom: this.widget ? null : [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        bottom: 0,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        },
+      }],
+    };
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
 }

frontend/src/app/services/api.service.ts

@@ -156,4 +156,11 @@ export class ApiService {
         (interval !== undefined ? `/${interval}` : '')
       );
   }
+
+  getHistoricalHashrate$(interval: string | undefined): Observable<any> {
+    return this.httpClient.get<any[]>(
+        this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/hashrate` +
+        (interval !== undefined ? `/${interval}` : '')
+      );
+  }
 }