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

Merge branch 'master' into nymkappa/feature/node-ranking-page

Browse Source
This commit is contained in:
wiz
2022-08-19 03:51:55 +09:00
committed by GitHub
parent 4622a98fb7 c3f5b28016
commit 6fde87f85e
11 changed files with 223 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
View File

@@ -3,21 +3,24 @@
<div *ngIf="widget">
<div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward">
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tagged-isp">Tagged ISPs</h5>
<p class="card-text">
{{ stats.taggedISP }}
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.clearnet-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising at least one clearnet IP address" placement="bottom">
<app-amount [satoshis]="stats.clearnetCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tagged-nodes">Tagged nodes</h5>
<p class="card-text" i18n-ngbTooltip="mining.pools-count-desc">
{{ stats.taggedNodeCount }}
<h5 class="card-title d-inline-block">Unknown capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.unknown-capacity-desc"
ngbTooltip="How much liquidity is running on nodes which ISP was not identifiable" placement="bottom">
<app-amount [satoshis]="stats.unknownCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tagged-capacity">Tagged capacity</h5>
<p class="card-text" i18n-ngbTooltip="mining.blocks-count-desc">
<app-amount [satoshis]="stats.taggedCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<h5 class="card-title d-inline-block">Tor capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.tor-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising only Tor addresses" placement="bottom">
<app-amount [satoshis]="stats.torCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
</div>
@@ -25,13 +28,13 @@
<div class="card-header" *ngIf="!widget">
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.nodes-per-isp">Lightning nodes per ISP</span>
<span i18n="lightning.top-100-isp-ln">Top 100 ISP hosting LN nodes</span>
<button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<small class="d-block" style="color: #ffffff66; min-height: 25px" i18n="lightning.tor-nodes-excluded">
<span *ngIf="!(showTorObservable$ | async)">(Tor nodes excluded)</span>
<span>(Tor nodes excluded)</span>
</small>
</div>
@@ -44,9 +47,8 @@
<div class="spinner-border text-light"></div>
</div>
<div class="d-flex toggle" *ngIf="!widget">
<app-toggle [textLeft]="'Show Tor'" [textRight]="" (toggleStatusChanged)="onTorToggleStatusChanged($event)"></app-toggle>
<app-toggle [textLeft]="'Nodes'" [textRight]="'Capacity'" (toggleStatusChanged)="onGroupToggleStatusChanged($event)"></app-toggle>
<div class="d-flex justify-content-md-end toggle" *ngIf="!widget">
<app-toggle [textLeft]="'Sort by nodes'" [textRight]="'capacity'" [checked]="true" (toggleStatusChanged)="onGroupToggleStatusChanged($event)"></app-toggle>
</div>
<table class="table table-borderless text-center m-auto" style="max-width: 900px" *ngIf="!widget">
@@ -59,16 +61,15 @@
<th class="capacity text-right pr-0" i18n="lightning.capacity">Capacity</th>
</tr>
</thead>
<tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerAsObservable$ | async) as asList">
<tr *ngFor="let asEntry of asList.data">
<td class="rank text-left pl-0">{{ asEntry.rank }}</td>
<tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerAsObservable$ | async) as result">
<tr *ngFor="let isp of result.ispRanking">
<td class="rank text-left pl-0">{{ isp[5] }}</td>
<td class="name text-left text-truncate">
<a *ngIf="asEntry.ispId" [routerLink]="[('/lightning/nodes/isp/' + asEntry.ispId) | relativeUrl]">{{ asEntry.name }}</a>
<span *ngIf="!asEntry.ispId">{{ asEntry.name }}</span>
<a [routerLink]="[('/lightning/nodes/isp/' + isp[0]) | relativeUrl]">{{ isp[1] }}</a>
</td>
<td class="share text-right">{{ asEntry.share }}%</td>
<td class="nodes text-right">{{ asEntry.count }}</td>
<td class="capacity text-right pr-0"><app-amount [satoshis]="asEntry.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount></td>
<td class="share text-right">{{ sortBy === 'capacity' ? isp[7] : isp[6] }}%</td>
<td class="nodes text-right">{{ isp[4] }}</td>
<td class="capacity text-right pr-0"><app-amount [satoshis]="isp[2]" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount></td>
</tr>
</tbody>
</table>

