highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-22 06:27:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Switch remaining vb fields according to unit preference

Browse Source
This commit is contained in:
Mononaut 2023-06-15 18:56:34 -04:00
parent bde8fbac98
commit 5b9d43032c
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
14 changed files with 99 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
View File

@ -64,7 +64,8 @@
{{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
</tr>
<tr>
<td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
<td *only-vsize i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
<td *only-weight i18n="transaction.fee-per-wu|Transaction fee">Fee per weight unit</td>
<td *ngIf="!isLoadingTx; else loadingTxFee">
<app-fee-rate [fee]="tx.fee" [weight]="tx.weight"></app-fee-rate>
&nbsp;

28
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
import { EChartsOption } from 'echarts';
import { Observable } from 'rxjs';
import { Observable, Subscription, combineLatest } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
@ -76,10 +76,11 @@ export class BlockFeeRatesGraphComponent implements OnInit {
}
});
this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
.pipe(
startWith(this.radioGroupForm.controls.dateSpan.value),
switchMap((timespan) => {
this.statsObservable$ = combineLatest([
this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)),
this.stateService.rateUnits$
]).pipe(
switchMap(([timespan, rateUnits]) => {
this.storageService.setValue('miningWindowPreference', timespan);
this.timespan = timespan;
this.isLoading = true;
@ -135,8 +136,8 @@ export class BlockFeeRatesGraphComponent implements OnInit {
this.prepareChartOptions({
legends: legends,
series: series,
});
series: series
}, rateUnits === 'wu');
this.isLoading = false;
}),
map((response) => {
@ -150,7 +151,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
);
}
prepareChartOptions(data) {
prepareChartOptions(data, weightMode) {
this.chartOptions = {
color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
animation: false,
@ -181,7 +182,11 @@ export class BlockFeeRatesGraphComponent implements OnInit {
let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
for (const rate of data.reverse()) {
tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
if (weightMode) {
tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1] / 4} sats/WU<br>`;
} else {
tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
}
}
if (['24h', '3d'].includes(this.timespan)) {
@ -231,9 +236,12 @@ export class BlockFeeRatesGraphComponent implements OnInit {
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
if (weightMode) {
val /= 4;
}
const selectedPowerOfTen: any = selectPowerOfTen(val);
const newVal = Math.round(val / selectedPowerOfTen.divider);
return `${newVal}${selectedPowerOfTen.unit} s/vB`;
return `${newVal}${selectedPowerOfTen.unit} s/${weightMode ? 'WU': 'vB'}`;
},
},
splitLine: {

6
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
View File

@ -34,10 +34,14 @@
<app-fee-rate [fee]="effectiveRate"></app-fee-rate>
</td>
</tr>
<tr>
<tr *only-vsize>
<td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
<td [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
</tr>
<tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
<td class="td-width" i18n="transaction.audit-status">Audit status</td>
<ng-container [ngSwitch]="tx?.status">

32
frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
View File

@ -1,16 +1,17 @@
import { OnChanges } from '@angular/core';
import { OnChanges, OnDestroy } from '@angular/core';
import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { TransactionStripped } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service';
import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
import { selectPowerOfTen } from '../../bitcoin.utils';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-fee-distribution-graph',
templateUrl: './fee-distribution-graph.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FeeDistributionGraphComponent implements OnInit, OnChanges {
export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestroy {
@Input() feeRange: number[];
@Input() vsize: number;
@Input() transactions: TransactionStripped[];
@ -25,6 +26,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
data: number[][];
labelInterval: number = 50;
rateUnitSub: Subscription;
weightMode: boolean = false;
mempoolVsizeFeesOptions: any;
mempoolVsizeFeesInitOptions = {
renderer: 'svg'
@ -35,8 +38,13 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
private vbytesPipe: VbytesPipe,
) { }
ngOnInit(): void {
this.mountChart();
ngOnInit() {
this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
this.weightMode = rateUnits === 'wu';
if (this.data) {
this.mountChart();
}
});
}
ngOnChanges(): void {
@ -122,8 +130,9 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
},
axisLabel: {
formatter: (value: number): string => {
const selectedPowerOfTen = selectPowerOfTen(value);
const newVal = Math.round(value / selectedPowerOfTen.divider);
const unitValue = this.weightMode ? value / 4 : value;
const selectedPowerOfTen = selectPowerOfTen(unitValue);
const newVal = Math.round(unitValue / selectedPowerOfTen.divider);
return `${newVal}${selectedPowerOfTen.unit}`;
},
}
@ -138,10 +147,11 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
textShadowBlur: 0,
formatter: (label: { data: number[] }): string => {
const value = label.data[1];
const selectedPowerOfTen = selectPowerOfTen(value);
const newVal = Math.round(value / selectedPowerOfTen.divider);
const unitValue = this.weightMode ? value / 4 : value;
const selectedPowerOfTen = selectPowerOfTen(unitValue);
const newVal = Math.round(unitValue / selectedPowerOfTen.divider);
return `${newVal}${selectedPowerOfTen.unit}`;
},
}
},
showAllSymbol: false,
smooth: true,
@ -162,4 +172,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
}]
};
}
ngOnDestroy(): void {
this.rateUnitSub.unsubscribe();
}
}

3
frontend/src/app/components/footer/footer.component.html
View File

@ -10,7 +10,8 @@
<ng-template #inSync>
<div class="progress inc-tx-progress-bar">
<div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
<div class="progress-text">&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
<div class="progress-text" *only-vsize>&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
<div class="progress-text" *only-weight>&lrm;{{ mempoolInfoData.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-units-per-second|vB/s">WU/s</ng-container></div>
</div>
</ng-template>
</ng-template>

25
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View File

@ -1,9 +1,11 @@
import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
import { EChartsOption } from 'echarts';
import { OnChanges } from '@angular/core';
import { StorageService } from '../../services/storage.service';
import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils';
import { formatNumber } from '@angular/common';
import { StateService } from '../../services/state.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-incoming-transactions-graph',
@ -18,7 +20,7 @@ import { formatNumber } from '@angular/common';
`],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, OnDestroy {
@Input() data: any;
@Input() theme: string;
@Input() height: number | string = '200';
@ -35,14 +37,24 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
};
windowPreference: string;
chartInstance: any = undefined;
weightMode: boolean = false;
rateUnitSub: Subscription;
constructor(
@Inject(LOCALE_ID) private locale: string,
private storageService: StorageService,
private stateService: StateService,
) { }
ngOnInit() {
this.isLoading = true;
this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
this.weightMode = rateUnits === 'wu';
if (this.data) {
this.mountChart();
}
});
}
ngOnChanges(): void {
@ -118,7 +130,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
itemFormatted += `<div class="item">
<div class="indicator-container">${colorSpan(item.color)}</div>
<div class="grow"></div>
<div class="value">${formatNumber(item.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
<div class="value">${formatNumber(this.weightMode ? item.value[1] * 4 : item.value[1], this.locale, '1.0-0')} <span class="symbol">${this.weightMode ? 'WU' : 'vB'}/s</span></div>
</div>`;
}
});
@ -147,6 +159,9 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
type: 'value',
axisLabel: {
fontSize: 11,
formatter: (value) => {
return this.weightMode ? value * 4 : value;
}
},
splitLine: {
lineStyle: {
@ -250,4 +265,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
this.mempoolStatsChartOption.backgroundColor = 'none';
this.chartInstance.setOption(this.mempoolStatsChartOption);
}
ngOnDestroy(): void {
this.rateUnitSub.unsubscribe();
}
}

