Remove difficulty component

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

@@ -28,7 +28,6 @@ import { AssetsFeaturedComponent } from './components/assets/assets-featured/ass
 import { AssetsComponent } from './components/assets/assets.component';
 import { PoolComponent } from './components/pool/pool.component';
 import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
-import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
 import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
 
@@ -75,10 +74,6 @@ let routes: Routes = [
         path: 'mining',
         component: MiningStartComponent,
         children: [
-          {
-            path: 'difficulty',
-            component: DifficultyChartComponent,
-          },
           {
             path: 'hashrate',
             component: HashrateChartComponent,
@@ -194,10 +189,6 @@ let routes: Routes = [
             path: 'mining',
             component: MiningStartComponent,
             children: [
-              {
-                path: 'difficulty',
-                component: DifficultyChartComponent,
-              },
               {
                 path: 'hashrate',
                 component: HashrateChartComponent,
@@ -307,10 +298,6 @@ let routes: Routes = [
             path: 'mining',
             component: MiningStartComponent,
             children: [
-              {
-                path: 'difficulty',
-                component: DifficultyChartComponent,
-              },
               {
                 path: 'hashrate',
                 component: HashrateChartComponent,

frontend/src/app/app.module.ts

@@ -70,7 +70,6 @@ import { AssetsFeaturedComponent } from './components/assets/assets-featured/ass
 import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
 import { AssetCirculationComponent } from './components/asset-circulation/asset-circulation.component';
 import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
-import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
 import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
 import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
@@ -126,7 +125,6 @@ import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
     AssetGroupComponent,
     AssetCirculationComponent,
     MiningDashboardComponent,
-    DifficultyChartComponent,
     HashrateChartComponent,
     MiningStartComponent,
     AmountShortenerPipe,

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

@@ -1,53 +0,0 @@
-<div [class]="widget === false ? 'container-xl' : ''">
-
-  <div class="card-header mb-0 mb-lg-4" [style]="widget ? 'display:none' : ''">
-    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(difficultyObservable$ | async) as diffChanges">
-      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/difficulty' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 90">
-          <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/difficulty' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 180">
-          <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/difficulty' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 365">
-          <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/difficulty' | relativeUrl]" *ngIf="diffChanges.availableTimespanDay >= 730">
-          <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" [routerLink]="['/mining/difficulty' | 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/difficulty' | relativeUrl]" fragment="all"> ALL
-        </label>
-      </div>
-    </form>
-  </div>
-
-  <div *ngIf="difficultyObservable$ | async" class="mb-5" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
-    <div class="spinner-border text-light"></div>
-  </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.difficulty">Difficulty</th>
-        <th i18n="mining.change">Change</th>
-      </tr>
-    </thead>
-    <tbody *ngIf="(difficultyObservable$ | 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.difficulty, 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/difficulty-chart/difficulty-chart.component.scss

@@ -1,27 +0,0 @@
-.main-title {
-  position: relative;
-  color: #ffffff91;
-  margin-top: -13px;
-  font-size: 10px;
-  text-transform: uppercase;
-  font-weight: 500;
-  text-align: center;
-  padding-bottom: 3px;
-}
-
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}

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

@@ -1,183 +0,0 @@
-import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { EChartsOption, graphic } 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';
-import { selectPowerOfTen } from 'src/app/bitcoin.utils';
-
-@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 {
-  @Input() widget: boolean = false;
-
-  radioGroupForm: FormGroup;
-
-  chartOptions: EChartsOption = {};
-  chartInitOptions = {
-    renderer: 'svg'
-  };
-
-  difficultyObservable$: 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.difficulty:Difficulty`);
-    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
-    this.radioGroupForm.controls.dateSpan.setValue('1y');
-  }
-
-  ngOnInit(): void {
-    this.difficultyObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
-      .pipe(
-        startWith('1y'),
-        switchMap((timespan) => {
-          return this.apiService.getHistoricalDifficulty$(timespan)
-            .pipe(
-              tap(data => {
-                this.prepareChartOptions(data.adjustments.map(val => [val.timestamp * 1000, val.difficulty]));
-                this.isLoading = false;
-              }),
-              map(data => {
-                const availableTimespanDay = (
-                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
-                ) / 3600 / 24;
-
-                const tableData = [];
-                for (let i = data.adjustments.length - 1; i > 0; --i) {
-                  const selectedPowerOfTen: any = selectPowerOfTen(data.adjustments[i].difficulty);
-                  const change = (data.adjustments[i].difficulty / data.adjustments[i - 1].difficulty - 1) * 100;
-
-                  tableData.push(Object.assign(data.adjustments[i], {
-                    change: change,
-                    difficultyShorten: formatNumber(
-                      data.adjustments[i].difficulty / selectedPowerOfTen.divider,
-                      this.locale, '1.2-2') + selectedPowerOfTen.unit
-                  }));
-                }
-                return {
-                  availableTimespanDay: availableTimespanDay,
-                  data: tableData
-                };
-              }),
-            );
-          }),
-          share()
-        );
-  }
-
-  prepareChartOptions(data) {
-    this.chartOptions = {
-      color: new graphic.LinearGradient(0, 0, 0, 0.65, [
-        { offset: 0, color: '#D81B60' },
-        { offset: 0.25, color: '#8E24AA' },
-        { offset: 0.5, color: '#5E35B1' },
-        { offset: 0.75, color: '#3949AB' },
-        { offset: 1, color: '#1E88E5' }
-      ]),
-      title: {
-        text: this.widget? '' : $localize`:@@mining.difficulty:Difficulty`,
-        left: 'center',
-        textStyle: {
-          color: '#FFF',
-        },
-      },
-      tooltip: {
-        show: true,
-        trigger: 'axis',
-        backgroundColor: 'rgba(17, 19, 31, 1)',
-        borderRadius: 4,
-        shadowColor: 'rgba(0, 0, 0, 0.5)',
-        textStyle: {
-          color: '#b1b1b1',
-        },
-        borderColor: '#000',
-        formatter: params => {
-          return `<b style="color: white">${params[0].axisValueLabel}</b><br>
-            ${params[0].marker} ${formatNumber(params[0].value[1], this.locale, '1.0-0')}`
-        }
-      },
-      axisPointer: {
-        type: 'line',
-      },
-      xAxis: {
-        type: 'time',
-        splitNumber: this.isMobile() ? 5 : 10,
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          formatter: (val) => {
-            const selectedPowerOfTen: any = selectPowerOfTen(val);
-            const diff = val / selectedPowerOfTen.divider;
-            return `${diff} ${selectedPowerOfTen.unit}`;
-          }
-        },
-        splitLine: {
-          lineStyle: {
-            type: 'dotted',
-            color: '#ffffff66',
-            opacity: 0.25,
-          }
-        }
-      },
-      series: {
-        showSymbol: false,
-        data: data,
-        type: 'line',
-        smooth: false,
-        lineStyle: {
-          width: 2,
-        },
-      },
-      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/components/mining-dashboard/mining-dashboard.component.html

@@ -26,17 +26,5 @@
       </div>
     </div>
 
-    <!-- difficulty -->
-    <div class="col">
-      <div class="card">
-        <div class="card-body">
-          <h5 class="card-title" i18n="ning.difficulty">Difficulty (1y)</h5>
-          <app-difficulty-chart [widget]=true></app-difficulty-chart>
-          <div class="text-center"><a href="" [routerLink]="['/mining/difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
-              &raquo;</a></div>
-        </div>
-      </div>
-    </div>
-
   </div>
 </div>