From 5b4d394039989042280abc4ebe778192dc8c88a1 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Wed, 10 Aug 2022 15:17:47 -0400 Subject: [PATCH 1/7] Remove doc scroll listener after navigating away --- frontend/src/app/docs/api-docs/api-docs.component.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/docs/api-docs/api-docs.component.ts b/frontend/src/app/docs/api-docs/api-docs.component.ts index 260a701ea..ed0ecb0a2 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.ts +++ b/frontend/src/app/docs/api-docs/api-docs.component.ts @@ -50,9 +50,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit { document.getElementById( this.route.snapshot.fragment ).scrollIntoView(); } } - window.addEventListener('scroll', function() { - that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative"; - }, { passive: true} ); + window.addEventListener('scroll', that.onDocScroll, { passive: true }); }, 1 ); } @@ -87,6 +85,14 @@ export class ApiDocsComponent implements OnInit, AfterViewInit { }); } + ngOnDestroy(): void { + window.removeEventListener('scroll', this.onDocScroll); + } + + onDocScroll() { + this.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative"; + } + anchorLinkClick( event: any ) { let targetId = ""; if( event.target.nodeName === "A" ) { From 7e356ef0a078dd463519f226ecf668e85886a088 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 11 Aug 2022 16:51:09 +0200 Subject: [PATCH 2/7] Fix recursive call in LN network updater --- backend/src/tasks/lightning/network-sync.service.ts | 2 -- backend/src/tasks/lightning/stats-updater.service.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/backend/src/tasks/lightning/network-sync.service.ts b/backend/src/tasks/lightning/network-sync.service.ts index b87c63031..1fdd77361 100644 --- a/backend/src/tasks/lightning/network-sync.service.ts +++ b/backend/src/tasks/lightning/network-sync.service.ts @@ -107,8 +107,6 @@ class NetworkSyncService { } catch (e) { logger.err(`Cannot update channel list. Reason: ${(e instanceof Error ? e.message : e)}`); } - - setTimeout(() => { this.$runTasks(); }, 1000 * config.LIGHTNING.STATS_REFRESH_INTERVAL); } // This method look up the creation date of the earliest channel of the node diff --git a/backend/src/tasks/lightning/stats-updater.service.ts b/backend/src/tasks/lightning/stats-updater.service.ts index ecb056859..9e6e5bd82 100644 --- a/backend/src/tasks/lightning/stats-updater.service.ts +++ b/backend/src/tasks/lightning/stats-updater.service.ts @@ -25,7 +25,7 @@ class LightningStatsUpdater { const date = new Date(); Common.setDateMidnight(date); const networkGraph = await lightningApi.$getNetworkGraph(); - LightningStatsImporter.computeNetworkStats(date.getTime() / 1000, networkGraph); + await LightningStatsImporter.computeNetworkStats(date.getTime() / 1000, networkGraph); logger.info(`Updated latest network stats`); } From 329e9aa0346b7da328be3bf2a3aabc2bc6926494 Mon Sep 17 00:00:00 2001 From: softsimon Date: Fri, 12 Aug 2022 13:27:43 +0400 Subject: [PATCH 3/7] Fixing broken Matomo och bisq and liquid --- .../src/app/services/enterprise.service.ts | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/services/enterprise.service.ts b/frontend/src/app/services/enterprise.service.ts index 41a6194a1..8f86d28a5 100644 --- a/frontend/src/app/services/enterprise.service.ts +++ b/frontend/src/app/services/enterprise.service.ts @@ -24,16 +24,16 @@ export class EnterpriseService { this.subdomain = subdomain; this.fetchSubdomainInfo(); this.disableSubnetworks(); - } else if (document.location.hostname === 'mempool.space') { + } else { this.insertMatomo(); } } - getSubdomain() { + getSubdomain(): string { return this.subdomain; } - disableSubnetworks() { + disableSubnetworks(): void { this.stateService.env.TESTNET_ENABLED = false; this.stateService.env.LIQUID_ENABLED = false; this.stateService.env.LIQUID_TESTNET_ENABLED = false; @@ -41,7 +41,7 @@ export class EnterpriseService { this.stateService.env.BISQ_ENABLED = false; } - fetchSubdomainInfo() { + fetchSubdomainInfo(): void { this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => { this.info = info; this.insertMatomo(info.site_id); @@ -54,14 +54,20 @@ export class EnterpriseService { }); } - insertMatomo(siteId = 5) { + insertMatomo(siteId?: number): void { let statsUrl = '//stats.mempool.space/'; - if (this.document.location.hostname === 'liquid.network') { - statsUrl = '//stats.liquid.network/'; - siteId = 8; - } else if (this.document.location.hostname === 'bisq.markets') { - statsUrl = '//stats.bisq.markets/'; - siteId = 7; + + if (!siteId) { + siteId = 5; + if (this.document.location.hostname === 'liquid.network') { + statsUrl = '//stats.liquid.network/'; + siteId = 8; + } else if (this.document.location.hostname === 'bisq.markets') { + statsUrl = '//stats.bisq.markets/'; + siteId = 7; + } else if (this.document.location.hostname !== 'mempool.space') { + return; + } } // @ts-ignore From 06453edc7cf65e51fc55829eb444d903a07d3cba Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 12 Aug 2022 12:12:34 +0200 Subject: [PATCH 4/7] Fix LN stats node per network count --- .../lightning/sync-tasks/stats-importer.ts | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/backend/src/tasks/lightning/sync-tasks/stats-importer.ts b/backend/src/tasks/lightning/sync-tasks/stats-importer.ts index 8c823e2ef..7b618e66e 100644 --- a/backend/src/tasks/lightning/sync-tasks/stats-importer.ts +++ b/backend/src/tasks/lightning/sync-tasks/stats-importer.ts @@ -4,6 +4,8 @@ import { XMLParser } from 'fast-xml-parser'; import logger from '../../../logger'; import fundingTxFetcher from './funding-tx-fetcher'; import config from '../../../config'; +import { ILightningApi } from '../../../api/lightning/lightning-api.interface'; +import { isIP } from 'net'; const fsPromises = promises; @@ -48,7 +50,7 @@ class LightningStatsImporter { /** * Generate LN network stats for one day */ - public async computeNetworkStats(timestamp: number, networkGraph): Promise { + public async computeNetworkStats(timestamp: number, networkGraph: ILightningApi.NetworkGraph): Promise { // Node counts and network shares let clearnetNodes = 0; let torNodes = 0; @@ -61,8 +63,8 @@ class LightningStatsImporter { let isUnnanounced = true; for (const socket of (node.addresses ?? [])) { - hasOnion = hasOnion || ['torv2', 'torv3'].includes(socket.network); - hasClearnet = hasClearnet || ['ipv4', 'ipv6'].includes(socket.network); + hasOnion = hasOnion || ['torv2', 'torv3'].includes(socket.network) || socket.addr.indexOf('onion') !== -1; + hasClearnet = hasClearnet || ['ipv4', 'ipv6'].includes(socket.network) || [4, 6].includes(isIP(socket.addr.split(':')[0])); } if (hasOnion && hasClearnet) { clearnetTorNodes++; @@ -127,22 +129,28 @@ class LightningStatsImporter { if (channel.node1_policy !== undefined) { // Coming from the node for (const policy of [channel.node1_policy, channel.node2_policy]) { - if (policy && policy.fee_rate_milli_msat < 5000) { + if (policy && parseInt(policy.fee_rate_milli_msat, 10) < 5000) { avgFeeRate += parseInt(policy.fee_rate_milli_msat, 10); feeRates.push(parseInt(policy.fee_rate_milli_msat, 10)); } - if (policy && policy.fee_base_msat < 5000) { + if (policy && parseInt(policy.fee_base_msat, 10) < 5000) { avgBaseFee += parseInt(policy.fee_base_msat, 10); baseFees.push(parseInt(policy.fee_base_msat, 10)); } } } else { // Coming from the historical import + // @ts-ignore if (channel.fee_rate_milli_msat < 5000) { + // @ts-ignore avgFeeRate += parseInt(channel.fee_rate_milli_msat, 10); + // @ts-ignore feeRates.push(parseInt(channel.fee_rate_milli_msat), 10); - } + } + // @ts-ignore if (channel.fee_base_msat < 5000) { + // @ts-ignore avgBaseFee += parseInt(channel.fee_base_msat, 10); + // @ts-ignore baseFees.push(parseInt(channel.fee_base_msat), 10); } } From 576400414f3320deb49db13bb053d90d597fef06 Mon Sep 17 00:00:00 2001 From: softsimon Date: Fri, 12 Aug 2022 16:08:34 +0400 Subject: [PATCH 5/7] Adding staging matomo sites --- .../bisq-master-page.component.ts | 2 ++ .../liquid-master-page.component.ts | 2 ++ .../src/app/services/enterprise.service.ts | 36 ++++++++++++++----- 3 files changed, 31 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts index 0f10a106d..52da15125 100644 --- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable } from 'rxjs'; import { LanguageService } from 'src/app/services/language.service'; +import { EnterpriseService } from 'src/app/services/enterprise.service'; @Component({ selector: 'app-bisq-master-page', @@ -18,6 +19,7 @@ export class BisqMasterPageComponent implements OnInit { constructor( private stateService: StateService, private languageService: LanguageService, + private enterpriseService: EnterpriseService, ) { } ngOnInit() { diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts index 65f07320d..22a351068 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { merge, Observable, of} from 'rxjs'; import { LanguageService } from 'src/app/services/language.service'; +import { EnterpriseService } from 'src/app/services/enterprise.service'; @Component({ selector: 'app-liquid-master-page', @@ -20,6 +21,7 @@ export class LiquidMasterPageComponent implements OnInit { constructor( private stateService: StateService, private languageService: LanguageService, + private enterpriseService: EnterpriseService, ) { } ngOnInit() { diff --git a/frontend/src/app/services/enterprise.service.ts b/frontend/src/app/services/enterprise.service.ts index 8f86d28a5..bc80f337d 100644 --- a/frontend/src/app/services/enterprise.service.ts +++ b/frontend/src/app/services/enterprise.service.ts @@ -58,15 +58,33 @@ export class EnterpriseService { let statsUrl = '//stats.mempool.space/'; if (!siteId) { - siteId = 5; - if (this.document.location.hostname === 'liquid.network') { - statsUrl = '//stats.liquid.network/'; - siteId = 8; - } else if (this.document.location.hostname === 'bisq.markets') { - statsUrl = '//stats.bisq.markets/'; - siteId = 7; - } else if (this.document.location.hostname !== 'mempool.space') { - return; + switch (this.document.location.hostname) { + case 'mempool.space': + statsUrl = '//stats.mempool.space/'; + siteId = 5; + break; + case 'mempool.ninja': + statsUrl = '//stats.mempool.space/'; + siteId = 4; + break; + case 'liquid.network': + siteId = 8; + statsUrl = '//stats.liquid.network/'; + break; + case 'liquid.place': + siteId = 10; + statsUrl = '//stats.liquid.network/'; + break; + case 'bisq.markets': + siteId = 7; + statsUrl = '//stats.bisq.markets/'; + break; + case 'bisq.ninja': + statsUrl = '//stats.bisq.markets/'; + siteId = 11; + break; + default: + return; } } From 39549c8ca98c247bd6c9d9453e8be49f653ada3b Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 12 Aug 2022 15:35:00 +0200 Subject: [PATCH 6/7] Show two LN network stats charts on dashboard --- .../lightning-dashboard.component.html | 15 +-- .../nodes-networks-chart.component.scss | 3 +- .../nodes-networks-chart.component.ts | 111 +++++++++++++----- .../nodes-per-isp-chart.component.html | 12 +- .../lightning-statistics-chart.component.scss | 2 +- .../lightning-statistics-chart.component.ts | 92 ++++++++++++--- .../app/shared/pipes/amount-shortener.pipe.ts | 2 +- 7 files changed, 169 insertions(+), 68 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 3fbbaa4e2..e89ebaebf 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -37,24 +37,17 @@
-
View more »
+
View more »
- -
-
+
+
Lightning network history
+
View more »
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss index fa044a4d6..760e782ca 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss @@ -51,8 +51,7 @@ } .chart-widget { width: 100%; - height: 100%; - max-height: 270px; + height: 145px; } .formRadioGroup { 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 70d02de28..4016cfc60 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} from 'echarts'; +import { EChartsOption, graphic} from 'echarts'; import { Observable } from 'rxjs'; import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; import { formatNumber } from '@angular/common'; @@ -9,6 +9,7 @@ import { MiningService } from 'src/app/services/mining.service'; import { download } from 'src/app/shared/graphs.utils'; import { SeoService } from 'src/app/services/seo.service'; import { LightningApiService } from '../lightning-api.service'; +import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe'; @Component({ selector: 'app-nodes-networks-chart', @@ -26,7 +27,7 @@ import { LightningApiService } from '../lightning-api.service'; }) export class NodesNetworksChartComponent implements OnInit { @Input() right: number | string = 45; - @Input() left: number | string = 55; + @Input() left: number | string = 45; @Input() widget = false; miningWindowPreference: string; @@ -51,7 +52,8 @@ export class NodesNetworksChartComponent implements OnInit { private lightningApiService: LightningApiService, private formBuilder: FormBuilder, private storageService: StorageService, - private miningService: MiningService + private miningService: MiningService, + private amountShortenerPipe: AmountShortenerPipe, ) { } @@ -82,11 +84,17 @@ export class NodesNetworksChartComponent implements OnInit { .pipe( tap((response) => { const data = response.body; - this.prepareChartOptions({ + const chartData = { 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]), - }); + }; + let maxYAxis = 0; + for (const day of data) { + maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes); + } + maxYAxis = Math.ceil(maxYAxis / 4000) * 4000; + this.prepareChartOptions(chartData, maxYAxis); this.isLoading = false; }), map((response) => { @@ -100,7 +108,7 @@ export class NodesNetworksChartComponent implements OnInit { ); } - prepareChartOptions(data) { + prepareChartOptions(data, maxYAxis) { let title: object; if (data.tor_nodes.length === 0) { title = { @@ -110,24 +118,30 @@ export class NodesNetworksChartComponent implements OnInit { }, text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`, left: 'center', - top: 'center' + top: 'top', + }; + } else if (this.widget) { + title = { + textStyle: { + color: 'grey', + fontSize: 11 + }, + text: $localize`Nodes per network`, + left: 'center', + top: 13, + zlevel: 10, }; } this.chartOptions = { title: title, animation: false, - color: [ - '#D81B60', - '#039BE5', - '#7CB342', - '#FFB300', - ], grid: { - top: 40, - bottom: this.widget ? 30 : 70, - right: this.right, - left: this.left, + height: this.widget ? 100 : undefined, + top: this.widget ? 10 : 40, + bottom: this.widget ? 0 : 70, + right: (this.isMobile() && this.widget) ? 35 : this.right, + left: (this.isMobile() && this.widget) ? 40 :this.left, }, tooltip: { show: !this.isMobile() || !this.widget, @@ -171,7 +185,7 @@ export class NodesNetworksChartComponent implements OnInit { hideOverlap: true, } }, - legend: data.tor_nodes.length === 0 ? undefined : { + legend: this.widget || data.tor_nodes.length === 0 ? undefined : { padding: 10, data: [ { @@ -207,7 +221,7 @@ export class NodesNetworksChartComponent implements OnInit { icon: 'roundRect', }, ], - selected: JSON.parse(this.storageService.getValue('nodes_networks_legend')) ?? { + selected: this.widget ? undefined : JSON.parse(this.storageService.getValue('nodes_networks_legend')) ?? { 'Total': true, 'Tor': true, 'Clearnet': true, @@ -218,13 +232,14 @@ export class NodesNetworksChartComponent implements OnInit { { type: 'value', position: 'left', - min: (value) => { - return value.min * 0.9; - }, axisLabel: { color: 'rgb(110, 112, 121)', - formatter: (val) => { - return `${formatNumber(Math.round(val * 100) / 100, this.locale, '1.0-0')}`; + formatter: (val: number): string => { + if (this.widget) { + return `${this.amountShortenerPipe.transform(val, 0)}`; + } else { + return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`; + } } }, splitLine: { @@ -232,8 +247,35 @@ export class NodesNetworksChartComponent implements OnInit { type: 'dotted', color: '#ffffff66', opacity: 0.25, + }, + }, + max: maxYAxis, + min: 0, + interval: 4000, + }, + { + type: 'value', + position: 'right', + axisLabel: { + color: 'rgb(110, 112, 121)', + formatter: (val: number): string => { + if (this.widget) { + return `${this.amountShortenerPipe.transform(val, 0)}`; + } else { + return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`; + } } }, + splitLine: { + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + }, + }, + max: maxYAxis, + min: 0, + interval: 4000, } ], series: data.tor_nodes.length === 0 ? [] : [ @@ -252,7 +294,12 @@ export class NodesNetworksChartComponent implements OnInit { opacity: 0.5, }, stack: 'Total', - color: '#FDD835', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#D81B60' }, + { offset: 1, color: '#D81B60AA' }, + ]), + + smooth: true, }, { zlevel: 1, @@ -269,11 +316,15 @@ export class NodesNetworksChartComponent implements OnInit { opacity: 0.5, }, stack: 'Total', - color: '#00ACC1', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#FFB300' }, + { offset: 1, color: '#FFB300AA' }, + ]), + smooth: true, }, { zlevel: 1, - yAxisIndex: 0, + yAxisIndex: 1, name: $localize`Tor`, showSymbol: false, symbol: 'none', @@ -286,7 +337,11 @@ export class NodesNetworksChartComponent implements OnInit { opacity: 0.5, }, stack: 'Total', - color: '#7D4698', + color: new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#7D4698' }, + { offset: 1, color: '#7D4698AA' }, + ]), + smooth: true, }, ], dataZoom: this.widget ? null : [{ diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html index 5e14ac67b..01be4f036 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html @@ -8,18 +8,18 @@ {{ stats.taggedISP }}

-
-
Tagged capacity
-

- -

-
Tagged nodes

{{ stats.taggedNodeCount }}

+
+
Tagged capacity
+

+ +

+
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss index 5f59539e3..760e782ca 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss @@ -51,7 +51,7 @@ } .chart-widget { width: 100%; - height: 320px; + height: 145px; } .formRadioGroup { diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts index 1727d1f68..ea997f8db 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts @@ -9,6 +9,7 @@ import { StorageService } from 'src/app/services/storage.service'; import { MiningService } from 'src/app/services/mining.service'; import { download } from 'src/app/shared/graphs.utils'; import { LightningApiService } from '../lightning-api.service'; +import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe'; @Component({ selector: 'app-lightning-statistics-chart', @@ -25,7 +26,7 @@ import { LightningApiService } from '../lightning-api.service'; }) export class LightningStatisticsChartComponent implements OnInit { @Input() right: number | string = 45; - @Input() left: number | string = 55; + @Input() left: number | string = 45; @Input() widget = false; miningWindowPreference: string; @@ -51,6 +52,7 @@ export class LightningStatisticsChartComponent implements OnInit { private formBuilder: FormBuilder, private storageService: StorageService, private miningService: MiningService, + private amountShortenerPipe: AmountShortenerPipe, ) { } @@ -105,24 +107,39 @@ export class LightningStatisticsChartComponent implements OnInit { color: 'grey', fontSize: 15 }, - text: `Indexing in progess`, + text: $localize`Indexing in progess`, left: 'center', top: 'center' }; + } else if (this.widget) { + title = { + textStyle: { + color: 'grey', + fontSize: 11 + }, + text: $localize`Channels & Capacity`, + left: 'center', + top: 13, + zlevel: 10, + }; } this.chartOptions = { title: title, animation: false, color: [ - '#FDD835', - '#D81B60', + '#FFB300', + new graphic.LinearGradient(0, 0.75, 0, 1, [ + { offset: 0, color: '#D81B60' }, + { offset: 1, color: '#D81B60AA' }, + ]), ], grid: { - top: 40, - bottom: this.widget ? 30 : 70, - right: this.right, - left: this.left, + height: this.widget ? 100 : undefined, + top: this.widget ? 10 : 40, + bottom: this.widget ? 0 : 70, + right: (this.isMobile() && this.widget) ? 35 : this.right, + left: (this.isMobile() && this.widget) ? 40 :this.left, }, tooltip: { show: !this.isMobile(), @@ -166,7 +183,7 @@ export class LightningStatisticsChartComponent implements OnInit { hideOverlap: true, } }, - legend: data.channel_count.length === 0 ? undefined : { + legend: this.widget || data.channel_count.length === 0 ? undefined : { padding: 10, data: [ { @@ -178,7 +195,7 @@ export class LightningStatisticsChartComponent implements OnInit { icon: 'roundRect', }, { - name: 'Capacity (BTC)', + name: 'Capacity', inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -188,17 +205,20 @@ export class LightningStatisticsChartComponent implements OnInit { ], selected: JSON.parse(this.storageService.getValue('sizes_ln_legend')) ?? { 'Channels': true, - 'Capacity (BTC)': true, + 'Capacity': true, } }, yAxis: data.channel_count.length === 0 ? undefined : [ { - min: 0, type: 'value', axisLabel: { color: 'rgb(110, 112, 121)', - formatter: (val) => { - return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`; + formatter: (val: number): string => { + if (this.widget) { + return `${this.amountShortenerPipe.transform(val, 0)}`; + } else { + return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`; + } } }, splitLine: { @@ -208,6 +228,7 @@ export class LightningStatisticsChartComponent implements OnInit { opacity: 0.25, } }, + minInterval: this.widget ? 20000 : undefined, }, { min: 0, @@ -215,8 +236,12 @@ export class LightningStatisticsChartComponent implements OnInit { position: 'right', axisLabel: { color: 'rgb(110, 112, 121)', - formatter: (val) => { - return `${formatNumber(Math.round(val / 100000000), this.locale, '1.0-0')}`; + formatter: (val: number): string => { + if (this.widget) { + return `${this.amountShortenerPipe.transform(Math.round(val / 100000000), 0)}`; + } else { + return `${formatNumber(Math.round(val / 100000000), this.locale, '1.0-0')}`; + } } }, splitLine: { @@ -244,20 +269,49 @@ export class LightningStatisticsChartComponent implements OnInit { opacity: 1, width: 1, }, - } + }, + smooth: true, }, { zlevel: 0, yAxisIndex: 1, - name: 'Capacity (BTC)', + name: $localize`Capacity`, showSymbol: false, symbol: 'none', stack: 'Total', data: data.capacity, - areaStyle: {}, + areaStyle: { + opacity: 0.5, + }, type: 'line', + smooth: true, } ], + dataZoom: this.widget ? null : [{ + type: 'inside', + realtime: true, + zoomLock: true, + maxSpan: 100, + minSpan: 5, + moveOnMouseMove: false, + }, { + showDetail: false, + show: true, + type: 'slider', + brushSelect: false, + realtime: true, + left: 20, + right: 15, + selectedDataBackground: { + lineStyle: { + color: '#fff', + opacity: 0.45, + }, + areaStyle: { + opacity: 0, + } + }, + }], }; } diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts index a31a5712e..db3d94284 100644 --- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts +++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts @@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core'; }) export class AmountShortenerPipe implements PipeTransform { transform(num: number, ...args: any[]): unknown { - const digits = args[0] || 1; + const digits = args[0] ?? 1; const unit = args[1] || undefined; if (num < 1000) { From 0c13d9f5856d76df3f4dd4c93719f84b257b3f56 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 12 Aug 2022 15:40:19 +0200 Subject: [PATCH 7/7] Update yaxis scale and view more link --- .../lightning-dashboard.component.html | 2 +- .../nodes-networks-chart.component.ts | 8 ++++---- .../lightning-statistics-chart.component.ts | 2 +- 3 files changed, 6 insertions(+), 6 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 e89ebaebf..ff00f5b15 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -48,7 +48,7 @@
Lightning network history
-
View more »
+
View more »
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 4016cfc60..dbbb49483 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 @@ -93,7 +93,7 @@ export class NodesNetworksChartComponent implements OnInit { for (const day of data) { maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes); } - maxYAxis = Math.ceil(maxYAxis / 4000) * 4000; + maxYAxis = Math.ceil(maxYAxis / 3000) * 3000; this.prepareChartOptions(chartData, maxYAxis); this.isLoading = false; }), @@ -128,7 +128,7 @@ export class NodesNetworksChartComponent implements OnInit { }, text: $localize`Nodes per network`, left: 'center', - top: 13, + top: 11, zlevel: 10, }; } @@ -251,7 +251,7 @@ export class NodesNetworksChartComponent implements OnInit { }, max: maxYAxis, min: 0, - interval: 4000, + interval: 3000, }, { type: 'value', @@ -275,7 +275,7 @@ export class NodesNetworksChartComponent implements OnInit { }, max: maxYAxis, min: 0, - interval: 4000, + interval: 3000, } ], series: data.tor_nodes.length === 0 ? [] : [ diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts index ea997f8db..d889dd254 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts @@ -119,7 +119,7 @@ export class LightningStatisticsChartComponent implements OnInit { }, text: $localize`Channels & Capacity`, left: 'center', - top: 13, + top: 11, zlevel: 10, }; }