mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-20 13:34:40 +01:00
Code Issues Projects Releases Wiki Activity

Convert nodes per network chart to stack style

Browse source
This commit is contained in:
nymkappa 2022-07-28 10:01:04 +02:00
parent bdb76b3d4b
commit 98e5f78d5f
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
2 changed files with 27 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/api/explorer/statistics.api.ts
View file

@ -6,7 +6,7 @@ class StatisticsApi {
public async $getStatistics(interval: string | null = null): Promise<any> {
interval = Common.getSqlInterval(interval);
let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, node_count, total_capacity, tor_nodes, clearnet_nodes, unannounced_nodes
let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, total_capacity, tor_nodes, clearnet_nodes, unannounced_nodes
FROM lightning_stats`;
if (interval) {

70
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
View file

@ -83,7 +83,6 @@ export class NodesNetworksChartComponent implements OnInit {
tap((response) => {
const data = response.body;
this.prepareChartOptions({
node_count: data.map(val => [val.added * 1000, val.node_count]),
tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
@ -103,7 +102,7 @@ export class NodesNetworksChartComponent implements OnInit {
prepareChartOptions(data) {
let title: object;
if (data.node_count.length === 0) {
if (data.tor_nodes.length === 0) {
title = {
textStyle: {
color: 'grey',
@ -145,33 +144,34 @@ export class NodesNetworksChartComponent implements OnInit {
},
borderColor: '#000',
formatter: (ticks) => {
let total = 0;
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;
for (const tick of ticks) {
if (tick.seriesIndex === 0) { // Total
for (const tick of ticks.reverse()) {
if (tick.seriesIndex === 0) { // Tor
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
} else if (tick.seriesIndex === 1) { // Tor
} else if (tick.seriesIndex === 1) { // Clearnet
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
} else if (tick.seriesIndex === 2) { // Clearnet
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
} else if (tick.seriesIndex === 3) { // Unannounced
} else if (tick.seriesIndex === 2) { // Unannounced
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
}
tooltip += `<br>`;
total += tick.data[1];
}
tooltip += `<b>Total:</b> ${formatNumber(total, this.locale, '1.0-0')} nodes`;
return tooltip;
}
},
xAxis: data.node_count.length === 0 ? undefined : {
xAxis: data.tor_nodes.length === 0 ? undefined : {
type: 'time',
splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
axisLabel: {
hideOverlap: true,
}
},
legend: data.node_count.length === 0 ? undefined : {
legend: data.tor_nodes.length === 0 ? undefined : {
padding: 10,
data: [
{
@ -214,7 +214,7 @@ export class NodesNetworksChartComponent implements OnInit {
'Unannounced': true,
}
},
yAxis: data.node_count.length === 0 ? undefined : [
yAxis: data.tor_nodes.length === 0 ? undefined : [
{
type: 'value',
position: 'left',
@ -236,45 +236,23 @@ export class NodesNetworksChartComponent implements OnInit {
},
}
],
series: data.node_count.length === 0 ? [] : [
{
zlevel: 1,
name: $localize`Total`,
showSymbol: false,
symbol: 'none',
data: data.node_count,
type: 'line',
lineStyle: {
width: 2,
},
markLine: {
silent: true,
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#ffffff66',
opacity: 1,
width: 1,
},
},
areaStyle: {
opacity: 0.25,
},
},
series: data.tor_nodes.length === 0 ? [] : [
{
zlevel: 1,
yAxisIndex: 0,
name: $localize`Tor`,
name: $localize`Unannounced`,
showSymbol: false,
symbol: 'none',
data: data.tor_nodes,
data: data.unannounced_nodes,
type: 'line',
lineStyle: {
width: 2,
},
areaStyle: {
opacity: 0.25,
opacity: 0.5,
},
stack: 'Total',
color: '#FDD835',
},
{
zlevel: 1,
@ -288,24 +266,28 @@ export class NodesNetworksChartComponent implements OnInit {
width: 2,
},
areaStyle: {
opacity: 0.25,
opacity: 0.5,
},
stack: 'Total',
color: '#00ACC1',
},
{
zlevel: 1,
yAxisIndex: 0,
name: $localize`Unannounced`,
name: $localize`Tor`,
showSymbol: false,
symbol: 'none',
data: data.unannounced_nodes,
data: data.tor_nodes,
type: 'line',
lineStyle: {
width: 2,
},
areaStyle: {
opacity: 0.25,
opacity: 0.5,
},
}
stack: 'Total',
color: '#7D4698',
},
],
dataZoom: this.widget ? null : [{
type: 'inside',