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

Liquid support to the Graph fee filter dropdown

Browse Source 
fixes #1072
This commit is contained in:
softsimon 2022-01-04 04:42:19 +04:00
parent 990ab3da5f
commit e1275c62cc
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/components/statistics/statistics.component.html
View File

@ -41,17 +41,11 @@
</button> </button>
<div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees"> <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
<ul> <ul>
<ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels"> <ng-template ngFor let-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
<ng-template [ngIf]="fee <= 400"> <ng-template [ngIf]="feeData.fee <= 400">
<li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''"> <li (click)="filterFeeIndex = feeData.fee" [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
<ng-template [ngIf]="inverted"> <span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span> <span class="fee-text">{{ feeData.range }}</span>
<span class="fee-text" >{{feeLevels[i]}} - {{ feeLevels[i + 1] }}</span>
</ng-template>
<ng-template [ngIf]="!inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
<span class="fee-text" >{{feeLevels[i]}} - {{ feeLevels[i - 1] }}</span>
</ng-template>
</li> </li>
</ng-template> </ng-template>
</ng-template> </ng-template>

40
frontend/src/app/components/statistics/statistics.component.ts
View File

@ -37,6 +37,7 @@ export class StatisticsComponent implements OnInit {
radioGroupForm: FormGroup; radioGroupForm: FormGroup;
graphWindowPreference: string; graphWindowPreference: string;
inverted: boolean; inverted: boolean;
feeLevelDropdownData = [];
constructor( constructor(
@Inject(LOCALE_ID) private locale: string, @Inject(LOCALE_ID) private locale: string,
@ -51,19 +52,10 @@ export class StatisticsComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.inverted = this.storageService.getValue('inverted-graph') === 'true'; this.inverted = this.storageService.getValue('inverted-graph') === 'true';
if (!this.inverted) { this.setFeeLevelDropdownData();
this.feeLevels = [...feeLevels].reverse();
this.chartColors = [...chartColors].reverse();
}
this.seoService.setTitle($localize`:@@5d4f792f048fcaa6df5948575d7cb325c9393383:Graphs`); this.seoService.setTitle($localize`:@@5d4f792f048fcaa6df5948575d7cb325c9393383:Graphs`);
this.stateService.networkChanged$.subscribe((network) => this.network = network); this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h'; this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h';
const isMobile = window.innerWidth <= 767.98;
let labelHops = isMobile ? 48 : 24;
if (isMobile) {
labelHops = 96;
}
this.radioGroupForm = this.formBuilder.group({ this.radioGroupForm = this.formBuilder.group({
dateSpan: this.graphWindowPreference dateSpan: this.graphWindowPreference
@ -147,11 +139,27 @@ export class StatisticsComponent implements OnInit {
document.location.reload(); document.location.reload();
} }
filterFees(index: number) { setFeeLevelDropdownData() {
this.filterFeeIndex = index; let _feeLevels = feeLevels
} let _chartColors = chartColors;
if (!this.inverted) {
filterClick() { _feeLevels = [...feeLevels].reverse();
this.dropDownOpen = !this.dropDownOpen; _chartColors = [...chartColors].reverse();
}
_feeLevels.forEach((fee, i) => {
if (this.inverted) {
this.feeLevelDropdownData.push({
fee: fee,
range: this.stateService.isLiquid() ? `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[i + 1] / 10).toFixed(1)}` : `${_feeLevels[i]} - ${_feeLevels[i + 1]}`,
color: _chartColors[i],
});
} else {
this.feeLevelDropdownData.push({
fee: fee,
range: this.stateService.isLiquid() ? `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[i - 1] / 10).toFixed(1)}` : `${_feeLevels[i]} - ${_feeLevels[i - 1]}`,
color: _chartColors[i - 1],
});
}
})
} }
} }

4
frontend/src/app/services/state.service.ts
View File

@ -200,4 +200,8 @@ export class StateService {
setBlockScrollingInProgress(value: boolean) { setBlockScrollingInProgress(value: boolean) {
this.blockScrolling$.next(value); this.blockScrolling$.next(value);
} }
isLiquid() {
return this.network === 'liquid' || this.network === 'liquidtestnet';
}
} }