mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-03 17:47:01 +01:00
Code Issues Projects Releases Wiki Activity

Bugfix: Dashboard - Difficulty adjustment component. (#663)

Browse source 
* Add color to previous retarget.
Add absolute number pipe.
Change plus and minus signs to fa icons.
Change Fee Estimate title to Transactions Fees.
Set min and max difficulty adjustments.

* Add projectID to cypress conf.

* Change icon to fa-caret.

* Remove unecessary icons.
This commit is contained in:
Miguel Medeiros 2021-07-26 16:00:40 -03:00 • committed by GitHub
parent 60d8697b09
commit 751c7d6e69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 86 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/cypress.json
View file

@ -1,4 +1,5 @@
{
"projectId": "ry4br7",
"integrationFolder": "cypress/integration",
"supportFile": "cypress/support/index.ts",
"videosFolder": "cypress/videos",

5
frontend/src/app/app.module.ts
View file

@ -45,7 +45,7 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { ApiDocsComponent } from './components/api-docs/api-docs.component';
import { CodeTemplateComponent } from './components/api-docs/code-template.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@ -140,5 +140,8 @@ export class AppModule {
library.addIcons(faRedoAlt);
library.addIcons(faArrowAltCircleRight);
library.addIcons(faExternalLinkAlt);
library.addIcons(faSortUp);
library.addIcons(faCaretUp);
library.addIcons(faCaretDown);
}
}

25
frontend/src/app/dashboard/dashboard.component.html
View file

@ -3,7 +3,7 @@
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col card-wrapper">
<div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card">
<div class="card-body">
<app-fees-box class="d-block"></app-fees-box>
@ -30,7 +30,7 @@
</ng-template>
<ng-template #expanded>
<div class="col card-wrapper">
<div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card">
<div class="card-body">
<app-fees-box class="d-block"></app-fees-box>
@ -215,8 +215,25 @@
</div>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
<div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">{{epochData.change > 0 ? '+' : ''}}{{ epochData.change | number: '1.2-2' }} <span class="symbol">%</span></div>
<div class="symbol" i18n="difficulty-box.previous-retarget">Previous: {{epochData.previousRetarget > 0 ? '+' : ''}}{{ epochData.previousRetarget | number: '1.2-2' }} %</div>
<div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
<span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
<fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #arrowDownDifficulty >
<fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
</ng-template>
{{ epochData.change | absolute | number: '1.2-2' }} <span class="symbol">%</span>
</div>
<div class="symbol">
<span i18n="difficulty-box.previous">Previous</span>:
<span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
<span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
<fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #arrowDownPreviousDifficulty >
<fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
</ng-template>
{{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %</div>
</div>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>

12
frontend/src/app/dashboard/dashboard.component.scss
View file

@ -326,3 +326,15 @@
padding: 22px 20px;
}
}
.retarget-sign {
margin-right: -3px;
font-size: 14px;
top: -2px;
position: relative;
}
.previous-retarget-sign {
margin-right: -2px;
font-size: 10px;
}

34
frontend/src/app/dashboard/dashboard.component.ts
View file

@ -24,6 +24,7 @@ interface EpochProgress {
remainingBlocks: number;
newDifficultyHeight: number;
colorAdjustments: string;
colorPreviousAdjustments: string;
timeAvg: string;
remainingTime: number;
previousRetarget: number;
@ -143,19 +144,41 @@ export class DashboardComponent implements OnInit {
colorAdjustments = '#299435';
}
let colorPreviousAdjustments = '#dc3545';
if(previousRetarget){
if (previousRetarget >= 0) {
colorPreviousAdjustments = '#299435';
}
if (previousRetarget === 0) {
colorPreviousAdjustments = '#ffffff66';
}
}else{
colorPreviousAdjustments = '#ffffff66';
}
const timeAvgDiff = difficultyChange * 0.1;
let timeAvgMins = 10;
if (timeAvgDiff > 0 ){
timeAvgMins -= Math.abs(timeAvgDiff);
} else {
timeAvgMins += Math.abs(timeAvgDiff);
if(timeAvgDiff > timeAvgDiff){
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;
if(difficultyChange > 300) {
difficultyChange = 300;
}
if(difficultyChange < -75){
difficultyChange = -75;
}
return {
base: base + '%',
change: difficultyChange,
@ -163,10 +186,11 @@ export class DashboardComponent implements OnInit {
remainingBlocks,
timeAvg: timeAvgMins.toFixed(0),
colorAdjustments,
colorPreviousAdjustments,
blocksInEpoch,
newDifficultyHeight: block.height + remainingBlocks,
remainingTime: remainingBlocsMilliseconds + nowMilliseconds,
previousRetarget
previousRetarget: previousRetarget ? previousRetarget : 0
};
})
);

8
frontend/src/app/shared/pipes/absolute/absolute.pipe.spec.ts Normal file
View file

@ -0,0 +1,8 @@
import { AbsolutePipe } from './absolute.pipe';
describe('AbsolutePipe', () => {
it('create an instance', () => {
const pipe = new AbsolutePipe();
expect(pipe).toBeTruthy();
});
});

8
frontend/src/app/shared/pipes/absolute/absolute.pipe.ts Normal file
View file

@ -0,0 +1,8 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'absolute' })
export class AbsolutePipe implements PipeTransform {
transform(nr: number) {
return Math.abs(nr);
}
}

3
frontend/src/app/shared/shared.module.ts
View file

@ -6,6 +6,7 @@ import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
import { Decimal2HexPipe } from './pipes/decimal2hex/decimal2hex.pipe';
import { AsmStylerPipe } from './pipes/asm-styler/asm-styler.pipe';
import { AbsolutePipe } from './pipes/absolute/absolute.pipe';
import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
@ -36,6 +37,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
RelativeUrlPipe,
Hex2asciiPipe,
AsmStylerPipe,
AbsolutePipe,
BytesPipe,
VbytesPipe,
WuBytesPipe,
@ -78,6 +80,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
RelativeUrlPipe,
Hex2asciiPipe,
AsmStylerPipe,
AbsolutePipe,
BytesPipe,
VbytesPipe,
WuBytesPipe,