mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-18 05:12:35 +01:00
Code Issues 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 9a39d3207f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 { EChartsOption } from 'echarts';
@Component({
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',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LbtcPegsGraphComponent implements OnChanges {
export class LbtcPegsGraphComponent implements OnInit, OnChanges {
@Input() data: any;
pegsChartOptions: EChartsOption;
@ -17,6 +25,7 @@ export class LbtcPegsGraphComponent implements OnChanges {
top: number | string = '20';
left: number | string = '50';
template: ('widget' | 'advanced') = 'widget';
isLoading = true;
pegsChartOption: EChartsOption = {};
pegsChartInitOption = {
@ -27,6 +36,10 @@ export class LbtcPegsGraphComponent implements OnChanges {
@Inject(LOCALE_ID) private locale: string,
) { }
ngOnInit() {
this.isLoading = true;
}
ngOnChanges() {
if (!this.data) {
return;
@ -34,6 +47,13 @@ export class LbtcPegsGraphComponent implements OnChanges {
this.pegsChartOptions = this.createChartOptions(this.data.series, this.data.labels);
}
rendered() {
if (!this.data) {
return;
}
this.isLoading = false;
}
createChartOptions(series: number[], labels: string[]): EChartsOption {
return {
grid: {