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

Merge branch 'master' into nymkappa/bugfix/block-audit-code-refactor

Browse Source
This commit is contained in:
Felipe Knorr Kuhn 2022-07-20 20:59:11 -07:00 committed by GitHub
commit 76b6d2a21b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
49 changed files with 1663 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
backend/src/api/database-migration.ts
View File

@ -4,7 +4,7 @@ import logger from '../logger';
import { Common } from './common'; import { Common } from './common';
class DatabaseMigration { class DatabaseMigration {
private static currentVersion = 32; private static currentVersion = 33;
private queryTimeout = 120000; private queryTimeout = 120000;
private statisticsAddedIndexed = false; private statisticsAddedIndexed = false;
private uniqueLogs: string[] = []; private uniqueLogs: string[] = [];
@ -302,6 +302,10 @@ class DatabaseMigration {
if (databaseSchemaVersion < 32 && isBitcoin == true) { if (databaseSchemaVersion < 32 && isBitcoin == true) {
await this.$executeQuery('ALTER TABLE `blocks_summaries` ADD `template` JSON DEFAULT "[]"'); await this.$executeQuery('ALTER TABLE `blocks_summaries` ADD `template` JSON DEFAULT "[]"');
} }
if (databaseSchemaVersion < 33 && isBitcoin == true) {
await this.$executeQuery('ALTER TABLE `geo_names` CHANGE `type` `type` enum("city","country","division","continent","as_organization", "country_iso_code") NOT NULL');
}
} }
/** /**

126
backend/src/api/explorer/nodes.api.ts
View File

@ -93,6 +93,132 @@ class NodesApi {
throw e; throw e;
} }
} }
public async $getNodesISP() {
try {
let query = `SELECT nodes.as_number as ispId, geo_names.names as names, COUNT(DISTINCT nodes.public_key) as nodesCount, SUM(capacity) as capacity
FROM nodes
JOIN geo_names ON geo_names.id = nodes.as_number
JOIN channels ON channels.node1_public_key = nodes.public_key OR channels.node2_public_key = nodes.public_key
GROUP BY as_number
ORDER BY COUNT(DISTINCT nodes.public_key) DESC
`;
const [nodesCountPerAS]: any = await DB.query(query);
query = `SELECT COUNT(*) as total FROM nodes WHERE as_number IS NOT NULL`;
const [nodesWithAS]: any = await DB.query(query);
const nodesPerAs: any[] = [];
for (const as of nodesCountPerAS) {
nodesPerAs.push({
ispId: as.ispId,
name: JSON.parse(as.names),
count: as.nodesCount,
share: Math.floor(as.nodesCount / nodesWithAS[0].total * 10000) / 100,
capacity: as.capacity,
})
}
return nodesPerAs;
} catch (e) {
logger.err(`Cannot get nodes grouped by AS. Reason: ${e instanceof Error ? e.message : e}`);
throw e;
}
}
public async $getNodesPerCountry(countryId: string) {
try {
const query = `
SELECT node_stats.public_key, node_stats.capacity, node_stats.channels, nodes.alias,
UNIX_TIMESTAMP(nodes.first_seen) as first_seen, UNIX_TIMESTAMP(nodes.updated_at) as updated_at,
geo_names_city.names as city
FROM node_stats
JOIN (
SELECT public_key, MAX(added) as last_added
FROM node_stats
GROUP BY public_key
) as b ON b.public_key = node_stats.public_key AND b.last_added = node_stats.added
JOIN nodes ON nodes.public_key = node_stats.public_key
JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country'
LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city'
WHERE geo_names_country.id = ?
ORDER BY capacity DESC
`;
const [rows]: any = await DB.query(query, [countryId]);
for (let i = 0; i < rows.length; ++i) {
rows[i].city = JSON.parse(rows[i].city);
}
return rows;
} catch (e) {
logger.err(`Cannot get nodes for country id ${countryId}. Reason: ${e instanceof Error ? e.message : e}`);
throw e;
}
}
public async $getNodesPerISP(ISPId: string) {
try {
const query = `
SELECT node_stats.public_key, node_stats.capacity, node_stats.channels, nodes.alias,
UNIX_TIMESTAMP(nodes.first_seen) as first_seen, UNIX_TIMESTAMP(nodes.updated_at) as updated_at,
geo_names_city.names as city, geo_names_country.names as country
FROM node_stats
JOIN (
SELECT public_key, MAX(added) as last_added
FROM node_stats
GROUP BY public_key
) as b ON b.public_key = node_stats.public_key AND b.last_added = node_stats.added
JOIN nodes ON nodes.public_key = node_stats.public_key
JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country'
LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city'
WHERE nodes.as_number = ?
ORDER BY capacity DESC
`;
const [rows]: any = await DB.query(query, [ISPId]);
for (let i = 0; i < rows.length; ++i) {
rows[i].country = JSON.parse(rows[i].country);
rows[i].city = JSON.parse(rows[i].city);
}
return rows;
} catch (e) {
logger.err(`Cannot get nodes for ISP id ${ISPId}. Reason: ${e instanceof Error ? e.message : e}`);
throw e;
}
}
public async $getNodesCountries() {
try {
let query = `SELECT geo_names.names as names, geo_names_iso.names as iso_code, COUNT(DISTINCT nodes.public_key) as nodesCount, SUM(capacity) as capacity
FROM nodes
JOIN geo_names ON geo_names.id = nodes.country_id AND geo_names.type = 'country'
JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
JOIN channels ON channels.node1_public_key = nodes.public_key OR channels.node2_public_key = nodes.public_key
GROUP BY country_id
ORDER BY COUNT(DISTINCT nodes.public_key) DESC
`;
const [nodesCountPerCountry]: any = await DB.query(query);
query = `SELECT COUNT(*) as total FROM nodes WHERE country_id IS NOT NULL`;
const [nodesWithAS]: any = await DB.query(query);
const nodesPerCountry: any[] = [];
for (const country of nodesCountPerCountry) {
nodesPerCountry.push({
name: JSON.parse(country.names),
iso: country.iso_code,
count: country.nodesCount,
share: Math.floor(country.nodesCount / nodesWithAS[0].total * 10000) / 100,
capacity: country.capacity,
})
}
return nodesPerCountry;
} catch (e) {
logger.err(`Cannot get nodes grouped by AS. Reason: ${e instanceof Error ? e.message : e}`);
throw e;
}
}
} }
export default new NodesApi(); export default new NodesApi();

85
backend/src/api/explorer/nodes.routes.ts
View File

@ -1,13 +1,19 @@
import config from '../../config'; import config from '../../config';
import { Application, Request, Response } from 'express'; import { Application, Request, Response } from 'express';
import nodesApi from './nodes.api'; import nodesApi from './nodes.api';
import DB from '../../database';
class NodesRoutes { class NodesRoutes {
constructor() { } constructor() { }
public initRoutes(app: Application) { public initRoutes(app: Application) {
app app
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/country/:country', this.$getNodesPerCountry)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/isp/:isp', this.$getNodesPerISP)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/search/:search', this.$searchNode) .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/search/:search', this.$searchNode)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/top', this.$getTopNodes) .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/top', this.$getTopNodes)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/isp', this.$getNodesISP)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/countries', this.$getNodesCountries)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key/statistics', this.$getHistoricalNodeStats) .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key/statistics', this.$getHistoricalNodeStats)
.get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key', this.$getNode) .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key', this.$getNode)
; ;
@ -56,6 +62,85 @@ class NodesRoutes {
res.status(500).send(e instanceof Error ? e.message : e); res.status(500).send(e instanceof Error ? e.message : e);
} }
} }
private async $getNodesISP(req: Request, res: Response) {
try {
const nodesPerAs = await nodesApi.$getNodesISP();
res.header('Pragma', 'public');
res.header('Cache-control', 'public');
res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
res.json(nodesPerAs);
} catch (e) {
res.status(500).send(e instanceof Error ? e.message : e);
}
}
private async $getNodesPerCountry(req: Request, res: Response) {
try {
const [country]: any[] = await DB.query(
`SELECT geo_names.id, geo_names_country.names as country_names
FROM geo_names
JOIN geo_names geo_names_country on geo_names.id = geo_names_country.id AND geo_names_country.type = 'country'
WHERE geo_names.type = 'country_iso_code' AND geo_names.names = ?`,
[req.params.country]
);
if (country.length === 0) {
res.status(404).send(`This country does not exist or does not host any lightning nodes on clearnet`);
return;
}
const nodes = await nodesApi.$getNodesPerCountry(country[0].id);
res.header('Pragma', 'public');
res.header('Cache-control', 'public');
res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
res.json({
country: JSON.parse(country[0].country_names),
nodes: nodes,
});
} catch (e) {
res.status(500).send(e instanceof Error ? e.message : e);
}
}
private async $getNodesPerISP(req: Request, res: Response) {
try {
const [isp]: any[] = await DB.query(
`SELECT geo_names.names as isp_name
FROM geo_names
WHERE geo_names.type = 'as_organization' AND geo_names.id = ?`,
[req.params.isp]
);
if (isp.length === 0) {
res.status(404).send(`This ISP does not exist or does not host any lightning nodes on clearnet`);
return;
}
const nodes = await nodesApi.$getNodesPerISP(req.params.isp);
res.header('Pragma', 'public');
res.header('Cache-control', 'public');
res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
res.json({
isp: JSON.parse(isp[0].isp_name),
nodes: nodes,
});
} catch (e) {
res.status(500).send(e instanceof Error ? e.message : e);
}
}
private async $getNodesCountries(req: Request, res: Response) {
try {
const nodesPerAs = await nodesApi.$getNodesCountries();
res.header('Pragma', 'public');
res.header('Cache-control', 'public');
res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
res.json(nodesPerAs);
} catch (e) {
res.status(500).send(e instanceof Error ? e.message : e);
}
}
} }
export default new NodesRoutes(); export default new NodesRoutes();

7
backend/src/tasks/lightning/sync-tasks/node-locations.ts
View File

@ -39,6 +39,13 @@ export async function $lookupNodeLocation(): Promise<void> {
[city.country?.geoname_id, JSON.stringify(city.country?.names)]); [city.country?.geoname_id, JSON.stringify(city.country?.names)]);
} }
// Store Country ISO code
if (city.country?.iso_code) {
await DB.query(
`INSERT IGNORE INTO geo_names (id, type, names) VALUES (?, 'country_iso_code', ?)`,
[city.country?.geoname_id, city.country?.iso_code]);
}
// Store Division // Store Division
if (city.subdivisions && city.subdivisions[0]) { if (city.subdivisions && city.subdivisions[0]) {
await DB.query( await DB.query(

6
backend/src/tasks/price-feeds/kraken-api.ts
View File

@ -62,7 +62,7 @@ class KrakenApi implements PriceFeed {
// CHF weekly price history goes back to timestamp 1575504000 (December 5, 2019) // CHF weekly price history goes back to timestamp 1575504000 (December 5, 2019)
// AUD weekly price history goes back to timestamp 1591833600 (June 11, 2020) // AUD weekly price history goes back to timestamp 1591833600 (June 11, 2020)
const priceHistory: any = {}; // map: timestamp -> Prices let priceHistory: any = {}; // map: timestamp -> Prices
for (const currency of this.currencies) { for (const currency of this.currencies) {
const response = await query(this.urlHist.replace('{GRANULARITY}', '10080') + currency); const response = await query(this.urlHist.replace('{GRANULARITY}', '10080') + currency);
@ -83,6 +83,10 @@ class KrakenApi implements PriceFeed {
} }
for (const time in priceHistory) { for (const time in priceHistory) {
if (priceHistory[time].USD === -1) {
delete priceHistory[time];
continue;
}
await PricesRepository.$savePrices(parseInt(time, 10), priceHistory[time]); await PricesRepository.$savePrices(parseInt(time, 10), priceHistory[time]);
} }

2
frontend/proxy.conf.js
View File

@ -85,7 +85,7 @@ if (configContent && configContent.BASE_MODULE == "liquid") {
}); });
} else { } else {
PROXY_CONFIG.push({ 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", target: "https://mempool.space",
secure: false, secure: false,
changeOrigin: true, changeOrigin: true,

11
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
View File

@ -2,10 +2,13 @@
<div class="full-container"> <div class="full-container">
<div class="card-header mb-0 mb-md-4"> <div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-fee-rates">Block Fee Rates</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.block-fee-rates">Block Fee Rates</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144"> <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

11
frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
View File

@ -2,10 +2,13 @@
<div class="full-container"> <div class="full-container">
<div class="card-header mb-0 mb-md-4"> <div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-fees">Block Fees</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.block-fees">Block Fees</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320"> <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

11
frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
View File

@ -2,10 +2,13 @@
<div class="full-container"> <div class="full-container">
<div class="card-header mb-0 mb-md-4"> <div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144"> <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

24
frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts
View File

@ -98,7 +98,21 @@ export class BlockPredictionGraphComponent implements OnInit {
} }
prepareChartOptions(data) { prepareChartOptions(data) {
let title: object;
if (data.length === 0) {
title = {
textStyle: {
color: 'grey',
fontSize: 15
},
text: $localize`No data to display yet. Try again later.`,
left: 'center',
top: 'center'
};
}
this.chartOptions = { this.chartOptions = {
title: data.length === 0 ? title : undefined,
animation: false, animation: false,
grid: { grid: {
top: 30, top: 30,
@ -133,14 +147,13 @@ export class BlockPredictionGraphComponent implements OnInit {
return tooltip; return tooltip;
} }
}, },
xAxis: { xAxis: data.length === 0 ? undefined : {
name: formatterXAxisLabel(this.locale, this.timespan), name: formatterXAxisLabel(this.locale, this.timespan),
nameLocation: 'middle', nameLocation: 'middle',
nameTextStyle: { nameTextStyle: {
padding: [10, 0, 0, 0], padding: [10, 0, 0, 0],
}, },
type: 'category', type: 'category',
boundaryGap: false,
axisLine: { onZero: true }, axisLine: { onZero: true },
axisLabel: { axisLabel: {
formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)), formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)),
@ -152,7 +165,7 @@ export class BlockPredictionGraphComponent implements OnInit {
}, },
data: data.map(prediction => prediction[0]) data: data.map(prediction => prediction[0])
}, },
yAxis: [ yAxis: data.length === 0 ? undefined : [
{ {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
@ -170,7 +183,7 @@ export class BlockPredictionGraphComponent implements OnInit {
}, },
}, },
], ],
series: [ series: data.length === 0 ? undefined : [
{ {
zlevel: 0, zlevel: 0,
name: $localize`Match rate`, name: $localize`Match rate`,
@ -183,9 +196,10 @@ export class BlockPredictionGraphComponent implements OnInit {
})), })),
type: 'bar', type: 'bar',
barWidth: '90%', barWidth: '90%',
barMaxWidth: 50,
}, },
], ],
dataZoom: [{ dataZoom: data.length === 0 ? undefined : [{
type: 'inside', type: 'inside',
realtime: true, realtime: true,
zoomLock: true, zoomLock: true,

11
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
View File

@ -3,10 +3,13 @@
<div class="full-container"> <div class="full-container">
<div class="card-header mb-0 mb-md-4"> <div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-rewards">Block Rewards</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.block-rewards">Block Rewards</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320"> <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

10
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
View File

@ -1,10 +1,12 @@
<div class="full-container"> <div class="full-container">
<div class="card-header mb-0 mb-md-4"> <div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-sizes-weights">Block Sizes and Weights</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

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

@ -31,9 +31,15 @@
<button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="lightning">Lightning</button> <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="lightning">Lightning</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1"> <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]" <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]"
i18n="lightning.nodes-networks">Nodes per network</a> i18n="lightning.nodes-networks">Lightning nodes per network</a>
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/capacity' | relativeUrl]" <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/capacity' | relativeUrl]"
i18n="lightning.capacity">Network capacity</a> i18n="lightning.capacity">Network capacity</a>
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]"
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> </div>
</div> </div>

10
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -23,10 +23,12 @@
</div> </div>
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''"> <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

14
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

@ -109,7 +109,7 @@ export class HashrateChartComponent implements OnInit {
while (hashIndex < data.hashrates.length) { while (hashIndex < data.hashrates.length) {
diffFixed.push({ diffFixed.push({
timestamp: data.hashrates[hashIndex].timestamp, timestamp: data.hashrates[hashIndex].timestamp,
difficulty: data.difficulty[data.difficulty.length - 1].difficulty difficulty: data.difficulty.length > 0 ? data.difficulty[data.difficulty.length - 1].difficulty : null
}); });
++hashIndex; ++hashIndex;
} }
@ -231,11 +231,15 @@ export class HashrateChartComponent implements OnInit {
} else if (tick.seriesIndex === 1) { // Difficulty } else if (tick.seriesIndex === 1) { // Difficulty
let difficultyPowerOfTen = hashratePowerOfTen; let difficultyPowerOfTen = hashratePowerOfTen;
let difficulty = tick.data[1]; let difficulty = tick.data[1];
if (this.isMobile()) { if (difficulty === null) {
difficultyPowerOfTen = selectPowerOfTen(tick.data[1]); difficultyString = `${tick.marker} ${tick.seriesName}: No data<br>`;
difficulty = Math.round(tick.data[1] / difficultyPowerOfTen.divider); } else {
if (this.isMobile()) {
difficultyPowerOfTen = selectPowerOfTen(tick.data[1]);
difficulty = Math.round(tick.data[1] / difficultyPowerOfTen.divider);
}
difficultyString = `${tick.marker} ${tick.seriesName}: ${formatNumber(difficulty, this.locale, '1.2-2')} ${difficultyPowerOfTen.unit}<br>`;
} }
difficultyString = `${tick.marker} ${tick.seriesName}: ${formatNumber(difficulty, this.locale, '1.2-2')} ${difficultyPowerOfTen.unit}<br>`;
} else if (tick.seriesIndex === 2) { // Hashrate MA } else if (tick.seriesIndex === 2) { // Hashrate MA
let hashrate = tick.data[1]; let hashrate = tick.data[1];
if (this.isMobile()) { if (this.isMobile()) {

13
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
View File

@ -2,11 +2,14 @@
<div class="full-container"> <div class="full-container">
<div class="card-header mb-0 mb-md-4"> <div class="card-header mb-0 mb-md-4">
<span i18n="mining.pools-dominance">Pools Dominance</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.pools-dominance">Pools Dominance</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920"> <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">

3
frontend/src/app/components/master-page/master-page.component.html
View File

@ -44,9 +44,6 @@
<li class="nav-item" routerLinkActive="active" id="btn-graphs"> <li class="nav-item" routerLinkActive="active" id="btn-graphs">
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a> <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
</li> </li>
<li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
<a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active" id="btn-docs"> <li class="nav-item" routerLinkActive="active" id="btn-docs">
<a class="nav-link" [routerLink]="['/docs' | relativeUrl ]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="documentation.title" title="Documentation"></fa-icon></a> <a class="nav-link" [routerLink]="['/docs' | relativeUrl ]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="documentation.title" title="Documentation"></fa-icon></a>
</li> </li>

10
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@ -32,10 +32,12 @@
</div> </div>
<div class="card-header" *ngIf="!widget"> <div class="card-header" *ngIf="!widget">
<span i18n="mining.pools">Pools Ranking</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.pools">Pools Ranking</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" <form [formGroup]="radioGroupForm" class="formRadioGroup"
*ngIf="!widget && (miningStatsObservable$ | async) as stats"> *ngIf="!widget && (miningStatsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

17
frontend/src/app/components/start/start.component.scss
View File

@ -27,15 +27,7 @@ $width: 500;
$height: 500; $height: 500;
// Create the explosion... // Create the explosion...
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $particles {
$box-shadow: $box-shadow,
random($width) - math.div($width, 1.2) + px
random($height) - math.div($height, 1.2) + px
hsl(random(360), 100%, 50%);
$box-shadow2: $box-shadow2, 0 0 #fff
}
@mixin keyframes ($animationName) { @mixin keyframes ($animationName) {
@-webkit-keyframes #{$animationName} { @-webkit-keyframes #{$animationName} {
@content; @content;
@ -103,7 +95,6 @@ body {
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 50%; border-radius: 50%;
box-shadow: $box-shadow2;
@include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards)); @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
} }
@ -112,9 +103,9 @@ body {
@include animation-duration((1.25s, 1.25s, 6.25s)); @include animation-duration((1.25s, 1.25s, 6.25s));
} }
@include keyframes(bang) { @keyframes bang{
to { to{
box-shadow:$box-shadow; box-shadow:-314.6666666667px -362.6666666667px red,-51.6666666667px 32.3333333333px #ff3700,-354.6666666667px -264.6666666667px #7b00ff,-319.6666666667px -73.6666666667px #00f7ff,-135.6666666667px -154.6666666667px #00ff48,57.3333333333px -402.6666666667px #0d00ff,-126.6666666667px -121.6666666667px #00ff7b,-335.6666666667px -5.6666666667px #00fff2,-291.6666666667px -.6666666667px #4f0,-126.6666666667px -187.6666666667px #7f0,-413.6666666667px -224.6666666667px #00ffbf,-283.6666666667px -391.6666666667px #00ff3c,-340.6666666667px -345.6666666667px #02f,-168.6666666667px -179.6666666667px #eaff00,7.3333333333px -153.6666666667px #26ff00,-175.6666666667px -234.6666666667px #8400ff,-324.6666666667px -254.6666666667px #0048ff,-335.6666666667px -9.6666666667px #00ff59,-304.6666666667px -8.6666666667px #001eff,-331.6666666667px -44.6666666667px #3f0,.3333333333px -49.6666666667px #0fc,-370.6666666667px -60.6666666667px #0015ff,29.3333333333px -13.6666666667px #8cff00,-168.6666666667px -281.6666666667px #f80,-48.6666666667px -61.6666666667px #f0b,33.3333333333px -113.6666666667px #ff00e1,-193.6666666667px -196.6666666667px #ff7b00,-14.6666666667px -24.6666666667px #ff0037,-149.6666666667px -273.6666666667px #0fa,-19.6666666667px -63.6666666667px #ff0004,13.3333333333px -227.6666666667px #7f0,-265.6666666667px -43.6666666667px #ff4800,-121.6666666667px -95.6666666667px #bfff00,-241.6666666667px -90.6666666667px #6200ff,-307.6666666667px -231.6666666667px #ff0062,78.3333333333px -128.6666666667px #ffbf00,27.3333333333px 44.3333333333px #95ff00,-81.6666666667px 6.3333333333px #ffc800,-343.6666666667px -247.6666666667px #2f0,-225.6666666667px -250.6666666667px #08f,-9.6666666667px -243.6666666667px #ff1a00,83.3333333333px -409.6666666667px #04f,-380.6666666667px -331.6666666667px #84ff00,-103.6666666667px -51.6666666667px #f02,-174.6666666667px -169.6666666667px #ffc800,20.3333333333px -191.6666666667px #ff0059,-40.6666666667px -55.6666666667px #0400ff,-199.6666666667px -66.6666666667px #ffd500,-358.6666666667px -5.6666666667px #0051ff,-84.6666666667px -289.6666666667px #f7ff00,-193.6666666667px -184.6666666667px #80f
} }
} }

29
frontend/src/app/components/statistics/statistics.component.html
View File

@ -3,14 +3,22 @@
<div> <div>
<div class="card mb-3"> <div class="card mb-3">
<div class="card-header"> <div class="card-header">
<i class="fa fa-area-chart"></i> <div class="d-flex d-md-block align-items-baseline">
<span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')"> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button> </button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" <form [formGroup]="radioGroupForm" class="formRadioGroup"
[class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()"> [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
<div *ngIf="!isMobile()" class="btn-group btn-group-toggle">
<label ngbButtonLabel class="btn-primary btn-sm mr-2">
<a [routerLink]="['/tv' | relativeUrl]" style="color: white">
<fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon>
</a>
</label>
</div>
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm"> <label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H
@ -84,11 +92,12 @@
<div> <div>
<div class="card mb-3"> <div class="card mb-3">
<div class="card-header"> <div class="card-header">
<i class="fa fa-area-chart"></i> <div class="d-flex d-md-block align-items-baseline">
<span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')"> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button> </button>
</div>
</div> </div>
<div class="card-body"> <div class="card-body">

4
frontend/src/app/components/statistics/statistics.component.ts
View File

@ -210,4 +210,8 @@ export class StatisticsComponent implements OnInit {
this.incomingGraph.onSaveChart(this.timespan); this.incomingGraph.onSaveChart(this.timespan);
} }
} }
isMobile() {
return (window.innerWidth <= 767.98);
}
} }

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

@ -20,6 +20,9 @@ import { TelevisionComponent } from '../components/television/television.compone
import { DashboardComponent } from '../dashboard/dashboard.component'; import { DashboardComponent } from '../dashboard/dashboard.component';
import { NodesNetworksChartComponent } from '../lightning/nodes-networks-chart/nodes-networks-chart.component'; import { NodesNetworksChartComponent } from '../lightning/nodes-networks-chart/nodes-networks-chart.component';
import { LightningStatisticsChartComponent } from '../lightning/statistics-chart/lightning-statistics-chart.component'; 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 || {}; const browserWindow = window || {};
// @ts-ignore // @ts-ignore
@ -99,6 +102,18 @@ const routes: Routes = [
path: 'lightning/capacity', path: 'lightning/capacity',
component: LightningStatisticsChartComponent, component: LightningStatisticsChartComponent,
}, },
{
path: 'lightning/nodes-per-isp',
component: NodesPerISPChartComponent,
},
{
path: 'lightning/nodes-per-country',
component: NodesPerCountryChartComponent,
},
{
path: 'lightning/nodes-map',
component: NodesMap,
},
{ {
path: '', path: '',
redirectTo: 'mempool', redirectTo: 'mempool',

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

@ -18,6 +18,11 @@ import { NodeStatisticsChartComponent } from './node-statistics-chart/node-stati
import { GraphsModule } from '../graphs/graphs.module'; import { GraphsModule } from '../graphs/graphs.module';
import { NodesNetworksChartComponent } from './nodes-networks-chart/nodes-networks-chart.component'; import { NodesNetworksChartComponent } from './nodes-networks-chart/nodes-networks-chart.component';
import { ChannelsStatisticsComponent } from './channels-statistics/channels-statistics.component'; import { ChannelsStatisticsComponent } from './channels-statistics/channels-statistics.component';
import { NodesPerISPChartComponent } from './nodes-per-isp-chart/nodes-per-isp-chart.component';
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({ @NgModule({
declarations: [ declarations: [
LightningDashboardComponent, LightningDashboardComponent,
@ -33,6 +38,11 @@ import { ChannelsStatisticsComponent } from './channels-statistics/channels-stat
LightningStatisticsChartComponent, LightningStatisticsChartComponent,
NodesNetworksChartComponent, NodesNetworksChartComponent,
ChannelsStatisticsComponent, ChannelsStatisticsComponent,
NodesPerISPChartComponent,
NodesPerCountry,
NodesPerISP,
NodesPerCountryChartComponent,
NodesMap,
], ],
imports: [ imports: [
CommonModule, CommonModule,

10
frontend/src/app/lightning/lightning.routing.module.ts
View File

@ -4,6 +4,8 @@ import { LightningDashboardComponent } from './lightning-dashboard/lightning-das
import { LightningWrapperComponent } from './lightning-wrapper/lightning-wrapper.component'; import { LightningWrapperComponent } from './lightning-wrapper/lightning-wrapper.component';
import { NodeComponent } from './node/node.component'; import { NodeComponent } from './node/node.component';
import { ChannelComponent } from './channel/channel.component'; import { ChannelComponent } from './channel/channel.component';
import { NodesPerCountry } from './nodes-per-country/nodes-per-country.component';
import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -22,6 +24,14 @@ const routes: Routes = [
path: 'channel/:short_id', path: 'channel/:short_id',
component: ChannelComponent, component: ChannelComponent,
}, },
{
path: 'nodes/country/:country',
component: NodesPerCountry,
},
{
path: 'nodes/isp/:isp',
component: NodesPerISP,
},
{ {
path: '**', path: '**',
redirectTo: '' redirectTo: ''

17
frontend/src/app/lightning/nodes-map/nodes-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-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>

40
frontend/src/app/lightning/nodes-map/nodes-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;
}
}

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

@ -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);
}
}

10
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
View File

@ -1,10 +1,12 @@
<div [class]="widget === false ? 'full-container' : ''"> <div [class]="widget === false ? 'full-container' : ''">
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''"> <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<span i18n="mining.nodes-networks">Nodes count by network</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="lightning.nodes-networks">Lightning nodes per network</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(nodesNetworkObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(nodesNetworkObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

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

@ -61,7 +61,7 @@ export class NodesNetworksChartComponent implements OnInit {
if (this.widget) { if (this.widget) {
this.miningWindowPreference = '1y'; this.miningWindowPreference = '1y';
} else { } else {
this.seoService.setTitle($localize`Nodes per network`); this.seoService.setTitle($localize`Lightning nodes per network`);
this.miningWindowPreference = this.miningService.getDefaultTimespan('all'); this.miningWindowPreference = this.miningService.getDefaultTimespan('all');
} }
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference }); this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });

58
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html Normal file
View File

@ -0,0 +1,58 @@
<div class="full-container h-100">
<div class="card-header">
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.nodes-per-country">Lightning nodes per country</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 style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div class="container pb-lg-0 bottom-padding">
<div class="pb-lg-5">
<div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
</div>
</div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<table class="table table-borderless text-center m-auto" style="max-width: 900px">
<thead>
<tr>
<th class="text-left rank" i18n="mining.rank">Rank</th>
<th class="text-left name" i18n="lightning.as-name">Name</th>
<th class="text-right share" i18n="lightning.share">Share</th>
<th class="text-right nodes" i18n="lightning.nodes-count">Nodes</th>
<th class="text-right capacity" i18n="lightning.capacity">Capacity</th>
</tr>
</thead>
<tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerCountryObservable$ | async) as countries">
<tr *ngFor="let country of countries">
<td class="text-left rank">{{ country.rank }}</td>
<td class="text-left text-truncate name">
<div class="d-flex">
<span style="font-size: 20px">{{ country.flag }}</span>
&nbsp;
<a class="mt-auto mb-auto" [routerLink]="['/lightning/nodes/country' | relativeUrl, country.iso]">{{ country.name.en }}</a>
</div>
</td>
<td class="text-right share">{{ country.share }}%</td>
<td class="text-right nodes">{{ country.count }}</td>
<td class="text-right capacity">
<app-amount *ngIf="country.capacity > 100000000; else smallchannel" [satoshis]="country.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<ng-template #smallchannel>
{{ country.capacity | amountShortener: 1 }}
<span class="sats" i18n="shared.sats">sats</span>
</ng-template>
</td>
</tr>
</tbody>
</table>
</div>
</div>

81
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss Normal file
View File

@ -0,0 +1,81 @@
.sats {
color: #ffffff66;
font-size: 12px;
top: 0px;
}
.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.full-container {
padding: 0px 15px;
width: 100%;
height: calc(100% - 140px);
@media (max-width: 992px) {
height: calc(100% - 190px);
};
@media (max-width: 575px) {
height: calc(100% - 230px);
};
}
.chart {
max-height: 400px;
@media (max-width: 767.98px) {
max-height: 230px;
margin-top: -35px;
}
}
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px
};
@media (max-width: 576px) {
padding-bottom: 65px
};
}
.rank {
width: 20%;
@media (max-width: 576px) {
display: none
}
}
.name {
width: 20%;
@media (max-width: 576px) {
width: 80%;
max-width: 150px;
padding-left: 0;
padding-right: 0;
}
}
.share {
width: 20%;
@media (max-width: 576px) {
display: none
}
}
.nodes {
width: 20%;
@media (max-width: 576px) {
width: 10%;
}
}
.capacity {
width: 20%;
@media (max-width: 576px) {
width: 10%;
max-width: 100px;
}
}

235
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts Normal file
View File

@ -0,0 +1,235 @@
import { ChangeDetectionStrategy, Component, OnInit, HostBinding, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { EChartsOption, PieSeriesOption } from 'echarts';
import { map, Observable, share, tap } from 'rxjs';
import { chartColors } from 'src/app/app.constants';
import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service';
import { download } from 'src/app/shared/graphs.utils';
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { getFlagEmoji } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-nodes-per-country-chart',
templateUrl: './nodes-per-country-chart.component.html',
styleUrls: ['./nodes-per-country-chart.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodesPerCountryChartComponent implements OnInit {
miningWindowPreference: string;
isLoading = true;
chartOptions: EChartsOption = {};
chartInitOptions = {
renderer: 'svg',
};
timespan = '';
chartInstance: any = undefined;
@HostBinding('attr.dir') dir = 'ltr';
nodesPerCountryObservable$: Observable<any>;
constructor(
private apiService: ApiService,
private seoService: SeoService,
private amountShortenerPipe: AmountShortenerPipe,
private zone: NgZone,
private stateService: StateService,
private router: Router,
) {
}
ngOnInit(): void {
this.seoService.setTitle($localize`Lightning nodes per country`);
this.nodesPerCountryObservable$ = this.apiService.getNodesPerCountry()
.pipe(
map(data => {
for (let i = 0; i < data.length; ++i) {
data[i].rank = i + 1;
data[i].iso = data[i].iso.toLowerCase();
data[i].flag = getFlagEmoji(data[i].iso);
}
return data.slice(0, 100);
}),
tap(data => {
this.isLoading = false;
this.prepareChartOptions(data);
}),
share()
);
}
generateChartSerieData(country) {
const shareThreshold = this.isMobile() ? 2 : 1;
const data: object[] = [];
let totalShareOther = 0;
let totalNodeOther = 0;
let edgeDistance: string | number = '10%';
if (this.isMobile()) {
edgeDistance = 0;
}
country.forEach((country) => {
if (country.share < shareThreshold) {
totalShareOther += country.share;
totalNodeOther += country.count;
return;
}
data.push({
value: country.share,
name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`),
label: {
overflow: 'truncate',
color: '#b1b1b1',
alignTo: 'edge',
edgeDistance: edgeDistance,
},
tooltip: {
show: !this.isMobile(),
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">${country.name.en} (${country.share}%)</b><br>` +
$localize`${country.count.toString()} nodes<br>` +
$localize`${this.amountShortenerPipe.transform(country.capacity / 100000000, 2)} BTC capacity`
;
}
},
data: country.iso,
} as PieSeriesOption);
});
// 'Other'
data.push({
itemStyle: {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: {
overflow: 'truncate',
color: '#b1b1b1',
alignTo: 'edge',
edgeDistance: edgeDistance
},
tooltip: {
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalNodeOther.toString() + ` nodes`;
},
},
data: 9999 as any
} as PieSeriesOption);
return data;
}
prepareChartOptions(country) {
let pieSize = ['20%', '80%']; // Desktop
if (this.isMobile()) {
pieSize = ['15%', '60%'];
}
this.chartOptions = {
animation: false,
color: chartColors,
tooltip: {
trigger: 'item',
textStyle: {
align: 'left',
}
},
series: [
{
zlevel: 0,
minShowLabelAngle: 3.6,
name: 'Mining pool',
type: 'pie',
radius: pieSize,
data: this.generateChartSerieData(country),
labelLine: {
lineStyle: {
width: 2,
},
length: this.isMobile() ? 1 : 20,
length2: this.isMobile() ? 1 : undefined,
},
label: {
fontSize: 14,
},
itemStyle: {
borderRadius: 1,
borderWidth: 1,
borderColor: '#000',
},
emphasis: {
itemStyle: {
shadowBlur: 40,
shadowColor: 'rgba(0, 0, 0, 0.75)',
},
labelLine: {
lineStyle: {
width: 4,
}
}
}
}
],
};
}
isMobile() {
return (window.innerWidth <= 767.98);
}
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {
if (e.data.data === 9999) { // "Other"
return;
}
this.zone.run(() => {
const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/nodes/country/${e.data.data}`);
this.router.navigate([url]);
});
});
}
onSaveChart() {
const now = new Date();
this.chartOptions.backgroundColor = '#11131f';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `lightning-nodes-per-country-${Math.round(now.getTime() / 1000)}.svg`);
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
}

45
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html Normal file
View File

@ -0,0 +1,45 @@
<div class="container-xl full-height" style="min-height: 335px">
<h1 class="float-left" i18n="lightning.nodes-in-country">
<span>Lightning nodes in {{ country?.name }}</span>
<span style="font-size: 50px; vertical-align:sub;"> {{ country?.flag }}</span>
</h1>
<div style="min-height: 295px">
<table class="table table-borderless">
<thead>
<th class="alias text-left" i18n="lightning.alias">Alias</th>
<th class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
<th class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
<th class="capacity text-right" i18n="lightning.capacity">Capacity</th>
<th class="channels text-right" i18n="lightning.channels">Channels</th>
<th class="city text-right" i18n="lightning.city">City</th>
</thead>
<tbody *ngIf="nodes$ | async as nodes">
<tr *ngFor="let node of nodes; let i= index; trackBy: trackByPublicKey">
<td class="alias text-left text-truncate">
<a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
</td>
<td class="timestamp-first text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.first_seen"></app-timestamp>
</td>
<td class="timestamp-update text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updated_at"></app-timestamp>
</td>
<td class="capacity text-right">
<app-amount *ngIf="node.capacity > 100000000; else smallchannel" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<ng-template #smallchannel>
{{ node.capacity | amountShortener: 1 }}
<span class="sats" i18n="shared.sats">sats</span>
</ng-template>
</td>
<td class="channels text-right">
{{ node.channels }}
</td>
<td class="city text-right text-truncate">
{{ node?.city?.en ?? '-' }}
</td>
</tbody>
</table>
</div>
</div>

56
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss Normal file
View File

@ -0,0 +1,56 @@
.container-xl {
max-width: 1400px;
padding-bottom: 100px;
}
.sats {
color: #ffffff66;
font-size: 12px;
top: 0px;
}
.alias {
width: 30%;
max-width: 400px;
padding-right: 70px;
@media (max-width: 576px) {
width: 50%;
max-width: 150px;
padding-right: 0px;
}
}
.timestamp-first {
width: 20%;
@media (max-width: 576px) {
display: none
}
}
.timestamp-update {
width: 16%;
@media (max-width: 576px) {
display: none
}
}
.capacity {
width: 10%;
@media (max-width: 576px) {
width: 25%;
}
}
.channels {
width: 10%;
@media (max-width: 576px) {
width: 25%;
}
}
.city {
max-width: 150px;
@media (max-width: 576px) {
display: none
}
}

41
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map, Observable } from 'rxjs';
import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
import { getFlagEmoji } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-nodes-per-country',
templateUrl: './nodes-per-country.component.html',
styleUrls: ['./nodes-per-country.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodesPerCountry implements OnInit {
nodes$: Observable<any>;
country: {name: string, flag: string};
constructor(
private apiService: ApiService,
private seoService: SeoService,
private route: ActivatedRoute,
) { }
ngOnInit(): void {
this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
.pipe(
map(response => {
this.country = {
name: response.country.en,
flag: getFlagEmoji(this.route.snapshot.params.country)
};
this.seoService.setTitle($localize`Lightning nodes in ${this.country.name}`);
return response.nodes;
})
);
}
trackByPublicKey(index: number, node: any) {
return node.public_key;
}
}

48
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html Normal file
View File

@ -0,0 +1,48 @@
<div class="full-container h-100">
<div class="card-header">
<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>
<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 style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div class="container pb-lg-0 bottom-padding">
<div class="pb-lg-5" *ngIf="nodesPerAsObservable$ | async">
<div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
</div>
</div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<table class="table table-borderless text-center m-auto" style="max-width: 900px">
<thead>
<tr>
<th class="rank text-left pl-0" i18n="mining.rank">Rank</th>
<th class="name text-left" i18n="lightning.isp">ISP</th>
<th class="share text-right" i18n="lightning.share">Share</th>
<th class="nodes text-right" i18n="lightning.nodes-count">Nodes</th>
<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">
<td class="rank text-left pl-0">{{ asEntry.rank }}</td>
<td class="name text-left text-truncate" style="max-width: 100px">
<a [routerLink]="[('/lightning/nodes/isp/' + asEntry.ispId) | relativeUrl]">{{ asEntry.name }}</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>
</tr>
</tbody>
</table>
</div>
</div>

75
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss Normal file
View File

@ -0,0 +1,75 @@
.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.full-container {
padding: 0px 15px;
width: 100%;
height: calc(100% - 140px);
@media (max-width: 992px) {
height: calc(100% - 190px);
};
@media (max-width: 575px) {
height: calc(100% - 230px);
};
}
.chart {
max-height: 400px;
@media (max-width: 767.98px) {
max-height: 230px;
margin-top: -35px;
}
}
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px
};
@media (max-width: 576px) {
padding-bottom: 65px
};
}
.rank {
width: 20%;
@media (max-width: 576px) {
display: none
}
}
.name {
width: 20%;
@media (max-width: 576px) {
width: 80%;
max-width: 150px;
padding-left: 0;
padding-right: 0;
}
}
.share {
width: 20%;
@media (max-width: 576px) {
display: none
}
}
.nodes {
width: 20%;
@media (max-width: 576px) {
width: 10%;
}
}
.capacity {
width: 20%;
@media (max-width: 576px) {
width: 10%;
max-width: 100px;
}
}

231
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts Normal file
View File

@ -0,0 +1,231 @@
import { ChangeDetectionStrategy, Component, OnInit, HostBinding, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { EChartsOption, PieSeriesOption } from 'echarts';
import { map, Observable, share, tap } from 'rxjs';
import { chartColors } from 'src/app/app.constants';
import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service';
import { download } from 'src/app/shared/graphs.utils';
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
@Component({
selector: 'app-nodes-per-isp-chart',
templateUrl: './nodes-per-isp-chart.component.html',
styleUrls: ['./nodes-per-isp-chart.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodesPerISPChartComponent implements OnInit {
miningWindowPreference: string;
isLoading = true;
chartOptions: EChartsOption = {};
chartInitOptions = {
renderer: 'svg',
};
timespan = '';
chartInstance: any = undefined;
@HostBinding('attr.dir') dir = 'ltr';
nodesPerAsObservable$: Observable<any>;
constructor(
private apiService: ApiService,
private seoService: SeoService,
private amountShortenerPipe: AmountShortenerPipe,
private router: Router,
private zone: NgZone,
private stateService: StateService,
) {
}
ngOnInit(): void {
this.seoService.setTitle($localize`Lightning nodes per ISP`);
this.nodesPerAsObservable$ = this.apiService.getNodesPerAs()
.pipe(
tap(data => {
this.isLoading = false;
this.prepareChartOptions(data);
}),
map(data => {
for (let i = 0; i < data.length; ++i) {
data[i].rank = i + 1;
}
return data.slice(0, 100);
}),
share()
);
}
generateChartSerieData(as) {
const shareThreshold = this.isMobile() ? 2 : 1;
const data: object[] = [];
let totalShareOther = 0;
let totalNodeOther = 0;
let edgeDistance: string | number = '10%';
if (this.isMobile()) {
edgeDistance = 0;
}
as.forEach((as) => {
if (as.share < shareThreshold) {
totalShareOther += as.share;
totalNodeOther += as.count;
return;
}
data.push({
value: as.share,
name: as.name + (this.isMobile() ? `` : ` (${as.share}%)`),
label: {
overflow: 'truncate',
color: '#b1b1b1',
alignTo: 'edge',
edgeDistance: edgeDistance,
},
tooltip: {
show: !this.isMobile(),
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
},
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`
;
}
},
data: as.ispId,
} as PieSeriesOption);
});
// 'Other'
data.push({
itemStyle: {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: {
overflow: 'truncate',
color: '#b1b1b1',
alignTo: 'edge',
edgeDistance: edgeDistance
},
tooltip: {
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalNodeOther.toString() + ` nodes`;
}
},
data: 9999 as any,
} as PieSeriesOption);
return data;
}
prepareChartOptions(as) {
let pieSize = ['20%', '80%']; // Desktop
if (this.isMobile()) {
pieSize = ['15%', '60%'];
}
this.chartOptions = {
color: chartColors,
tooltip: {
trigger: 'item',
textStyle: {
align: 'left',
}
},
series: [
{
zlevel: 0,
minShowLabelAngle: 3.6,
name: 'Lightning nodes',
type: 'pie',
radius: pieSize,
data: this.generateChartSerieData(as),
labelLine: {
lineStyle: {
width: 2,
},
length: this.isMobile() ? 1 : 20,
length2: this.isMobile() ? 1 : undefined,
},
label: {
fontSize: 14,
},
itemStyle: {
borderRadius: 1,
borderWidth: 1,
borderColor: '#000',
},
emphasis: {
itemStyle: {
shadowBlur: 40,
shadowColor: 'rgba(0, 0, 0, 0.75)',
},
labelLine: {
lineStyle: {
width: 4,
}
}
}
}
],
};
}
isMobile() {
return (window.innerWidth <= 767.98);
}
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {
if (e.data.data === 9999) { // "Other"
return;
}
this.zone.run(() => {
const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/nodes/isp/${e.data.data}`);
this.router.navigate([url]);
});
});
}
onSaveChart() {
const now = new Date();
this.chartOptions.backgroundColor = '#11131f';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `ln-nodes-per-as-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
}

42
frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html Normal file
View File

@ -0,0 +1,42 @@
<div class="container-xl full-height" style="min-height: 335px">
<h1 class="float-left" i18n="lightning.nodes-for-isp">Lightning nodes on ISP: {{ isp?.name }} [AS {{isp?.id}}]</h1>
<div style="min-height: 295px">
<table class="table table-borderless">
<thead>
<th class="alias text-left" i18n="lightning.alias">Alias</th>
<th class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
<th class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
<th class="capacity text-right" i18n="lightning.capacity">Capacity</th>
<th class="channels text-right" i18n="lightning.channels">Channels</th>
<th class="city text-right" i18n="lightning.city">City</th>
</thead>
<tbody *ngIf="nodes$ | async as nodes">
<tr *ngFor="let node of nodes; let i= index; trackBy: trackByPublicKey">
<td class="alias text-left text-truncate">
<a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
</td>
<td class="timestamp-first text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.first_seen"></app-timestamp>
</td>
<td class="timestamp-update text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updated_at"></app-timestamp>
</td>
<td class="capacity text-right">
<app-amount *ngIf="node.capacity > 100000000; else smallchannel" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<ng-template #smallchannel>
{{ node.capacity | amountShortener: 1 }}
<span class="sats" i18n="shared.sats">sats</span>
</ng-template>
</td>
<td class="channels text-right">
{{ node.channels }}
</td>
<td class="city text-right text-truncate">
{{ node?.city?.en ?? '-' }}
</td>
</tbody>
</table>
</div>
</div>

62
frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss Normal file
View File

@ -0,0 +1,62 @@
.container-xl {
max-width: 1400px;
padding-bottom: 100px;
}
.sats {
color: #ffffff66;
font-size: 12px;
top: 0px;
}
.alias {
width: 30%;
max-width: 400px;
padding-right: 70px;
@media (max-width: 576px) {
width: 50%;
max-width: 150px;
padding-right: 0px;
}
}
.timestamp-first {
width: 20%;
@media (max-width: 576px) {
display: none
}
}
.timestamp-update {
width: 16%;
@media (max-width: 576px) {
display: none
}
}
.capacity {
width: 10%;
@media (max-width: 576px) {
width: 25%;
}
}
.channels {
width: 10%;
@media (max-width: 576px) {
width: 25%;
}
}
.city {
max-width: 150px;
@media (max-width: 576px) {
display: none
}
}

40
frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts Normal file
View File

@ -0,0 +1,40 @@
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';
import { SeoService } from 'src/app/services/seo.service';
@Component({
selector: 'app-nodes-per-isp',
templateUrl: './nodes-per-isp.component.html',
styleUrls: ['./nodes-per-isp.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodesPerISP implements OnInit {
nodes$: Observable<any>;
isp: {name: string, id: number};
constructor(
private apiService: ApiService,
private seoService: SeoService,
private route: ActivatedRoute,
) { }
ngOnInit(): void {
this.nodes$ = this.apiService.getNodeForISP$(this.route.snapshot.params.isp)
.pipe(
map(response => {
this.isp = {
name: response.isp,
id: this.route.snapshot.params.isp
};
this.seoService.setTitle($localize`Lightning nodes on ISP: ${response.isp} [AS${this.route.snapshot.params.isp}]`);
return response.nodes;
})
);
}
trackByPublicKey(index: number, node: any) {
return node.public_key;
}
}

10
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
View File

@ -1,10 +1,12 @@
<div [class]="widget === false ? 'full-container' : ''"> <div [class]="widget === false ? 'full-container' : ''">
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''"> <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span> <div class="d-flex d-md-block align-items-baseline">
<button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()"> <span i18n="mining.channels-and-capacity">Channels & Capacity</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(capacityObservable$ | async) as stats"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(capacityObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

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

@ -251,4 +251,19 @@ export class ApiService {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/search', { params }); return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/search', { params });
} }
getNodesPerAs(): Observable<any> {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/isp');
}
getNodeForCountry$(country: string): Observable<any> {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/country/' + country);
}
getNodeForISP$(isp: string): Observable<any> {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/isp/' + isp);
}
getNodesPerCountry(): Observable<any> {
return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/countries');
}
} }

3
frontend/src/app/services/assets.service.ts
View File

@ -14,6 +14,7 @@ export class AssetsService {
getAssetsJson$: Observable<{ array: AssetExtended[]; objects: any}>; getAssetsJson$: Observable<{ array: AssetExtended[]; objects: any}>;
getAssetsMinimalJson$: Observable<any>; getAssetsMinimalJson$: Observable<any>;
getWorldMapJson$: Observable<any>;
constructor( constructor(
private httpClient: HttpClient, private httpClient: HttpClient,
@ -65,5 +66,7 @@ export class AssetsService {
}), }),
shareReplay(1), shareReplay(1),
); );
this.getWorldMapJson$ = this.httpClient.get(apiBaseUrl + '/resources/worldmap.json').pipe(shareReplay());
} }
} }

2
frontend/src/app/shared/components/timestamp/timestamp.component.html
View File

@ -1,4 +1,4 @@
&lrm;{{ seconds * 1000 | date:'yyyy-MM-dd HH:mm' }} &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
<div class="lg-inline"> <div class="lg-inline">
<i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i> <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
</div> </div>

1
frontend/src/app/shared/components/timestamp/timestamp.component.ts
View File

@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
export class TimestampComponent implements OnChanges { export class TimestampComponent implements OnChanges {
@Input() unixTime: number; @Input() unixTime: number;
@Input() dateString: string; @Input() dateString: string;
@Input() customFormat: string;
seconds: number; seconds: number;

8
frontend/src/app/shared/graphs.utils.ts
View File

@ -90,3 +90,11 @@ export function detectWebGL() {
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
return (gl && gl instanceof WebGLRenderingContext); return (gl && gl instanceof WebGLRenderingContext);
} }
export function getFlagEmoji(countryCode) {
const codePoints = countryCode
.toUpperCase()
.split('')
.map(char => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}

1
frontend/src/resources/worldmap.json Normal file
View File

File diff suppressed because one or more lines are too long

14
production/nginx/server-common.conf
View File

@ -46,13 +46,13 @@ add_header Vary Cookie;
# https://stackoverflow.com/questions/5238377/nginx-location-priority # https://stackoverflow.com/questions/5238377/nginx-location-priority
# for exact / requests, redirect based on $lang # for exact / requests, redirect based on $lang
# cache redirect for 10 minutes # cache redirect for 5 minutes
location = / { location = / {
if ($lang != '') { if ($lang != '') {
return 302 $scheme://$host/$lang/; return 302 $scheme://$host/$lang/;
} }
try_files /en-US/index.html =404; try_files /en-US/index.html =404;
expires 10m; expires 5m;
} }
# used to rewrite resources from /<lang>/ to /en-US/ # used to rewrite resources from /<lang>/ to /en-US/
@ -66,14 +66,14 @@ location ~ ^/([a-z][a-z])/(.+\..+\.(js|css)) {
try_files $uri =404; try_files $uri =404;
expires 1y; expires 1y;
} }
# cache everything else for 10 minutes # cache everything else for 5 minutes
location ~ ^/([a-z][a-z])$ { location ~ ^/([a-z][a-z])$ {
try_files $uri /$1/index.html /en-US/index.html =404; try_files $uri /$1/index.html /en-US/index.html =404;
expires 10m; expires 5m;
} }
location ~ ^/([a-z][a-z])/ { location ~ ^/([a-z][a-z])/ {
try_files $uri /$1/index.html /en-US/index.html =404; try_files $uri /$1/index.html /en-US/index.html =404;
expires 10m; expires 5m;
} }
# cache /resources/** for 1 week since they don't change often # cache /resources/** for 1 week since they don't change often
@ -87,8 +87,8 @@ location ~* ^/.+\..+\.(js|css) {
expires 1y; expires 1y;
} }
# catch-all for all URLs i.e. /address/foo /tx/foo /block/000 # catch-all for all URLs i.e. /address/foo /tx/foo /block/000
# cache 10 minutes since they change frequently # cache 5 minutes since they change frequently
location / { location / {
try_files /$lang/$uri $uri /en-US/$uri /en-US/index.html =404; try_files /$lang/$uri $uri /en-US/$uri /en-US/index.html =404;
expires 10m; expires 5m;
} }