-
+
-
Lightning Network History
-
-
+
+
Lightning Network History
+
+
+
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
index e91f7606a..052ea6227 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -20,6 +20,19 @@
}
}
+.fixed-mempool-graph {
+ height: 330px;
+}
+
+.mempool-graph, .fixed-mempool-graph {
+ @media (min-width: 768px) {
+ height: 345px;
+ }
+ @media (min-width: 992px) {
+ height: 442px;
+ }
+}
+
.card-title {
font-size: 1rem;
color: #4a68b9;
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
index dece98ddb..63cdab42d 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { share } from 'rxjs/operators';
import { INodesRanking, INodesStatistics } from '../../interfaces/node-api.interface';
@@ -16,6 +16,7 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
statistics$: Observable
;
nodesRanking$: Observable;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+ graphHeight: number = 300;
constructor(
private lightningApiService: LightningApiService,
@@ -24,6 +25,8 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
) { }
ngOnInit(): void {
+ this.onResize();
+
this.seoService.setTitle($localize`:@@142e923d3b04186ac6ba23387265d22a2fa404e0:Lightning Explorer`);
this.seoService.setDescription($localize`:@@meta.description.lightning.dashboard:Get stats on the Lightning network (aggregate capacity, connectivity, etc), Lightning nodes (channels, liquidity, etc) and Lightning channels (status, fees, etc).`);
@@ -34,4 +37,15 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
ngAfterViewInit(): void {
this.stateService.focusSearchInputDesktop();
}
+
+ @HostListener('window:resize', ['$event'])
+ onResize(): void {
+ if (window.innerWidth >= 992) {
+ this.graphHeight = 340;
+ } else if (window.innerWidth >= 768) {
+ this.graphHeight = 245;
+ } else {
+ this.graphHeight = 210;
+ }
+ }
}
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
index 908b98fda..915f2f7ec 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
@@ -35,7 +35,7 @@
-
+
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
index 0e6fb056d..aaea41265 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -56,7 +56,6 @@
}
.chart-widget {
width: 100%;
- height: 145px;
}
.pool-distribution {
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
index 30f786b16..82c74395b 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding, OnChanges, SimpleChanges } from '@angular/core';
import { echarts, EChartsOption, LineSeriesOption } from '../../graphs/echarts';
import { Observable } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
@@ -26,7 +26,8 @@ import { isMobile } from '../../shared/common.utils';
`],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class NodesNetworksChartComponent implements OnInit {
+export class NodesNetworksChartComponent implements OnInit, OnChanges {
+ @Input() height: number = 150;
@Input() right: number | string = 45;
@Input() left: number | string = 45;
@Input() widget = false;
@@ -47,6 +48,9 @@ export class NodesNetworksChartComponent implements OnInit {
timespan = '';
chartInstance: any = undefined;
+ chartData: any;
+ maxYAxis: number;
+
constructor(
@Inject(LOCALE_ID) public locale: string,
private seoService: SeoService,
@@ -71,44 +75,49 @@ export class NodesNetworksChartComponent implements OnInit {
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
- this.nodesNetworkObservable$ = 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;
- const chartData = {
- tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
- clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
- unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
- clearnet_tor_nodes: data.map(val => [val.added * 1000, val.clearnet_tor_nodes]),
- };
- let maxYAxis = 0;
- for (const day of data) {
- maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes + day.clearnet_tor_nodes);
- }
- maxYAxis = Math.ceil(maxYAxis / 3000) * 3000;
- this.prepareChartOptions(chartData, maxYAxis);
- this.isLoading = false;
- }),
- map((response) => {
- return {
- days: parseInt(response.headers.get('x-total-count'), 10),
- };
- }),
- );
- }),
- share()
- );
+ this.nodesNetworkObservable$ = 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 = {
+ tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
+ clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
+ unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
+ clearnet_tor_nodes: data.map(val => [val.added * 1000, val.clearnet_tor_nodes]),
+ };
+ this.maxYAxis = 0;
+ for (const day of data) {
+ this.maxYAxis = Math.max(this.maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes + day.clearnet_tor_nodes);
+ }
+ this.maxYAxis = Math.ceil(this.maxYAxis / 3000) * 3000;
+ this.prepareChartOptions(this.chartData, this.maxYAxis);
+ 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.maxYAxis != null) {
+ this.prepareChartOptions(this.chartData, this.maxYAxis);
+ }
}
prepareChartOptions(data, maxYAxis): void {
@@ -228,7 +237,7 @@ export class NodesNetworksChartComponent implements OnInit {
title: title,
animation: false,
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,
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
index 259c3503a..794ced684 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@@ -39,7 +39,7 @@
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
index c885e4839..923a8a3e4 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -56,7 +56,6 @@
}
.chart-widget {
width: 100%;
- height: 145px;
}
.pool-distribution {
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
index 0e4f66ca0..8bcf01015 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@@ -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,