mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-19 13:43:45 +01:00
Code Issues Projects Releases Wiki Activity

use power-of-ten formatting for large fee rates

Browse Source
This commit is contained in:
Mononaut 2023-06-30 19:41:12 -04:00
parent 86f51e3902
commit eca40f94c9
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ 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';
@Component({
selector: 'app-fee-distribution-graph',
@ -34,17 +35,17 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
private vbytesPipe: VbytesPipe,
) { }
ngOnInit() {
ngOnInit(): void {
this.mountChart();
}
ngOnChanges() {
ngOnChanges(): void {
this.simple = !!this.feeRange?.length;
this.prepareChart();
this.mountChart();
}
prepareChart() {
prepareChart(): void {
if (this.simple) {
this.data = this.feeRange.map((rate, index) => [index * 10, rate]);
this.labelInterval = 1;
@ -82,7 +83,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
this.data = samples.reverse();
}
mountChart() {
mountChart(): void {
this.mempoolVsizeFeesOptions = {
grid: {
height: '210',
@ -118,6 +119,13 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
color: '#ffffff66',
opacity: 0.25,
}
},
axisLabel: {
formatter: (value: number): string => {
const selectedPowerOfTen = selectPowerOfTen(value);
const newVal = Math.round(value / selectedPowerOfTen.divider);
return `${newVal}${selectedPowerOfTen.unit}`;
},
}
},
series: [{
@ -128,7 +136,12 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
position: 'top',
color: '#ffffff',
textShadowBlur: 0,
formatter: (label: any): string => '' + (label.data[1] > 99.5 ? Math.round(label.data[1]) : label.data[1].toFixed(1)),
formatter: (label: { data: number[] }): string => {
const value = label.data[1];
const selectedPowerOfTen = selectPowerOfTen(value);
const newVal = Math.round(value / selectedPowerOfTen.divider);
return `${newVal}${selectedPowerOfTen.unit}`;
},
},
showAllSymbol: false,
smooth: true,