Merge branch 'master' into nymkappa/bugfix/prediction-lablels
This commit is contained in:
10 files changed
+235
-2
No files matched your search
@@ -85,7 +85,7 @@ if (configContent && configContent.BASE_MODULE == "liquid") {
|
||||
});
|
||||
} else {
|
||||
PROXY_CONFIG.push({
|
||||
context: ['/resources/pools.json', '/resources/assets.json', '/resources/assets.minimal.json'],
|
||||
context: ['/resources/pools.json', '/resources/assets.json', '/resources/assets.minimal.json', '/resources/worldmap.json'],
|
||||
target: "https://mempool.space",
|
||||
secure: false,
|
||||
changeOrigin: true,
|
||||
|
||||
@@ -38,6 +38,8 @@
|
||||
i18n="lightning.nodes-per-isp">Lightning nodes per ISP</a>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,6 +22,7 @@ import { NodesNetworksChartComponent } from '../lightning/nodes-networks-chart/n
|
||||
import { LightningStatisticsChartComponent } from '../lightning/statistics-chart/lightning-statistics-chart.component';
|
||||
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';
|
||||
|
||||
const browserWindow = window || {};
|
||||
// @ts-ignore
|
||||
@@ -109,6 +110,10 @@ const routes: Routes = [
|
||||
path: 'lightning/nodes-per-country',
|
||||
component: NodesPerCountryChartComponent,
|
||||
},
|
||||
{
|
||||
path: 'lightning/nodes-map',
|
||||
component: NodesMap,
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'mempool',
|
||||
|
||||
@@ -22,6 +22,7 @@ import { NodesPerISPChartComponent } from './nodes-per-isp-chart/nodes-per-isp-c
|
||||
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';
|
||||
@NgModule({
|
||||
declarations: [
|
||||
LightningDashboardComponent,
|
||||
@@ -41,6 +42,7 @@ import { NodesPerCountryChartComponent } from '../lightning/nodes-per-country-ch
|
||||
NodesPerCountry,
|
||||
NodesPerISP,
|
||||
NodesPerCountryChartComponent,
|
||||
NodesMap,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@@ -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-heatmap">Lightning nodes world heat 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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
|
||||
import { mempoolFeeColors } from 'src/app/app.constants';
|
||||
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 { 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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nodes-map',
|
||||
templateUrl: './nodes-map.component.html',
|
||||
styleUrls: ['./nodes-map.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class NodesMap implements OnInit, OnDestroy {
|
||||
observable$: Observable<any>;
|
||||
|
||||
chartInstance = undefined;
|
||||
chartOptions: EChartsOption = {};
|
||||
chartInitOptions = {
|
||||
renderer: 'svg',
|
||||
};
|
||||
|
||||
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 world map`);
|
||||
|
||||
this.observable$ = combineLatest([
|
||||
this.assetsService.getWorldMapJson$,
|
||||
this.apiService.getNodesPerCountry()
|
||||
]).pipe(tap((data) => {
|
||||
registerMap('world', data[0]);
|
||||
|
||||
const countries = [];
|
||||
let max = 0;
|
||||
for (const country of data[1]) {
|
||||
countries.push({
|
||||
name: country.name.en,
|
||||
value: country.count,
|
||||
iso: country.iso.toLowerCase(),
|
||||
});
|
||||
max = Math.max(max, country.count);
|
||||
}
|
||||
|
||||
this.prepareChartOptions(countries, max);
|
||||
}));
|
||||
}
|
||||
|
||||
prepareChartOptions(countries, max) {
|
||||
let title: object;
|
||||
if (countries.length === 0) {
|
||||
title = {
|
||||
textStyle: {
|
||||
color: 'grey',
|
||||
fontSize: 15
|
||||
},
|
||||
text: $localize`No data to display yet`,
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
};
|
||||
}
|
||||
|
||||
this.chartOptions = {
|
||||
title: countries.length === 0 ? title : undefined,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(17, 19, 31, 1)',
|
||||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: function(country) {
|
||||
if (country.data === undefined) {
|
||||
return `<b style="color: white">${country.name}<br>0 nodes</b><br>`;
|
||||
} else {
|
||||
return `<b style="color: white">${country.data.name}<br>${country.data.value} nodes</b><br>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
left: 'right',
|
||||
show: true,
|
||||
min: 1,
|
||||
max: max,
|
||||
text: ['High', 'Low'],
|
||||
calculable: true,
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
inRange: {
|
||||
color: mempoolFeeColors.map(color => `#${color}`),
|
||||
},
|
||||
},
|
||||
series: {
|
||||
type: 'map',
|
||||
map: 'world',
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#FDD835',
|
||||
}
|
||||
},
|
||||
data: countries,
|
||||
itemStyle: {
|
||||
areaColor: '#5A6A6D'
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
onChartInit(ec) {
|
||||
if (this.chartInstance !== undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartInstance = ec;
|
||||
|
||||
this.chartInstance.on('click', (e) => {
|
||||
if (e.data && e.data.value > 0) {
|
||||
this.zone.run(() => {
|
||||
const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/nodes/country/${e.data.iso}`);
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
|
||||
@@ -14,6 +14,7 @@ export class AssetsService {
|
||||
|
||||
getAssetsJson$: Observable<{ array: AssetExtended[]; objects: any}>;
|
||||
getAssetsMinimalJson$: Observable<any>;
|
||||
getWorldMapJson$: Observable<any>;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
@@ -65,5 +66,7 @@ export class AssetsService {
|
||||
}),
|
||||
shareReplay(1),
|
||||
);
|
||||
|
||||
this.getWorldMapJson$ = this.httpClient.get(apiBaseUrl + '/resources/worldmap.json').pipe(shareReplay());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"geometry":{"type":"Polygon","coordinates":[[[47.97822265625001,7.9970703125],[46.97822265625001,7.9970703125],[43.98378906250002,9.008837890624989],[43.482519531250006,9.379492187499991],[43.181640625,9.879980468749991],[42.84160156250002,10.203076171874997],[42.65644531250001,10.6],[42.92275390625002,10.999316406249989],[43.24599609375002,11.499804687499989],[43.85273437500001,10.784277343749991],[44.38652343750002,10.430224609374989],[44.94296875,10.43671875],[45.81669921875002,10.835888671874997],[46.565039062500006,10.745996093749994],[47.40498046875001,11.174023437499997],[48.01923828125001,11.139355468749997],[48.57255859375002,11.320507812499997],[48.938574218750006,11.258447265624994],[50.11005859375001,11.529296875],[50.79228515625002,11.983691406249989],[51.2548828125,11.830712890624994],[51.08427734375002,11.335644531249997],[51.140625,10.656884765624994],[51.031835937500006,10.444775390624997],[51.19296875,10.554638671874997],[51.390234375,10.422607421875],[50.93007812500002,10.33554687499999],[50.825,9.428173828124997],[50.10283203125002,8.199804687499991],[49.85205078125,7.962548828124994],[49.234960937500006,6.77734375],[49.04931640625,6.173632812499989],[47.97529296875001,4.497021484374997],[46.87880859375002,3.28564453125],[46.05117187500002,2.475146484374989],[44.92021484375002,1.81015625],[43.71757812500002,0.857861328124997],[41.97988281250002,-0.973046875],[41.53271484375,-1.6953125],[41.521875,-1.572265625],[41.42695312500001,-1.449511718750003],[41.24980468750002,-1.220507812500003],[40.97871093750001,-0.870312500000011],[40.964453125,2.814648437499997],[41.341796875,3.20166015625],[41.61347656250001,3.590478515624994],[41.88398437500001,3.977734375],[41.91533203125002,4.031298828124989],[42.02412109375001,4.137939453125],[42.85664062500001,4.32421875],[43.12568359375001,4.644482421874997],[43.58349609375,4.85498046875],[43.988867187500006,4.950537109374991],[44.940527343750006,4.912011718749994],[47.97822265625001,7.9970703125]]]},"properties":{"name":"Somalia","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[9.579979133936737,47.05856388629306],[9.409458596647225,47.02019676540292],[9.46249431093294,47.09010747968864],[9.46249431093294,47.19858962254578],[9.527658197470123,47.27026989773668],[9.579979133936737,47.05856388629306]]]},"properties":{"name":"Liechtenstein","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[-8.683349609375,27.77800740805682],[-13.038761787013554,27.81190166624856],[-12.948925781249926,27.914160156250034],[-11.552685546874955,28.31010742187496],[-10.486474609374994,29.06494140625],[-10.200585937499994,29.380371093750057],[-9.667089843749949,30.10927734375005],[-9.652929687499977,30.447558593750045],[-9.875488281249943,30.717919921874966],[-9.80869140624992,31.42460937499996],[-9.347460937499932,32.086376953124955],[-9.245849609375,32.572460937499955],[-8.512841796874994,33.25244140625003],[-6.900976562499949,33.96904296874999],[-6.353125,34.77607421875001],[-5.924804687499943,35.78579101562502],[-5.277832031249943,35.90273437500002],[-5.252685546874972,35.61474609374997],[-4.628320312499966,35.206396484375006],[-4.329980468749937,35.161474609375006],[-3.693261718749994,35.27998046874998],[-3.394726562499926,35.21181640625005],[-2.972216796874989,35.40727539062499],[-2.839941406249949,35.127832031249994],[-2.731396484374955,35.13520507812498],[-2.636816406249977,35.11269531250002],[-2.423730468749994,35.12348632812498],[-2.219628906249966,35.10419921874998],[-1.795605468749926,34.751904296874955],[-1.67919921875,33.31865234375002],[-1.550732421874955,33.073583984375006],[-1.510009765625,32.877636718749955],[-1.45,32.784814453124966],[-1.352148437499977,32.70336914062497],[-1.29638671875,32.67568359375002],[-1.188232421875,32.608496093750006],[-1.111035156249983,32.55229492187502],[-1.065527343749949,32.46831054687496],[-1.16259765625,32.399169921875],[-1.275341796874983,32.089013671874966],[-2.863427734374937,32.07470703124997],[-2.930859374999926,32.04252929687499],[-2.988232421874983,31.874218749999983],[-3.01738281249996,31.834277343750017],[-3.439794921874949,31.704541015624983],[-3.604589843749949,31.686767578125],[-3.700244140624989,31.70009765625005],[-3.768164062499977,31.689550781250034],[-3.837109374999983,31.512353515624994],[-3.833398437499937,31.197802734375045],[-3.626904296874955,31.000927734374983],[-4.148779296874977,30.8095703125],[-4.322851562500006,30.698876953124994],[-4.52915039062492,30.62553710937499],[-4.778515624999926,30.552392578124994],[-4.968261718749943,30.465380859375045],[-5.061914062499937,30.326416015625057],[-5.180126953124955,30.166162109374994],[-5.293652343749983,30.058642578125045],[-5.44877929687496,29.956933593750023],[-6.00429687499999,29.83125],[-6.479736328124943,29.82036132812499],[-6.520556640624989,29.659863281249983],[-6.59775390624992,29.578955078125006],[-6.635351562Line truncated
|
||||
Reference in new issue
Block a user