mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-25 07:07:36 +01:00
Code Issues Projects Releases Wiki Activity

Adding missing loading spinner to L-BTC peg graph

Browse source 
fixes #955
This commit is contained in:
softsimon 2021-11-28 15:44:42 +04:00
parent 571bf3fa64
commit 7e55e836fd
No known key found for this signature in database
GPG key ID: 488D7DCFB5A430D7
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
View file

@ -1 +1,4 @@
<div class="echarts" echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions"></div> <div class="echarts" echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>

26
frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
View file

@ -1,14 +1,22 @@
import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core'; import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
import { formatDate, formatNumber } from '@angular/common'; import { formatDate, formatNumber } from '@angular/common';
import { EChartsOption } from 'echarts'; import { EChartsOption } from 'echarts';
@Component({ @Component({
selector: 'app-lbtc-pegs-graph', selector: 'app-lbtc-pegs-graph',
styles: [`::ng-deep .tx-wrapper-tooltip-chart { width: 135px; }`], styles: [`
::ng-deep .tx-wrapper-tooltip-chart { width: 135px; }
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 16px);
z-index: 100;
}
`],
templateUrl: './lbtc-pegs-graph.component.html', templateUrl: './lbtc-pegs-graph.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class LbtcPegsGraphComponent implements OnChanges { export class LbtcPegsGraphComponent implements OnInit, OnChanges {
@Input() data: any; @Input() data: any;
pegsChartOptions: EChartsOption; pegsChartOptions: EChartsOption;
@ -17,6 +25,7 @@ export class LbtcPegsGraphComponent implements OnChanges {
top: number | string = '20'; top: number | string = '20';
left: number | string = '50'; left: number | string = '50';
template: ('widget' | 'advanced') = 'widget'; template: ('widget' | 'advanced') = 'widget';
isLoading = true;
pegsChartOption: EChartsOption = {}; pegsChartOption: EChartsOption = {};
pegsChartInitOption = { pegsChartInitOption = {
@ -27,6 +36,10 @@ export class LbtcPegsGraphComponent implements OnChanges {
@Inject(LOCALE_ID) private locale: string, @Inject(LOCALE_ID) private locale: string,
) { } ) { }
ngOnInit() {
this.isLoading = true;
}
ngOnChanges() { ngOnChanges() {
if (!this.data) { if (!this.data) {
return; return;
@ -34,6 +47,13 @@ export class LbtcPegsGraphComponent implements OnChanges {
this.pegsChartOptions = this.createChartOptions(this.data.series, this.data.labels); this.pegsChartOptions = this.createChartOptions(this.data.series, this.data.labels);
} }
rendered() {
if (!this.data) {
return;
}
this.isLoading = false;
}
createChartOptions(series: number[], labels: string[]): EChartsOption { createChartOptions(series: number[], labels: string[]): EChartsOption {
return { return {
grid: { grid: {