3
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
import { WuBytesPipe } from '../../shared/pipes/bytes-pipe/wubytes.pipe';
import { formatNumber } from '@angular/common';
import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from '../../services/state.service';
@ -48,9 +49,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
chartColorsOrdered = chartColors;
inverted: boolean;
chartInstance: any = undefined;
weightMode: boolean = false;
constructor(
private vbytesPipe: VbytesPipe,
private wubytesPipe: WuBytesPipe,
private stateService: StateService,
private storageService: StorageService,
@Inject(LOCALE_ID) private locale: string,

6
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
View File

@ -21,10 +21,14 @@
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
</tr>
<tr>
<tr *only-vsize>
<td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
</tr>
<tr>
<td class="td-width" i18n="transaction.status|Transaction Status">Status</td>
<td>

2
frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
View File

@ -31,7 +31,7 @@
>
<div class="shape"></div>
</a>
<span class="fee-rate"><app-fee-rate [fee]="cell.replacement.tx.fee" [weight]="cell.replacement.tx.vsize * 4"></app-fee-rate></span>
<span class="fee-rate"><app-fee-rate [fee]="cell.replacement.tx.fee" [weight]="cell.replacement.tx.vsize * 4" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate></span>
</div>
</ng-container>
<ng-template #nonNode>

5
frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
View File

@ -126,11 +126,6 @@
}
}
.symbol::ng-deep {
display: block;
margin-top: -0.5em;
}
&.selected {
.shape-border {
background: #9339f4;

12
frontend/src/app/components/transaction/transaction.component.html
View File

@ -137,7 +137,8 @@
<tr>
<th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
<th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
<th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
<th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
<th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
<th class="d-none d-lg-table-cell"></th>
</tr>
@ -149,7 +150,8 @@
<td>
<app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
<td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
<td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)" class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
</tr>
@ -160,7 +162,8 @@
<td class="txids">
<app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
<td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
<td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
<td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
<td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
</tr>
@ -171,7 +174,8 @@
<td class="txids">
<app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
<td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
<td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
</tr>

3
frontend/src/app/dashboard/dashboard.component.html
View File

@ -229,7 +229,8 @@
<ng-template #inSync>
<div class="progress inc-tx-progress-bar">
<div class="progress-bar {{ mempoolInfoData.value.progressColor }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">&nbsp;</div>
<div class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
<div *only-vsize class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
<div *only-weight class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-per-second|WU/s">WU/s</ng-container></div>
</div>
</ng-template>
</ng-template>

11
frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts
View File

@ -17,7 +17,7 @@ export class WuBytesPipe implements PipeTransform {
'TWU': {max: Number.MAX_SAFE_INTEGER, prev: 'GWU'}
};
transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit): any {
transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit, plainText?: boolean): any {
if (!(isNumberFinite(input) &&
isNumberFinite(decimal) &&
@ -38,7 +38,7 @@ export class WuBytesPipe implements PipeTransform {
const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal);
return WuBytesPipe.formatResult(result, to);
return WuBytesPipe.formatResult(result, to, plainText);
}
for (const key in WuBytesPipe.formats) {
@ -47,12 +47,15 @@ export class WuBytesPipe implements PipeTransform {
const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal);
return WuBytesPipe.formatResult(result, key);
return WuBytesPipe.formatResult(result, key, plainText);
}
}
}
static formatResult(result: number, unit: string): string {
static formatResult(result: number, unit: string, plainText: boolean): string {
if (plainText){
return `${result} ${unit}`;
}
return `${result} <span class="symbol">${unit}</span>`;
}

1
frontend/src/app/shared/shared.module.ts
View File

@ -209,6 +209,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
],
providers: [
VbytesPipe,
WuBytesPipe,
RelativeUrlPipe,
NoSanitizePipe,
ShortenStringPipe,