From c3780adab2d1f01307bd36b99226b19d8196b88a Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 28 Jul 2022 06:52:08 +0200 Subject: [PATCH 1/4] Reduce mobile menus padding --- .../app/components/master-page/master-page.component.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index c6a9aaeff..607e4abf8 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -15,6 +15,11 @@ li.nav-item { margin: auto 10px; padding-left: 10px; padding-right: 10px; + @media (max-width: 992px) { + margin: auto 7px; + padding-left: 8px; + padding-right: 8px; + } } @media (min-width: 992px) { From 94a536af28710f2441daeb0c17333f6d62fd3e9e Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 28 Jul 2022 07:45:37 +0200 Subject: [PATCH 2/4] Update mouse UX on LN map in dashboard (wip) --- .../nodes-channels-map.component.scss | 6 +--- .../nodes-channels-map.component.ts | 29 +++++++++++++++---- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss index 060032151..7914a5364 100644 --- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss +++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss @@ -36,6 +36,7 @@ .widget > .chart { -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%); + min-height: 250px; } .chart { @@ -43,23 +44,18 @@ width: 100%; height: 100%; 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; } diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts index 7963cf544..16accda94 100644 --- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts +++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostListener, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { SeoService } from 'src/app/services/seo.service'; import { ApiService } from 'src/app/services/api.service'; import { Observable, switchMap, tap, zip } from 'rxjs'; @@ -26,7 +26,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy { chartOptions: EChartsOption = {}; chartInitOptions = { renderer: 'canvas', - }; + }; constructor( private seoService: SeoService, @@ -98,6 +98,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy { } this.chartOptions = { + silent: true, title: title ?? undefined, geo3D: { map: 'world', @@ -110,9 +111,10 @@ export class NodesChannelsMap implements OnInit, OnDestroy { } }, viewControl: { - center: this.style === 'widget' ? [0, 0, -1] : undefined, - minDistance: 0.1, - distance: this.style === 'widget' ? 45 : 60, + center: this.style === 'widget' ? [0, 0, -10] : undefined, + minDistance: this.style === 'widget' ? 22 : 0.1, + maxDistance: this.style === 'widget' ? 22 : 60, + distance: this.style === 'widget' ? 22 : 60, alpha: 90, panMouseButton: 'left', rotateMouseButton: undefined, @@ -167,6 +169,14 @@ export class NodesChannelsMap implements OnInit, OnDestroy { }; } + @HostListener('window:wheel', ['$event']) + onWindowScroll(e): void { + // Not very smooth when using the mouse + if (this.style === 'widget' && e.target.tagName === 'CANVAS') { + window.scrollBy({left: 0, top: e.deltaY, behavior: 'auto'}); + } + } + onChartInit(ec) { if (this.chartInstance !== undefined) { return; @@ -174,6 +184,15 @@ export class NodesChannelsMap implements OnInit, OnDestroy { this.chartInstance = ec; + if (this.style === 'widget') { + this.chartInstance.getZr().on('click', (e) => { + this.zone.run(() => { + const url = new RelativeUrlPipe(this.stateService).transform(`/graphs/lightning/nodes-channels-map`); + this.router.navigate([url]); + }); + }); + } + this.chartInstance.on('click', (e) => { if (e.data && e.data.publicKey) { this.zone.run(() => { From 6714533ed43a79f82a9f9bab702554285fa7df27 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 28 Jul 2022 07:50:58 +0200 Subject: [PATCH 3/4] Remove useless view more links that does not link to anywhere --- .../lightning-dashboard/lightning-dashboard.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html index 35464a186..999183e09 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -53,7 +53,7 @@
Top Capacity Nodes
-
View more »
+
@@ -63,7 +63,7 @@
Most Connected Nodes
-
View more »
+
From 98e5f78d5f8e5f52f571a5de2fdfbf7bcb84e71c Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 28 Jul 2022 10:01:04 +0200 Subject: [PATCH 4/4] Convert nodes per network chart to stack style --- backend/src/api/explorer/statistics.api.ts | 2 +- .../nodes-networks-chart.component.ts | 70 +++++++------------ 2 files changed, 27 insertions(+), 45 deletions(-) diff --git a/backend/src/api/explorer/statistics.api.ts b/backend/src/api/explorer/statistics.api.ts index c2e23848f..7bf3d9107 100644 --- a/backend/src/api/explorer/statistics.api.ts +++ b/backend/src/api/explorer/statistics.api.ts @@ -6,7 +6,7 @@ class StatisticsApi { public async $getStatistics(interval: string | null = null): Promise { 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) { 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 c292d09f7..70d02de28 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 @@ -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 = `${date}
`; - 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 += `
`; + total += tick.data[1]; } + tooltip += `Total: ${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',