highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-26 17:51:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5099 from mempool/natsoni/graphs-cleanup

Browse Source 
Graphs loading indicators update
This commit is contained in:
softsimon 2024-05-25 12:36:40 +07:00 committed by GitHub
commit 46b5b26347
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 32 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
View File

@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="daysAvailable">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" formControlName="dateSpan"> 24H
</label>
@ -46,7 +46,7 @@
</div>
<div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
View File

@ -65,8 +65,3 @@ h5 {
font-size: 1rem;
color: var(--title-fg);
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

4
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
View File

@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" formControlName="dateSpan"> 24h
</label>
@ -63,7 +63,7 @@
</div>
<div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
View File

@ -139,8 +139,3 @@
max-width: 80px;
margin: 15px auto 3px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

4
frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
View File

@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
<input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" formControlName="dateSpan"> 1M
</label>
@ -37,7 +37,7 @@
</div>
<div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
View File

@ -60,8 +60,3 @@
height: 100%;
max-height: 270px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

2
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html
View File

@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 24h
</label>

5
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss
View File

@ -59,8 +59,3 @@
height: 100%;
max-height: 270px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

1
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
View File

@ -98,7 +98,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
this.storageService.setValue('miningWindowPreference', timespan);
this.timespan = timespan;
this.zoomTimeSpan = timespan;
this.isLoading = true;
return this.apiService.getHistoricalBlockFees$(timespan)
.pipe(
tap((response) => {

4
frontend/src/app/components/block-health-graph/block-health-graph.component.html
View File

@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 24h
</label>
@ -46,7 +46,7 @@
</div>
<div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/block-health-graph/block-health-graph.component.scss
View File

@ -60,8 +60,3 @@
height: 100%;
max-height: 270px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

4
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
View File

@ -11,7 +11,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
<input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 1M
</label>
@ -38,7 +38,7 @@
</div>
<div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
View File

@ -60,8 +60,3 @@
height: 100%;
max-height: 270px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

4
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
View File

@ -9,7 +9,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" formControlName="dateSpan"> 24h
</label>
@ -45,7 +45,7 @@
</div>
<div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
View File

@ -60,8 +60,3 @@
height: 100%;
max-height: 270px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

4
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -31,7 +31,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
<input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" [attr.data-cy]="'3m'" formControlName="dateSpan"> 3M
</label>
@ -55,7 +55,7 @@
</div>
<div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@ -113,8 +113,3 @@
max-width: 80px;
margin: 15px auto 3px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

4
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
View File

@ -11,7 +11,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
<input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" [attr.data-cy]="'6m'" formControlName="dateSpan"> 6M
</label>
@ -32,7 +32,7 @@
</div>
<div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

5
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@ -64,8 +64,3 @@
.loadingGraphs.widget {
top: 75%;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

2
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
View File

@ -1,5 +1,5 @@
<div class="echarts" *browserOnly echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>

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

@ -32,8 +32,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
@Input() template: ('widget' | 'advanced') = 'widget';
@Input() windowPreferenceOverride: string;
@Input() outlierCappingEnabled: boolean = false;
@Input() isLoading: boolean;
isLoading = true;
mempoolStatsChartOption: EChartsOption = {};
mempoolStatsChartInitOption = {
renderer: 'svg'
@ -52,8 +52,6 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
) { }
ngOnInit() {
this.isLoading = true;
this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
this.weightMode = rateUnits === 'wu';
if (this.data) {
@ -79,7 +77,6 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
if (!this.data) {
return;
}
this.isLoading = false;
}
/**
@ -226,7 +223,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
itemFormatted += `<div class="item">
<div class="indicator-container">${colorSpan(bestItem.color)}</div>
<div class="grow"></div>
<div class="value">${formatNumber(bestItem.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
<div class="value">${formatNumber(bestItem.value[1], this.locale, '1.0-0')} <span class="symbol">vB/s</span></div>
</div>`;
}
return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}"

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

@ -1,4 +1,5 @@
<div *browserOnly echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
<div *browserOnly echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions"
[options]="mempoolVsizeFeesOptions" [style]="{opacity: isLoading ? 0.5 : 1}"></div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>
</div>

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

@ -35,8 +35,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() template: ('widget' | 'advanced') = 'widget';
@Input() showZoom = true;
@Input() windowPreferenceOverride: string;
@Input() isLoading: boolean;
isLoading = true;
mempoolVsizeFeesData: any;
mempoolVsizeFeesOptions: EChartsOption;
mempoolVsizeFeesInitOptions = {
@ -65,7 +65,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
) { }
ngOnInit(): void {
this.isLoading = true;
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
this.isWidget = this.template === 'widget';
this.showCount = !this.isWidget && !this.hideCount;
@ -86,7 +85,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
if (!this.data) {
return;
}
this.isLoading = false;
}
onChartReady(myChart: any) {

6
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@ -40,7 +40,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup"
*ngIf="!widget && (miningStatsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<div class="btn-group btn-group-toggle" name="radioBasic">
<label class="btn btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/pools' | relativeUrl]" [attr.data-cy]="'24h'" formControlName="dateSpan"> 24h
</label>
@ -77,14 +77,14 @@
<div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
<div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div>
</div>
<table *ngIf="widget === false" class="table table-borderless text-center pools-table">
<table *ngIf="widget === false" class="table table-borderless text-center pools-table" [style]="{opacity: isLoading ? 0.5 : 1}">
<thead>
<tr>
<th class="d-none d-md-table-cell" i18n="mining.rank">Rank</th>

4
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@ -121,10 +121,6 @@
margin: 15px auto 3px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
td {
.difference {

5
frontend/src/app/components/statistics/statistics.component.html
View File

@ -94,13 +94,12 @@
</button>
</div>
</form>
<div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading && mempoolStats.length"></div>
</div>
<div class="card-body">
<div class="incoming-transactions-graph">
<app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [hideCount]="!showCount"
[limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="showCount ? 50 : 10"
[data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
[data]="mempoolStats && mempoolStats.length ? mempoolStats : null" [isLoading]="isLoading"></app-mempool-graph>
</div>
</div>
</div>
@ -128,7 +127,7 @@
<div class="card-body">
<div class="incoming-transactions-graph">
<app-incoming-transactions-graph #incominggraph [height]="500" [left]="65" [template]="'advanced'"
[data]="mempoolTransactionsWeightPerSecondData" [outlierCappingEnabled]="outlierCappingEnabled"></app-incoming-transactions-graph>
[data]="mempoolTransactionsWeightPerSecondData" [outlierCappingEnabled]="outlierCappingEnabled" [isLoading]="isLoading"></app-incoming-transactions-graph>
</div>
</div>
</div>

2
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -231,4 +231,4 @@
@media (max-width: 767px) {
display: block;
}
}
}

8
frontend/src/app/components/statistics/statistics.component.ts
View File

@ -26,8 +26,7 @@ export class StatisticsComponent implements OnInit {
network = '';
loading = true;
spinnerLoading = false;
isLoading = true;
feeLevels = feeLevels;
chartColors = chartColors;
filterSize = 100000;
@ -90,7 +89,7 @@ export class StatisticsComponent implements OnInit {
.pipe(
switchMap(() => {
this.timespan = this.radioGroupForm.controls.dateSpan.value;
this.spinnerLoading = true;
this.isLoading = true;
if (this.radioGroupForm.controls.dateSpan.value === '2h') {
this.websocketService.want(['blocks', 'live-2h-chart']);
return this.apiService.list2HStatistics$();
@ -131,8 +130,7 @@ export class StatisticsComponent implements OnInit {
.subscribe((mempoolStats: any) => {
this.mempoolStats = mempoolStats;
this.handleNewMempoolData(this.mempoolStats.concat([]));
this.loading = false;
this.spinnerLoading = false;
this.isLoading = false;
});
this.stateService.live2Chart$