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

Merge pull request #4318 from mempool/mononaut/more-dp-fees

Browse Source 
Improve precision of fee distribution chart labels
This commit is contained in:
softsimon 2023-11-11 18:36:26 +09:00 committed by GitHub
commit fd25713746
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.scss Normal file
View File

@ -0,0 +1,3 @@
.fee-distribution-chart {
margin-top: 0.75rem;
}

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

@ -1,4 +1,4 @@
import { OnChanges, OnDestroy } from '@angular/core'; import { HostListener, OnChanges, OnDestroy } from '@angular/core';
import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { TransactionStripped } from '../../interfaces/websocket.interface'; import { TransactionStripped } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
@ -9,6 +9,7 @@ import { Subscription } from 'rxjs';
@Component({ @Component({
selector: 'app-fee-distribution-graph', selector: 'app-fee-distribution-graph',
templateUrl: './fee-distribution-graph.component.html', templateUrl: './fee-distribution-graph.component.html',
styleUrls: ['./fee-distribution-graph.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestroy { export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestroy {
@ -25,6 +26,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
simple: boolean = false; simple: boolean = false;
data: number[][]; data: number[][];
labelInterval: number = 50; labelInterval: number = 50;
smallScreen: boolean = window.innerWidth < 450;
rateUnitSub: Subscription; rateUnitSub: Subscription;
weightMode: boolean = false; weightMode: boolean = false;
@ -95,9 +97,9 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
this.mempoolVsizeFeesOptions = { this.mempoolVsizeFeesOptions = {
grid: { grid: {
height: '210', height: '210',
right: '20', right: this.smallScreen ? '10' : '20',
top: '22', top: '22',
left: '40', left: this.smallScreen ? '10' : '40',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -131,16 +133,17 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
} }
}, },
axisLabel: { axisLabel: {
show: true, show: !this.smallScreen,
formatter: (value: number): string => { formatter: (value: number): string => {
const unitValue = this.weightMode ? value / 4 : value; const unitValue = this.weightMode ? value / 4 : value;
const selectedPowerOfTen = selectPowerOfTen(unitValue); const selectedPowerOfTen = selectPowerOfTen(unitValue);
const newVal = Math.round(unitValue / selectedPowerOfTen.divider); const scaledValue = unitValue / selectedPowerOfTen.divider;
const newVal = scaledValue >= 100 ? Math.round(scaledValue) : scaledValue.toPrecision(3);
return `${newVal}${selectedPowerOfTen.unit}`; return `${newVal}${selectedPowerOfTen.unit}`;
}, },
}, },
axisTick: { axisTick: {
show: true, show: !this.smallScreen,
} }
}, },
series: [{ series: [{
@ -151,11 +154,13 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
position: 'top', position: 'top',
color: '#ffffff', color: '#ffffff',
textShadowBlur: 0, textShadowBlur: 0,
fontSize: this.smallScreen ? 10 : 12,
formatter: (label: { data: number[] }): string => { formatter: (label: { data: number[] }): string => {
const value = label.data[1]; const value = label.data[1];
const unitValue = this.weightMode ? value / 4 : value; const unitValue = this.weightMode ? value / 4 : value;
const selectedPowerOfTen = selectPowerOfTen(unitValue); const selectedPowerOfTen = selectPowerOfTen(unitValue);
const newVal = Math.round(unitValue / selectedPowerOfTen.divider); const scaledValue = unitValue / selectedPowerOfTen.divider;
const newVal = scaledValue >= 100 ? Math.round(scaledValue) : scaledValue.toPrecision(3);
return `${newVal}${selectedPowerOfTen.unit}`; return `${newVal}${selectedPowerOfTen.unit}`;
} }
}, },
@ -179,6 +184,16 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
}; };
} }
@HostListener('window:resize', ['$event'])
onResize(): void {
const isSmallScreen = window.innerWidth < 450;
if (this.smallScreen !== isSmallScreen) {
this.smallScreen = isSmallScreen;
this.prepareChart();
this.mountChart();
}
}
ngOnDestroy(): void { ngOnDestroy(): void {
this.rateUnitSub.unsubscribe(); this.rateUnitSub.unsubscribe();
} }