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

Improve fee distribution legibility on small screens

Browse Source
This commit is contained in:
Mononaut 2023-11-11 08:57:55 +00:00
parent b5a5f0f608
commit 37605d5732
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
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';
@ -26,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;
@ -96,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',
@ -132,7 +133,7 @@ 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);
@ -142,7 +143,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
}, },
}, },
axisTick: { axisTick: {
show: true, show: !this.smallScreen,
} }
}, },
series: [{ series: [{
@ -153,6 +154,7 @@ 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;
@ -182,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();
} }