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

Add Lightning charts in /graph

Browse Source
This commit is contained in:
nymkappa
2022-07-06 15:15:08 +02:00
committed by wiz
parent 138bef0807
commit ebc8a7ceb6
10 changed files with 154 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
View File

@@ -5,9 +5,43 @@
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(capacityObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.days >= 30">
<input ngbButton type="radio" [value]="'1m'" fragment="1m"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.days >= 90">
<input ngbButton type="radio" [value]="'3m'" fragment="3m"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.days >= 180">
<input ngbButton type="radio" [value]="'6m'" fragment="6m"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.days >= 365">
<input ngbButton type="radio" [value]="'1y'" fragment="1y"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.days >= 730">
<input ngbButton type="radio" [value]="'2y'" fragment="2y"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.days >= 1095">
<input ngbButton type="radio" [value]="'3y'" fragment="3y"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'all'" fragment="all"
[routerLink]="['/graphs/lightning/capacity' | relativeUrl]"> ALL
</label>
</div>
</form>
</div>
<div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>

30
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
import { EChartsOption, graphic } from 'echarts';
import { Observable } from 'rxjs';
import { startWith, switchMap, tap } from 'rxjs/operators';
import { map, startWith, switchMap, tap } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { formatNumber } from '@angular/common';
import { FormBuilder, FormGroup } from '@angular/forms';
@@ -38,7 +38,7 @@ export class LightningStatisticsChartComponent implements OnInit {
@HostBinding('attr.dir') dir = 'ltr';
blockSizesWeightsObservable$: Observable<any>;
capacityObservable$: Observable<any>;
isLoading = true;
formatNumber = formatNumber;
timespan = '';
@@ -57,34 +57,44 @@ export class LightningStatisticsChartComponent implements OnInit {
ngOnInit(): void {
let firstRun = true;
this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
if (this.widget) {
this.miningWindowPreference = '1y';
} else {
this.seoService.setTitle($localize`Channels and Capacity`);
this.miningWindowPreference = this.miningService.getDefaultTimespan('all');
}
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
this.radioGroupForm.get('dateSpan').valueChanges
this.capacityObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
.pipe(
startWith(this.miningWindowPreference),
switchMap((timespan) => {
this.timespan = timespan;
if (!firstRun) {
this.storageService.setValue('miningWindowPreference', timespan);
if (!this.widget && !firstRun) {
this.storageService.setValue('lightningWindowPreference', timespan);
}
firstRun = false;
this.miningWindowPreference = timespan;
this.isLoading = true;
return this.lightningApiService.listStatistics$()
return this.lightningApiService.listStatistics$(timespan)
.pipe(
tap((data) => {
tap((response) => {
const data = response.body;
this.prepareChartOptions({
channel_count: data.map(val => [val.added * 1000, val.channel_count]),
capacity: data.map(val => [val.added * 1000, val.total_capacity]),
});
this.isLoading = false;
}),
map((response) => {
return {
days: parseInt(response.headers.get('x-total-count'), 10),
};
}),
);
}),
).subscribe(() => {
});
)
}
prepareChartOptions(data) {