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

16
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
View File

@@ -34,9 +34,11 @@
<!-- ISP pie chart -->
<div class="col" style="margin-bottom: 1.47rem">
<div class="card graph-card">
<div class="card">
<div class="card-body pl-2 pr-2">
<app-nodes-per-isp-chart [widget]="true"></app-nodes-per-isp-chart>
<div class="mempool-graph">
<app-nodes-per-isp-chart [height]="graphHeight" [widget]="true"></app-nodes-per-isp-chart>
</div>
<div style="margin-top: 5px"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>
@@ -44,11 +46,13 @@
<!-- Network history -->
<div class="col">
<div class="card graph-card">
<div class="card">
<div class="card-body pl-2 pr-2 pt-1">
<h5 class="card-title mt-3" i18n="lightning.network-history">Lightning Network History</h5>
<app-lightning-statistics-chart [widget]=true></app-lightning-statistics-chart>
<app-nodes-networks-chart [widget]=true></app-nodes-networks-chart>
<div class="mempool-graph">
<h5 class="card-title mt-3" i18n="lightning.network-history">Lightning Network History</h5>
<app-lightning-statistics-chart [height]="(graphHeight / 1.7)" [widget]=true></app-lightning-statistics-chart>
<app-nodes-networks-chart [height]="(graphHeight / 1.7)" [widget]=true></app-nodes-networks-chart>
</div>
<div><a [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>

13
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
View File

@@ -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: 432px;
}
}
.card-title {
font-size: 1rem;
color: #4a68b9;

16
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
View File

@@ -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<INodesStatistics>;
nodesRanking$: Observable<INodesRanking>;
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 = 330;
} else if (window.innerWidth >= 768) {
this.graphHeight = 245;
} else {
this.graphHeight = 210;
}
}
}