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

Create world map of clearnet LN nodes and channels

Browse Source
This commit is contained in:
nymkappa
2022-07-21 22:43:12 +02:00
parent 9a915b6bf4
commit 31ee96a3c7
12 changed files with 329 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/graphs/graphs.component.html
View File

@@ -39,7 +39,9 @@
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-country' | relativeUrl]"
i18n="lightning.nodes-per-isp">Lightning nodes per country</a>
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-map' | relativeUrl]"
i18n="lightning.nodes-per-isp">Lightning nodes world map</a>
i18n="lightning.lightning.nodes-heatmap">Lightning nodes world map</a>
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-channels-map' | relativeUrl]"
i18n="lightning.nodes-channels-world-map">Lightning nodes channels world map</a>
</div>
</div>
</div>

5
frontend/src/app/graphs/graphs.routing.module.ts
View File

@@ -23,6 +23,7 @@ import { LightningStatisticsChartComponent } from '../lightning/statistics-chart
import { NodesPerISPChartComponent } from '../lightning/nodes-per-isp-chart/nodes-per-isp-chart.component';
import { NodesPerCountryChartComponent } from '../lightning/nodes-per-country-chart/nodes-per-country-chart.component';
import { NodesMap } from '../lightning/nodes-map/nodes-map.component';
import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels-map.component';
const browserWindow = window || {};
// @ts-ignore
@@ -114,6 +115,10 @@ const routes: Routes = [
path: 'lightning/nodes-map',
component: NodesMap,
},
{
path: 'lightning/nodes-channels-map',
component: NodesChannelsMap,
},
{
path: '',
redirectTo: 'mempool',

2
frontend/src/app/lightning/lightning.module.ts
View File

@@ -23,6 +23,7 @@ import { NodesPerCountry } from './nodes-per-country/nodes-per-country.component
import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
import { NodesPerCountryChartComponent } from '../lightning/nodes-per-country-chart/nodes-per-country-chart.component';
import { NodesMap } from '../lightning/nodes-map/nodes-map.component';
import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels-map.component';
@NgModule({
declarations: [
LightningDashboardComponent,
@@ -43,6 +44,7 @@ import { NodesMap } from '../lightning/nodes-map/nodes-map.component';
NodesPerISP,
NodesPerCountryChartComponent,
NodesMap,
NodesChannelsMap,
],
imports: [
CommonModule,

17
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html Normal file
View File

@@ -0,0 +1,17 @@
<div class="full-container">
<div class="card-header">
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.nodes-channels-world-map">Lightning nodes channels world map</span>
<button class="btn p-0 pl-2" style="margin: 0 0 4px 0px">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true" (click)="onSaveChart()"></fa-icon>
</button>
</div>
<small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div *ngIf="observable$ | async" class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
</div>
</div>

40
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss Normal file
View File

@@ -0,0 +1,40 @@
.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.full-container {
padding: 0px 15px;
width: 100%;
min-height: 500px;
height: calc(100% - 150px);
@media (max-width: 992px) {
height: 100%;
padding-bottom: 100px;
};
}
.chart {
width: 100%;
height: 100%;
padding-bottom: 20px;
padding-right: 10px;
@media (max-width: 992px) {
padding-bottom: 25px;
}
@media (max-width: 829px) {
padding-bottom: 50px;
}
@media (max-width: 767px) {
padding-bottom: 25px;
}
@media (max-width: 629px) {
padding-bottom: 55px;
}
@media (max-width: 567px) {
padding-bottom: 55px;
}
}

190
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts Normal file
View File

@@ -0,0 +1,190 @@
import { ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
import { SeoService } from 'src/app/services/seo.service';
import { ApiService } from 'src/app/services/api.service';
import { Observable, tap, zip } from 'rxjs';
import { AssetsService } from 'src/app/services/assets.service';
import { download } from 'src/app/shared/graphs.utils';
import { Router } from '@angular/router';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { StateService } from 'src/app/services/state.service';
import { EChartsOption, registerMap } from 'echarts';
import 'echarts-gl';
import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';
@Component({
selector: 'app-nodes-channels-map',
templateUrl: './nodes-channels-map.component.html',
styleUrls: ['./nodes-channels-map.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodesChannelsMap implements OnInit, OnDestroy {
observable$: Observable<any>;
chartInstance = undefined;
chartOptions: EChartsOption = {color: 'dark'};
chartInitOptions = {
renderer: 'canvas',
};
constructor(
private seoService: SeoService,
private apiService: ApiService,
private stateService: StateService,
private assetsService: AssetsService,
private router: Router,
private zone: NgZone,
) {
}
ngOnDestroy(): void {}
ngOnInit(): void {
this.seoService.setTitle($localize`Lightning nodes channels world map`);
this.observable$ = zip(
this.assetsService.getWorldMapJson$,
this.apiService.getChannelsGeo$(),
).pipe(tap((data) => {
registerMap('world', data[0]);
const channelsLoc = [];
const nodes = [];
for (const channel of data[1]) {
channelsLoc.push([[channel[2], channel[3]], [channel[6], channel[7]]]);
nodes.push({
publicKey: channel[0],
name: channel[1],
value: [channel[2], channel[3]],
});
nodes.push({
publicKey: channel[4],
name: channel[5],
value: [channel[6], channel[7]],
});
}
this.prepareChartOptions(nodes, channelsLoc);
}));
}
prepareChartOptions(nodes, channels) {
let title: object;
if (channels.length === 0) {
title = {
textStyle: {
color: 'grey',
fontSize: 15
},
text: $localize`No data to display yet`,
left: 'center',
top: 'center'
};
}
this.chartOptions = {
geo3D: {
map: 'world',
shading: 'color',
silent: true,
environment: '#000',
postEffect: {
enable: true,
bloom: {
intensity: 0.01,
}
},
viewControl: {
minDistance: 1,
distance: 60,
alpha: 89,
panMouseButton: 'left',
rotateMouseButton: 'right',
zoomSensivity: 0.5,
},
itemStyle: {
color: '#FFFFFF',
opacity: 0.02,
borderWidth: 1,
borderColor: 'black',
},
regionHeight: 0.01,
},
series: [
{
// @ts-ignore
type: 'lines3D',
coordinateSystem: 'geo3D',
blendMode: 'lighter',
lineStyle: {
width: 1,
opacity: 0.025,
},
data: channels
},
{
// @ts-ignore
type: 'scatter3D',
symbol: 'circle',
blendMode: 'lighter',
coordinateSystem: 'geo3D',
symbolSize: 3,
itemStyle: {
color: '#BBFFFF',
opacity: 1,
borderColor: '#FFFFFF00',
},
data: nodes,
emphasis: {
label: {
position: 'top',
// @ts-ignore
textStyle: {
color: 'white',
fontSize: 16,
},
formatter: function(value) {
return value.name;
},
show: true,
}
}
},
]
};
}
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {
if (e.data && e.data.publicKey) {
this.zone.run(() => {
const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/node/${e.data.publicKey}`);
this.router.navigate([url]);
});
}
});
}
onSaveChart() {
// @ts-ignore
const prevBottom = this.chartOptions.grid.bottom;
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 30;
this.chartOptions.backgroundColor = '#11131f';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `lightning-nodes-heatmap-clearnet-${Math.round(now.getTime() / 1000)}.svg`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
}

2
frontend/src/app/lightning/nodes-map/nodes-map.component.ts
View File

@@ -4,7 +4,7 @@ import { SeoService } from 'src/app/services/seo.service';
import { ApiService } from 'src/app/services/api.service';
import { combineLatest, Observable, tap } from 'rxjs';
import { AssetsService } from 'src/app/services/assets.service';
import { EChartsOption, MapSeriesOption, registerMap } from 'echarts';
import { EChartsOption, registerMap } from 'echarts';
import { download } from 'src/app/shared/graphs.utils';
import { Router } from '@angular/router';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';

4
frontend/src/app/services/api.service.ts
View File

@@ -266,4 +266,8 @@ export class ApiService {
getNodesPerCountry(): Observable<any> {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/countries');
}
getChannelsGeo$(): Observable<any> {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/channels-geo');
}
}