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>
<div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
<ul>
<ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
<ng-template [ngIf]="fee <= 400">
<li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
<ng-template [ngIf]="inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></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>
<ng-template ngFor let-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
<ng-template [ngIf]="feeData.fee <= 400">
<li (click)="filterFeeIndex = feeData.fee" [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
<span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
<span class="fee-text">{{ feeData.range }}</span>
</li>
</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;
graphWindowPreference: string;
inverted: boolean;
feeLevelDropdownData = [];
constructor(
@Inject(LOCALE_ID) private locale: string,
@ -51,19 +52,10 @@ export class StatisticsComponent implements OnInit {
ngOnInit() {
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
if (!this.inverted) {
this.feeLevels = [...feeLevels].reverse();
this.chartColors = [...chartColors].reverse();
}
this.setFeeLevelDropdownData();
this.seoService.setTitle($localize`:@@5d4f792f048fcaa6df5948575d7cb325c9393383:Graphs`);
this.stateService.networkChanged$.subscribe((network) => this.network = network);
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({
dateSpan: this.graphWindowPreference
@ -147,11 +139,27 @@ export class StatisticsComponent implements OnInit {
document.location.reload();
}
filterFees(index: number) {
this.filterFeeIndex = index;
}
filterClick() {
this.dropDownOpen = !this.dropDownOpen;
setFeeLevelDropdownData() {
let _feeLevels = feeLevels
let _chartColors = chartColors;
if (!this.inverted) {
_feeLevels = [...feeLevels].reverse();
_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) {
this.blockScrolling$.next(value);
}
isLiquid() {
return this.network === 'liquid' || this.network === 'liquidtestnet';
}
}