machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX - New component for difficult adjustment. (#602)

Browse Source 
* Add next difficulty blocks.
Add next difficulty target date.
Add next difficulty total progress.
Add ajustment difficulty avg min per block.

* Fix typo.

* Trigger difficulty calculation every 5 seconds.

* Add rxjs timer to difficultyEpoch.

* Fix pipe.

* Fix small bar position.

* Change i18n strings.

* Fix typo.

* Add time-until component.

* Speed up difficultyEpoch timer to 1000 ms.

* Fix values to 2 decimal places.

* Add title to fee and difficulty adjustment cards.

* Add title outside the card.

* Fix title to center position.

* Add other titles.

* Add new transalations strings.
Refactor time span component.

* Fix difficulty adjustment i18n string.
Fix duplicated i18n strings.
This commit is contained in:
Miguel Medeiros
2021-07-17 08:58:16 -03:00
committed by GitHub
parent 38aee1a897
commit d405334109
13 changed files with 509 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/app/dashboard/dashboard.component.ts
View File

@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
import { combineLatest, merge, Observable, of } from 'rxjs';
import { combineLatest, merge, Observable, of, timer } from 'rxjs';
import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
import { Block } from '../interfaces/electrs.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -22,6 +22,12 @@ interface EpochProgress {
green: string;
red: string;
change: number;
progress: string;
remainingBlocks: number;
newDifficultyHeight: number;
colorAdjustments: string;
timeAvg: string;
remainingTime: number;
}
interface MempoolInfoData {
@@ -108,38 +114,67 @@ export class DashboardComponent implements OnInit {
})
);
this.difficultyEpoch$ = combineLatest([
this.stateService.blocks$.pipe(map(([block]) => block)),
this.stateService.lastDifficultyAdjustment$
])
.pipe(
map(([block, DATime]) => {
const now = new Date().getTime() / 1000;
const diff = now - DATime;
const blocksInEpoch = block.height % 2016;
const estimatedBlocks = Math.round(diff / 60 / 10);
const difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
this.difficultyEpoch$ = timer(0, 1000)
.pipe(
switchMap(() => combineLatest([
this.stateService.blocks$.pipe(map(([block]) => block)),
this.stateService.lastDifficultyAdjustment$
])),
map(([block, DATime]) => {
const now = new Date().getTime() / 1000;
const diff = now - DATime;
const blocksInEpoch = block.height % 2016;
const estimatedBlocks = Math.round(diff / 60 / 10);
let difficultyChange = 0;
if (blocksInEpoch > 0) {
difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
}
let base = 0;
let green = 0;
let red = 0;
let base = 0;
let green = 0;
let red = 0;
if (blocksInEpoch >= estimatedBlocks) {
base = estimatedBlocks / 2016 * 100;
green = (blocksInEpoch - estimatedBlocks) / 2016 * 100;
} else {
base = blocksInEpoch / 2016 * 100;
red = Math.min((estimatedBlocks - blocksInEpoch) / 2016 * 100, 100 - base);
}
if (blocksInEpoch >= estimatedBlocks) {
base = estimatedBlocks / 2016 * 100;
green = (blocksInEpoch - estimatedBlocks) / 2016 * 100;
} else {
base = blocksInEpoch / 2016 * 100;
red = Math.min((estimatedBlocks - blocksInEpoch) / 2016 * 100, 100 - base);
}
return {
base: base + '%',
green: green + '%',
red: red + '%',
change: difficultyChange,
};
})
);
let colorAdjustments = '#dc3545';
if (difficultyChange >= 0) {
colorAdjustments = '#299435';
}
const timeAvgDiff = difficultyChange * 0.1;
let timeAvgMins = 10;
if (timeAvgDiff > 0 ){
timeAvgMins -= Math.abs(timeAvgDiff);
} else {
timeAvgMins += Math.abs(timeAvgDiff);
}
const remainingBlocks = 2016 - blocksInEpoch;
const nowMilliseconds = now * 1000;
const timeAvgMilliseconds = timeAvgMins * 60 * 1000;
const remainingBlocsMilliseconds = remainingBlocks * timeAvgMilliseconds;
return {
base: base + '%',
green: green + '%',
red: red + '%',
change: difficultyChange,
progress: base.toFixed(2),
remainingBlocks,
timeAvg: timeAvgMins.toFixed(0),
colorAdjustments,
blocksInEpoch,
newDifficultyHeight: block.height + remainingBlocks,
remainingTime: remainingBlocsMilliseconds + nowMilliseconds
};
})
);
this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
.pipe(