mirror of
https://github.com/mempool/mempool.git
synced 2024-12-28 01:04:28 +01:00
Remove difficulty component
This commit is contained in:
nymkappa
parent
cfbf863a44
commit
dcd84680fc
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>‎{{ 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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
»</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user