Create difficulty chart component

frontend/src/app/app-routing.module.ts

@@ -27,6 +27,7 @@ import { AssetGroupComponent } from './components/assets/asset-group/asset-group
 import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
 import { AssetsComponent } from './components/assets/assets.component';
 import { PoolComponent } from './components/pool/pool.component';
+import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
 
 let routes: Routes = [
   {
@@ -63,6 +64,10 @@ let routes: Routes = [
         path: 'blocks',
         component: LatestBlocksComponent,
       },
+      {
+        path: 'mining/difficulty',
+        component: DifficultyChartComponent,
+      },
       {
         path: 'mining/pools',
         component: PoolRankingComponent,
@@ -155,6 +160,10 @@ let routes: Routes = [
             path: 'blocks',
             component: LatestBlocksComponent,
           },
+          {
+            path: 'mining/difficulty',
+            component: DifficultyChartComponent,
+          },
           {
             path: 'mining/pools',
             component: PoolRankingComponent,
@@ -241,6 +250,10 @@ let routes: Routes = [
             path: 'blocks',
             component: LatestBlocksComponent,
           },
+          {
+            path: 'mining/difficulty',
+            component: DifficultyChartComponent,
+          },
           {
             path: 'mining/pools',
             component: PoolRankingComponent,

frontend/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
 import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
+import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
 
 @NgModule({
   declarations: [
@@ -118,6 +119,7 @@ import { AssetGroupComponent } from './components/assets/asset-group/asset-group
     AssetsNavComponent,
     AssetsFeaturedComponent,
     AssetGroupComponent,
+    DifficultyChartComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

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

@@ -0,0 +1,8 @@
+<div class="container-xl">
+
+  <div *ngIf="difficultyObservable$ | async" class="" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
+</div>

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

@@ -0,0 +1,102 @@
+import { Component, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+
+@Component({
+  selector: 'app-difficulty-chart',
+  templateUrl: './difficulty-chart.component.html',
+  styleUrls: ['./difficulty-chart.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 38%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+})
+export class DifficultyChartComponent implements OnInit {
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg'
+  };
+
+  difficultyObservable$: Observable<any>;
+  isLoading = true;
+
+  constructor(
+    private seoService: SeoService,
+    private apiService: ApiService,
+  ) {
+    this.seoService.setTitle($localize`:@@mining.difficulty:Difficulty`);
+  }
+
+  ngOnInit(): void {
+    this.difficultyObservable$ = this.apiService.getHistoricalDifficulty$(undefined)
+      .pipe(
+        map(data => {
+          return data.map(val => [val.timestamp, val.difficulty])
+        }),
+        tap(data => {
+          this.prepareChartOptions(data);
+          this.isLoading = false;
+        })
+      )
+  }
+
+  prepareChartOptions(data) {
+    this.chartOptions = {
+      title: {
+        text: $localize`:@@mining.difficulty:Difficulty`,
+        left: 'center',
+        textStyle: {
+          color: '#FFF',
+        },
+      },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+      },
+      axisPointer: {
+        type: 'line',
+      },
+      xAxis: [
+        {
+          type: 'time',
+        }
+      ],
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+          formatter: function(val) {
+            const diff = val / Math.pow(10, 12); // terra
+            return diff.toString() + 'T';
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+      series: [
+        {
+          data: data,
+          type: 'line',
+          smooth: false,
+          lineStyle: {
+            width: 3,
+          },
+          areaStyle: {}
+        },
+      ],
+    };
+  }
+
+}

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { EChartsOption, PieSeriesOption } from 'echarts';
@@ -23,7 +23,7 @@ import { StateService } from '../../services/state.service';
     }
   `],
 })
-export class PoolRankingComponent implements OnInit, OnDestroy {
+export class PoolRankingComponent implements OnInit {
   poolsWindowPreference: string;
   radioGroupForm: FormGroup;
 
@@ -90,9 +90,6 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
       );
   }
 
-  ngOnDestroy(): void {
-  }
-
   formatPoolUI(pool: SinglePoolStats) {
     pool['blockText'] = pool.blockCount.toString() + ` (${pool.share}%)`;
     return pool;

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

@@ -129,12 +129,18 @@ export class ApiService {
     return this.httpClient.post<any>(this.apiBaseUrl + this.apiBasePath + '/api/tx', hexPayload, { responseType: 'text' as 'json'});
   }
 
-  listPools$(interval: string | null) : Observable<PoolsStats> {
-    return this.httpClient.get<PoolsStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools/${interval}`);
+  listPools$(interval: string | undefined) : Observable<PoolsStats> {
+    return this.httpClient.get<PoolsStats>(
+      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools` +
+      (interval !== undefined ? `/${interval}` : '')
+    );
   }
 
-  getPoolStats$(poolId: number, interval: string | null): Observable<PoolStat> {
-    return this.httpClient.get<PoolStat>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}/${interval}`);
+  getPoolStats$(poolId: number, interval: string | undefined): Observable<PoolStat> {
+    return this.httpClient.get<PoolStat>(
+      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}` +
+      (interval !== undefined ? `/${interval}` : '')
+    );
   }
 
   getPoolBlocks$(poolId: number, fromHeight: number): Observable<BlockExtended[]> {
@@ -143,4 +149,11 @@ export class ApiService {
         (fromHeight !== undefined ? `/${fromHeight}` : '')
       );
   }
+
+  getHistoricalDifficulty$(interval: string | undefined): Observable<any[]> {
+    return this.httpClient.get<any[]>(
+        this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/difficulty` +
+        (interval !== undefined ? `/${interval}` : '')
+      );
+  }
 }