7
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
View File

@@ -149,7 +149,8 @@
}
.name {
width: 25%;
width: 35%;
max-width: 300px;
@media (max-width: 576px) {
width: 70%;
max-width: 150px;
@@ -159,14 +160,14 @@
}
.share {
width: 20%;
width: 15%;
@media (max-width: 576px) {
display: none
}
}
.nodes {
width: 20%;
width: 15%;
@media (max-width: 576px) {
width: 10%;
}

110
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
View File

@@ -26,14 +26,15 @@ export class NodesPerISPChartComponent implements OnInit {
renderer: 'svg',
};
timespan = '';
sortBy = 'capacity';
showUnknown = false;
chartInstance = undefined;
@HostBinding('attr.dir') dir = 'ltr';
nodesPerAsObservable$: Observable<any>;
showTorObservable$: Observable<boolean>;
groupBySubject = new Subject<boolean>();
showTorSubject = new Subject<boolean>();
sortBySubject = new Subject<boolean>();
showUnknownSubject = new Subject<boolean>();
constructor(
private apiService: ApiService,
@@ -48,32 +49,49 @@ export class NodesPerISPChartComponent implements OnInit {
ngOnInit(): void {
this.seoService.setTitle($localize`Lightning nodes per ISP`);
this.showTorObservable$ = this.showTorSubject.asObservable();
this.nodesPerAsObservable$ = combineLatest([
this.groupBySubject.pipe(startWith(false)),
this.showTorSubject.pipe(startWith(false)),
this.sortBySubject.pipe(startWith(true)),
])
.pipe(
switchMap((selectedFilters) => {
return this.apiService.getNodesPerAs(
selectedFilters[0] ? 'capacity' : 'node-count',
selectedFilters[1] // Show Tor nodes
)
this.sortBy = selectedFilters[0] ? 'capacity' : 'node-count';
return this.apiService.getNodesPerIsp()
.pipe(
tap(data => {
tap(() => {
this.isLoading = false;
this.prepareChartOptions(data);
}),
map(data => {
for (let i = 0; i < data.length; ++i) {
data[i].rank = i + 1;
let nodeCount = 0;
let totalCapacity = 0;
for (let i = 0; i < data.ispRanking.length; ++i) {
nodeCount += data.ispRanking[i][4];
totalCapacity += data.ispRanking[i][2];
data.ispRanking[i][5] = i;
}
for (let i = 0; i < data.ispRanking.length; ++i) {
data.ispRanking[i][6] = Math.round(data.ispRanking[i][4] / nodeCount * 10000) / 100;
data.ispRanking[i][7] = Math.round(data.ispRanking[i][2] / totalCapacity * 10000) / 100;
}
if (selectedFilters[0] === true) {
data.ispRanking.sort((a, b) => b[7] - a[7]);
} else {
data.ispRanking.sort((a, b) => b[6] - a[6]);
}
for (let i = 0; i < data.ispRanking.length; ++i) {
data.ispRanking[i][5] = i + 1;
}
this.prepareChartOptions(data.ispRanking);
return {
taggedISP: data.length,
taggedCapacity: data.reduce((partialSum, isp) => partialSum + isp.capacity, 0),
taggedNodeCount: data.reduce((partialSum, isp) => partialSum + isp.count, 0),
data: data.slice(0, 100),
taggedISP: data.ispRanking.length,
clearnetCapacity: data.clearnetCapacity,
unknownCapacity: data.unknownCapacity,
torCapacity: data.torCapacity,
ispRanking: data.ispRanking.slice(0, 100),
};
})
);
@@ -82,22 +100,22 @@ export class NodesPerISPChartComponent implements OnInit {
);
if (this.widget) {
this.showTorSubject.next(false);
this.groupBySubject.next(false);
this.sortBySubject.next(false);
}
}
generateChartSerieData(as): PieSeriesOption[] {
generateChartSerieData(ispRanking): PieSeriesOption[] {
let shareThreshold = 0.5;
if (this.widget && isMobile() || isMobile()) {
shareThreshold = 1;
} else if (this.widget) {
shareThreshold = 0.75;
}
const data: object[] = [];
let totalShareOther = 0;
let totalNodeOther = 0;
let nodeCountOther = 0;
let capacityOther = 0;
let edgeDistance: string | number = '10%';
if (isMobile() && this.widget) {
@@ -106,18 +124,19 @@ export class NodesPerISPChartComponent implements OnInit {
edgeDistance = 10;
}
as.forEach((as) => {
if (as.share < shareThreshold) {
totalShareOther += as.share;
totalNodeOther += as.count;
ispRanking.forEach((isp) => {
if ((this.sortBy === 'capacity' ? isp[7] : isp[6]) < shareThreshold) {
totalShareOther += this.sortBy === 'capacity' ? isp[7] : isp[6];
nodeCountOther += isp[4];
capacityOther += isp[2];
return;
}
data.push({
itemStyle: {
color: as.ispId === null ? '#7D4698' : undefined,
color: isp[0] === null ? '#7D4698' : undefined,
},
value: as.share,
name: as.name + (isMobile() || this.widget ? `` : ` (${as.share}%)`),
value: this.sortBy === 'capacity' ? isp[7] : isp[6],
name: isp[1].replace('&', '') + (isMobile() || this.widget ? `` : ` (${this.sortBy === 'capacity' ? isp[7] : isp[6]}%)`),
label: {
overflow: 'truncate',
width: isMobile() ? 75 : this.widget ? 125 : 250,
@@ -135,13 +154,13 @@ export class NodesPerISPChartComponent implements OnInit {
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">${as.name} (${as.share}%)</b><br>` +
$localize`${as.count.toString()} nodes<br>` +
$localize`${this.amountShortenerPipe.transform(as.capacity / 100000000, 2)} BTC capacity`
return `<b style="color: white">${isp[1]} (${isp[6]}%)</b><br>` +
$localize`${isp[4].toString()} nodes<br>` +
$localize`${this.amountShortenerPipe.transform(isp[2] / 100000000, 2)} BTC`
;
}
},
data: as.ispId,
data: isp[0],
} as PieSeriesOption);
});
@@ -167,8 +186,9 @@ export class NodesPerISPChartComponent implements OnInit {
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalNodeOther.toString() + ` nodes`;
return `<b style="color: white">Other (${totalShareOther.toFixed(2)}%)</b><br>` +
$localize`${nodeCountOther.toString()} nodes<br>` +
$localize`${this.amountShortenerPipe.transform(capacityOther / 100000000, 2)} BTC`;
}
},
data: 9999 as any,
@@ -177,7 +197,7 @@ export class NodesPerISPChartComponent implements OnInit {
return data;
}
prepareChartOptions(as): void {
prepareChartOptions(ispRanking): void {
let pieSize = ['20%', '80%']; // Desktop
if (isMobile() && !this.widget) {
pieSize = ['15%', '60%'];
@@ -194,11 +214,11 @@ export class NodesPerISPChartComponent implements OnInit {
series: [
{
zlevel: 0,
minShowLabelAngle: 1.8,
minShowLabelAngle: 0.9,
name: 'Lightning nodes',
type: 'pie',
radius: pieSize,
data: this.generateChartSerieData(as),
data: this.generateChartSerieData(ispRanking),
labelLine: {
lineStyle: {
width: 2,
@@ -259,16 +279,8 @@ export class NodesPerISPChartComponent implements OnInit {
this.chartInstance.setOption(this.chartOptions);
}
onTorToggleStatusChanged(e): void {
this.showTorSubject.next(e);
}
onGroupToggleStatusChanged(e): void {
this.groupBySubject.next(e);
}
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
this.sortBySubject.next(e);
}
}