diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
index aab62f2c4..18edc6ab1 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
@@ -1,13 +1,16 @@
import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, NgZone, OnInit } from '@angular/core';
import { SeoService } from '../../services/seo.service';
import { ApiService } from '../../services/api.service';
-import { delay, Observable, switchMap, tap, zip } from 'rxjs';
+import { delay, Observable, of, switchMap, tap, zip } from 'rxjs';
import { AssetsService } from '../../services/assets.service';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
import { StateService } from '../../services/state.service';
import { EChartsOption, echarts } from '../../graphs/echarts';
import { isMobile } from '../../shared/common.utils';
+import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
+import { getFlagEmoji } from '../../shared/common.utils';
+import { lerpColor } from '../../shared/graphs.utils';
@Component({
selector: 'app-nodes-channels-map',
@@ -50,6 +53,7 @@ export class NodesChannelsMap implements OnInit {
private router: Router,
private zone: NgZone,
private activatedRoute: ActivatedRoute,
+ private amountShortenerPipe: AmountShortenerPipe,
) {
}
@@ -86,10 +90,12 @@ export class NodesChannelsMap implements OnInit {
return zip(
this.assetsService.getWorldMapJson$,
this.style !== 'channelpage' ? this.apiService.getChannelsGeo$(params.get('public_key') ?? undefined, this.style) : [''],
- [params.get('public_key') ?? undefined]
+ [params.get('public_key') ?? undefined],
+ this.style === 'widget' ? of(undefined) : this.apiService.getWorldNodes$(),
).pipe(tap((data) => {
echarts.registerMap('world', data[0]);
+ let maxLiquidity = data[3]?.maxLiquidity;
const channelsLoc = [];
const nodes = [];
const nodesPubkeys = {};
@@ -197,13 +203,24 @@ export class NodesChannelsMap implements OnInit {
this.zoom = -0.05 * distance + 8;
}
- this.prepareChartOptions(nodes, channelsLoc);
+ if (data[3]) {
+ for (const node of nodes) {
+ const foundNode = data[3].nodes.find((n) => n[2] === node[3]);
+ if (foundNode) {
+ node.push(foundNode[4], foundNode[5], foundNode[6]?.en, foundNode[7]);
+ maxLiquidity = Math.max(maxLiquidity ?? 0, foundNode[4]);
+ }
+ }
+ }
+
+ maxLiquidity = Math.max(1, maxLiquidity);
+ this.prepareChartOptions(nodes, channelsLoc, maxLiquidity);
}));
})
);
}
- prepareChartOptions(nodes, channels) {
+ prepareChartOptions(nodes, channels, maxLiquidity) {
let title: object;
if (channels.length === 0) {
if (!this.placeholder) {
@@ -267,7 +284,12 @@ export class NodesChannelsMap implements OnInit {
data: nodes,
coordinateSystem: 'geo',
geoIndex: 0,
- symbolSize: this.nodeSize,
+ symbolSize: (params) => {
+ if (maxLiquidity) {
+ return 10 * Math.pow(params[5] / maxLiquidity, 0.2) + 3;
+ }
+ return this.nodeSize;
+ },
tooltip: {
show: true,
backgroundColor: 'rgba(17, 19, 31, 1)',
@@ -281,11 +303,25 @@ export class NodesChannelsMap implements OnInit {
formatter: (value) => {
const data = value.data;
const alias = data[4].length > 0 ? data[4] : data[3].slice(0, 20);
- return `${alias}`;
- }
+ const liquidity = data[5] >= 100000000 ?
+ `${this.amountShortenerPipe.transform(data[5] / 100000000)} BTC` :
+ `${this.amountShortenerPipe.transform(data[5], 2)} sats`;
+
+ return `
+ ${alias}
+ ${liquidity}
` +
+ $localize`:@@205c1b86ac1cc419c4d0cca51fdde418c4ffdc20:${data[6]}:INTERPOLATION: channels` + `
+ ${getFlagEmoji(data[8])} ${data[7]}
+ `;
+ },
},
itemStyle: {
- color: 'white',
+ color: (params) => {
+ if (!maxLiquidity) {
+ return 'white';
+ }
+ return `${lerpColor('#1E88E5', '#D81B60', Math.pow(params.data[5] / maxLiquidity, 0.2))}`;
+ },
opacity: 1,
borderColor: 'black',
borderWidth: 0,
@@ -361,8 +397,6 @@ export class NodesChannelsMap implements OnInit {
}
chartOptions.series[0].itemStyle.borderWidth = nodeBorder;
- chartOptions.series[0].symbolSize += e.zoom > 1 ? speed * 15 : -speed * 15;
- chartOptions.series[0].symbolSize = Math.max(4, Math.min(7, chartOptions.series[0].symbolSize));
chartOptions.series[1].lineStyle.opacity += e.zoom > 1 ? speed : -speed;
chartOptions.series[1].lineStyle.width += e.zoom > 1 ? speed : -speed;