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

Expand lightning dashboard widgets & improve responsiveness

Browse Source
This commit is contained in:
Mononaut
2024-02-08 00:00:06 +00:00
parent ce7a007b62
commit ca2c5d3628
11 changed files with 134 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@
</form>
</div>
<div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
<div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>

1
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
View File

@@ -56,7 +56,6 @@
}
.chart-widget {
width: 100%;
height: 145px;
}
.pool-distribution {

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

@@ -1,6 +1,6 @@
import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding, OnChanges, SimpleChanges } from '@angular/core';
import { echarts, EChartsOption } from '../../graphs/echarts';
import { Observable } from 'rxjs';
import { Observable, combineLatest, fromEvent } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
import { SeoService } from '../../services/seo.service';
import { formatNumber } from '@angular/common';
@@ -25,7 +25,8 @@ import { isMobile } from '../../shared/common.utils';
}
`],
})
export class LightningStatisticsChartComponent implements OnInit {
export class LightningStatisticsChartComponent implements OnInit, OnChanges {
@Input() height: number = 150;
@Input() right: number | string = 45;
@Input() left: number | string = 45;
@Input() widget = false;
@@ -37,6 +38,7 @@ export class LightningStatisticsChartComponent implements OnInit {
chartInitOptions = {
renderer: 'svg',
};
chartData: any;
@HostBinding('attr.dir') dir = 'ltr';
@@ -70,36 +72,42 @@ export class LightningStatisticsChartComponent implements OnInit {
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
this.capacityObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
.pipe(
startWith(this.miningWindowPreference),
switchMap((timespan) => {
this.timespan = timespan;
if (!this.widget && !firstRun) {
this.storageService.setValue('lightningWindowPreference', timespan);
}
firstRun = false;
this.miningWindowPreference = timespan;
this.isLoading = true;
return this.lightningApiService.cachedRequest(this.lightningApiService.listStatistics$, 250, timespan)
.pipe(
tap((response:any) => {
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),
};
}),
);
}),
share(),
);
this.capacityObservable$ = this.radioGroupForm.get('dateSpan').valueChanges.pipe(
startWith(this.miningWindowPreference),
switchMap((timespan) => {
this.timespan = timespan;
if (!this.widget && !firstRun) {
this.storageService.setValue('lightningWindowPreference', timespan);
}
firstRun = false;
this.miningWindowPreference = timespan;
this.isLoading = true;
return this.lightningApiService.cachedRequest(this.lightningApiService.listStatistics$, 250, timespan)
.pipe(
tap((response:any) => {
const data = response.body;
this.chartData = {
channel_count: data.map(val => [val.added * 1000, val.channel_count]),
capacity: data.map(val => [val.added * 1000, val.total_capacity]),
};
this.prepareChartOptions(this.chartData);
this.isLoading = false;
}),
map((response) => {
return {
days: parseInt(response.headers.get('x-total-count'), 10),
};
}),
);
}),
share(),
);
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.height && this.chartData) {
this.prepareChartOptions(this.chartData);
}
}
prepareChartOptions(data): void {
@@ -138,7 +146,7 @@ export class LightningStatisticsChartComponent implements OnInit {
]),
],
grid: {
height: this.widget ? 90 : undefined,
height: this.widget ? ((this.height || 120) - 60) : undefined,
top: this.widget ? 20 : 40,
bottom: this.widget ? 0 : 70,
right: (isMobile() && this.widget) ? 35 : this.right,