diff --git a/backend/src/api/explorer/statistics.api.ts b/backend/src/api/explorer/statistics.api.ts index 558ee86fd..cab8bfc29 100644 --- a/backend/src/api/explorer/statistics.api.ts +++ b/backend/src/api/explorer/statistics.api.ts @@ -6,7 +6,8 @@ class StatisticsApi { public async $getStatistics(interval: string | null = null): Promise { interval = Common.getSqlInterval(interval); - let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_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, clearnet_tor_nodes FROM lightning_stats`; if (interval) { diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts index a6278658a..c1647cd25 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core'; -import { EChartsOption, graphic} from 'echarts'; +import { EChartsOption, graphic, LineSeriesOption} from 'echarts'; import { Observable } from 'rxjs'; import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; import { formatNumber } from '@angular/common'; @@ -89,10 +89,11 @@ export class NodesNetworksChartComponent implements OnInit { 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]), + clearnet_tor_nodes: data.map(val => [val.added * 1000, val.clearnet_tor_nodes]), }; let maxYAxis = 0; for (const day of data) { - maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes); + maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes + day.clearnet_tor_nodes); } maxYAxis = Math.ceil(maxYAxis / 3000) * 3000; this.prepareChartOptions(chartData, maxYAxis); @@ -134,6 +135,94 @@ export class NodesNetworksChartComponent implements OnInit { }; } + const series: LineSeriesOption[] = [ + { + zlevel: 1, + yAxisIndex: 0, + name: $localize`Unknown`, + showSymbol: false, + symbol: 'none', + data: data.unannounced_nodes, + type: 'line', + lineStyle: { + width: 2, + }, + areaStyle: { + opacity: 0.5, + }, + stack: 'Total', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#D81B60' }, + { offset: 1, color: '#D81B60AA' }, + ]), + + smooth: false, + }, + { + zlevel: 1, + yAxisIndex: 0, + name: $localize`Reachable on Clearnet Only`, + showSymbol: false, + symbol: 'none', + data: data.clearnet_nodes, + type: 'line', + lineStyle: { + width: 2, + }, + areaStyle: { + opacity: 0.5, + }, + stack: 'Total', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#FFB300' }, + { offset: 1, color: '#FFB300AA' }, + ]), + smooth: false, + }, + { + zlevel: 1, + yAxisIndex: 0, + name: $localize`Reachable on Clearnet and Darknet`, + showSymbol: false, + symbol: 'none', + data: data.clearnet_tor_nodes, + type: 'line', + lineStyle: { + width: 2, + }, + areaStyle: { + opacity: 0.5, + }, + stack: 'Total', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#be7d4c' }, + { offset: 1, color: '#be7d4cAA' }, + ]), + smooth: false, + }, + { + zlevel: 1, + yAxisIndex: 0, + name: $localize`Reachable on Darknet Only`, + showSymbol: false, + symbol: 'none', + data: data.tor_nodes, + type: 'line', + lineStyle: { + width: 2, + }, + areaStyle: { + opacity: 0.5, + }, + stack: 'Total', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#7D4698' }, + { offset: 1, color: '#7D4698AA' }, + ]), + smooth: false, + }, + ]; + this.chartOptions = { title: title, animation: false, @@ -164,12 +253,17 @@ export class NodesNetworksChartComponent implements OnInit { let tooltip = `${date}
`; for (const tick of ticks.reverse()) { + if (tick.seriesName.indexOf('ignored') !== -1) { + continue; + } if (tick.seriesIndex === 0) { // Tor tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`; } 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) { // Unannounced tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`; + } else if (tick.seriesIndex === 3) { // Tor + Clearnet + tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`; } tooltip += `
`; total += tick.data[1]; @@ -190,7 +284,7 @@ export class NodesNetworksChartComponent implements OnInit { padding: 10, data: [ { - name: $localize`Total`, + name: $localize`Reachable on Darknet Only`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -198,7 +292,7 @@ export class NodesNetworksChartComponent implements OnInit { icon: 'roundRect', }, { - name: $localize`Tor`, + name: $localize`Reachable on Clearnet and Darknet`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -206,7 +300,7 @@ export class NodesNetworksChartComponent implements OnInit { icon: 'roundRect', }, { - name: $localize`Clearnet`, + name: $localize`Reachable on Clearnet Only`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -214,7 +308,7 @@ export class NodesNetworksChartComponent implements OnInit { icon: 'roundRect', }, { - name: $localize`Unannounced`, + name: $localize`Unknown`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -223,10 +317,10 @@ export class NodesNetworksChartComponent implements OnInit { }, ], selected: this.widget ? undefined : JSON.parse(this.storageService.getValue('nodes_networks_legend')) ?? { - 'Total': true, - 'Tor': true, - 'Clearnet': true, - 'Unannounced': true, + '$localize`Reachable on Darknet Only`': true, + '$localize`Reachable on Clearnet Only`': true, + '$localize`Reachable on Clearnet and Darknet`': true, + '$localize`Unknown`': true, } }, yAxis: data.tor_nodes.length === 0 ? undefined : [ @@ -250,7 +344,6 @@ export class NodesNetworksChartComponent implements OnInit { opacity: 0.25, }, }, - max: maxYAxis, min: 0, interval: 3000, }, @@ -274,77 +367,25 @@ export class NodesNetworksChartComponent implements OnInit { opacity: 0.25, }, }, - max: maxYAxis, min: 0, interval: 3000, } ], - series: data.tor_nodes.length === 0 ? [] : [ - { - zlevel: 1, - yAxisIndex: 0, - name: $localize`Unannounced`, - showSymbol: false, - symbol: 'none', - data: data.unannounced_nodes, - type: 'line', - lineStyle: { - width: 2, - }, - areaStyle: { - opacity: 0.5, - }, - stack: 'Total', - color: new graphic.LinearGradient(0, 0.75, 0, 1, [ - { offset: 0, color: '#D81B60' }, - { offset: 1, color: '#D81B60AA' }, - ]), - - smooth: false, - }, - { - zlevel: 1, - yAxisIndex: 0, - name: $localize`Clearnet`, - showSymbol: false, - symbol: 'none', - data: data.clearnet_nodes, - type: 'line', - lineStyle: { - width: 2, - }, - areaStyle: { - opacity: 0.5, - }, - stack: 'Total', - color: new graphic.LinearGradient(0, 0.75, 0, 1, [ - { offset: 0, color: '#FFB300' }, - { offset: 1, color: '#FFB300AA' }, - ]), - smooth: false, - }, - { - zlevel: 1, - yAxisIndex: 1, - name: $localize`Tor`, - showSymbol: false, - symbol: 'none', - data: data.tor_nodes, - type: 'line', - lineStyle: { - width: 2, - }, - areaStyle: { - opacity: 0.5, - }, - stack: 'Total', - color: new graphic.LinearGradient(0, 0.75, 0, 1, [ - { offset: 0, color: '#7D4698' }, - { offset: 1, color: '#7D4698AA' }, - ]), - smooth: false, - }, - ], + series: data.tor_nodes.length === 0 ? [] : series.concat(series.map((serie) => { + // We create dummy duplicated series so when we use the data zoom, the y axis + // both scales properly + const invisibleSerie = {...serie}; + invisibleSerie.name = 'ignored' + Math.random().toString(); + invisibleSerie.stack = 'ignored'; + invisibleSerie.yAxisIndex = 1; + invisibleSerie.lineStyle = { + opacity: 0, + }; + invisibleSerie.areaStyle = { + opacity: 0, + }; + return invisibleSerie; + })), dataZoom: this.widget ? null : [{ type: 'inside', realtime: true, @@ -371,6 +412,11 @@ export class NodesNetworksChartComponent implements OnInit { }, }], }; + + if (isMobile()) { + // @ts-ignore + this.chartOptions.legend.left = 50; + } } onChartInit(ec): void {