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

Merge pull request #959 from mempool/simon/lbtc-loading-spinner

Browse Source 
Adding missing loading spinner to L-BTC peg graph
This commit is contained in:
wiz 2021-11-28 12:13:23 +00:00 committed by GitHub
commit 6113d3a5bf
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: {