From ed3aa7f5160a6cb510b4be3969fa66f80170d3b0 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Wed, 6 Jul 2022 15:15:08 +0200 Subject: [PATCH] Add Lightning charts in /graph --- backend/src/api/explorer/general.routes.ts | 9 ++++- backend/src/api/explorer/statistics.api.ts | 24 +++++++++++- .../components/graphs/graphs.component.html | 32 +++++++++++----- .../src/app/graphs/graphs.routing.module.ts | 10 +++++ .../app/lightning/lightning-api.service.ts | 7 +++- .../lightning-dashboard.component.html | 6 ++- .../nodes-networks-chart.component.html | 37 +++++++------------ .../nodes-networks-chart.component.ts | 21 +++++++---- .../lightning-statistics-chart.component.html | 36 +++++++++++++++++- .../lightning-statistics-chart.component.ts | 30 ++++++++++----- 10 files changed, 154 insertions(+), 58 deletions(-) diff --git a/backend/src/api/explorer/general.routes.ts b/backend/src/api/explorer/general.routes.ts index c7af43b42..07620e84a 100644 --- a/backend/src/api/explorer/general.routes.ts +++ b/backend/src/api/explorer/general.routes.ts @@ -10,7 +10,7 @@ class GeneralLightningRoutes { app .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/search', this.$searchNodesAndChannels) .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/statistics/latest', this.$getGeneralStats) - .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/statistics', this.$getStatistics) + .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/statistics/:interval', this.$getStatistics) ; } @@ -33,7 +33,12 @@ class GeneralLightningRoutes { private async $getStatistics(req: Request, res: Response) { try { - const statistics = await statisticsApi.$getStatistics(); + const statistics = await statisticsApi.$getStatistics(req.params.interval); + const statisticsCount = await statisticsApi.$getStatisticsCount(); + res.header('Pragma', 'public'); + res.header('Cache-control', 'public'); + res.header('X-total-count', statisticsCount.toString()); + res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString()); res.json(statistics); } catch (e) { res.status(500).send(e instanceof Error ? e.message : e); diff --git a/backend/src/api/explorer/statistics.api.ts b/backend/src/api/explorer/statistics.api.ts index 71d71276b..d29bf1ed4 100644 --- a/backend/src/api/explorer/statistics.api.ts +++ b/backend/src/api/explorer/statistics.api.ts @@ -1,10 +1,21 @@ import logger from '../../logger'; import DB from '../../database'; +import { Common } from '../common'; class StatisticsApi { - public async $getStatistics(): Promise { + 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 + FROM lightning_stats`; + + if (interval) { + query += ` WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`; + } + + query += ` ORDER BY id DESC`; + try { - const query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, node_count, total_capacity, tor_nodes, clearnet_nodes, unannounced_nodes FROM lightning_stats ORDER BY id DESC`; const [rows]: any = await DB.query(query); return rows; } catch (e) { @@ -27,6 +38,15 @@ class StatisticsApi { } } + public async $getStatisticsCount(): Promise { + try { + const [rows]: any = await DB.query(`SELECT count(*) as count FROM lightning_stats`); + return rows[0].count; + } catch (e) { + logger.err('$getLatestStatistics error: ' + (e instanceof Error ? e.message : e)); + throw e; + } + } } export default new StatisticsApi(); diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html index 59aa61aa1..8914adf0a 100644 --- a/frontend/src/app/components/graphs/graphs.component.html +++ b/frontend/src/app/components/graphs/graphs.component.html @@ -1,7 +1,10 @@ -
+
+ Mempool -
+ +
Pools Dominance Hashrate & Difficulty - Block Fee Rates - Block Fees - Block Rewards + [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty">Hashrate & + Difficulty + Block Fee Rates + Block Fees + Block Rewards Block Sizes and Weights Block Prediction Accuracy
+ +
+ + +
diff --git a/frontend/src/app/graphs/graphs.routing.module.ts b/frontend/src/app/graphs/graphs.routing.module.ts index 5c6daae7f..8bf531d80 100644 --- a/frontend/src/app/graphs/graphs.routing.module.ts +++ b/frontend/src/app/graphs/graphs.routing.module.ts @@ -18,6 +18,8 @@ import { StartComponent } from '../components/start/start.component'; import { StatisticsComponent } from '../components/statistics/statistics.component'; import { TelevisionComponent } from '../components/television/television.component'; import { DashboardComponent } from '../dashboard/dashboard.component'; +import { NodesNetworksChartComponent } from '../lightning/nodes-networks-chart/nodes-networks-chart.component'; +import { LightningStatisticsChartComponent } from '../lightning/statistics-chart/lightning-statistics-chart.component'; const browserWindow = window || {}; // @ts-ignore @@ -89,6 +91,14 @@ const routes: Routes = [ path: 'mining/block-sizes-weights', component: BlockSizesWeightsGraphComponent, }, + { + path: 'lightning/nodes-networks', + component: NodesNetworksChartComponent, + }, + { + path: 'lightning/capacity', + component: LightningStatisticsChartComponent, + }, { path: '', redirectTo: 'mempool', diff --git a/frontend/src/app/lightning/lightning-api.service.ts b/frontend/src/app/lightning/lightning-api.service.ts index 7eeec9441..2a6634558 100644 --- a/frontend/src/app/lightning/lightning-api.service.ts +++ b/frontend/src/app/lightning/lightning-api.service.ts @@ -56,7 +56,10 @@ export class LightningApiService { return this.httpClient.get(this.apiBasePath + '/channels/' + publicKey + '/statistics'); } - listStatistics$(): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/statistics'); + listStatistics$(interval: string | undefined): Observable { + return this.httpClient.get( + this.apiBasePath + '/api/v1/lightning/statistics' + + (interval !== undefined ? `/${interval}` : ''), { observe: 'response' } + ); } } 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 2db5124de..056799014 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -31,7 +31,8 @@
- + +
View more »
@@ -39,7 +40,8 @@
- + +
View more »
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html index 30c3bf66e..ca47c159c 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html @@ -8,35 +8,26 @@
-
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 faba3f104..cdd1186a8 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,12 +1,12 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core'; import { EChartsOption} from 'echarts'; import { Observable } from 'rxjs'; -import { startWith, switchMap, tap } from 'rxjs/operators'; +import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; import { formatNumber } from '@angular/common'; import { FormBuilder, FormGroup } from '@angular/forms'; import { StorageService } from 'src/app/services/storage.service'; import { MiningService } from 'src/app/services/mining.service'; -import { download, formatterXAxis } from 'src/app/shared/graphs.utils'; +import { download } from 'src/app/shared/graphs.utils'; import { SeoService } from 'src/app/services/seo.service'; import { LightningApiService } from '../lightning-api.service'; @@ -62,7 +62,7 @@ export class NodesNetworksChartComponent implements OnInit { this.miningWindowPreference = '1y'; } else { this.seoService.setTitle($localize`Nodes per network`); - this.miningWindowPreference = this.miningService.getDefaultTimespan('1m'); + this.miningWindowPreference = this.miningService.getDefaultTimespan('all'); } this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference }); this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference); @@ -73,14 +73,15 @@ export class NodesNetworksChartComponent implements OnInit { switchMap((timespan) => { this.timespan = timespan; if (!this.widget && !firstRun) { - this.storageService.setValue('miningWindowPreference', timespan); + this.storageService.setValue('lightningWindowPreference', timespan); } firstRun = false; this.miningWindowPreference = timespan; this.isLoading = true; - return this.lightningApiService.listStatistics$() + return this.lightningApiService.listStatistics$(timespan) .pipe( - tap((data) => { + 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]), @@ -89,9 +90,15 @@ export class NodesNetworksChartComponent implements OnInit { }); this.isLoading = false; }), + map((response) => { + return { + days: parseInt(response.headers.get('x-total-count'), 10), + }; + }), ); }), - ) + share() + ); } prepareChartOptions(data) { diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html index 566bf918e..7deb681a0 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html @@ -5,9 +5,43 @@ + +
+
+ + + + + + + +
+
-
+
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 2cf94c8ef..d95205542 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 @@ -1,7 +1,7 @@ import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core'; import { EChartsOption, graphic } from 'echarts'; import { Observable } from 'rxjs'; -import { startWith, switchMap, tap } from 'rxjs/operators'; +import { map, startWith, switchMap, tap } from 'rxjs/operators'; import { SeoService } from 'src/app/services/seo.service'; import { formatNumber } from '@angular/common'; import { FormBuilder, FormGroup } from '@angular/forms'; @@ -38,7 +38,7 @@ export class LightningStatisticsChartComponent implements OnInit { @HostBinding('attr.dir') dir = 'ltr'; - blockSizesWeightsObservable$: Observable; + capacityObservable$: Observable; isLoading = true; formatNumber = formatNumber; timespan = ''; @@ -57,34 +57,44 @@ export class LightningStatisticsChartComponent implements OnInit { ngOnInit(): void { let firstRun = true; - this.miningWindowPreference = this.miningService.getDefaultTimespan('24h'); + if (this.widget) { + this.miningWindowPreference = '1y'; + } else { + this.seoService.setTitle($localize`Channels and Capacity`); + this.miningWindowPreference = this.miningService.getDefaultTimespan('all'); + } this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference }); this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference); - this.radioGroupForm.get('dateSpan').valueChanges + this.capacityObservable$ = this.radioGroupForm.get('dateSpan').valueChanges .pipe( startWith(this.miningWindowPreference), switchMap((timespan) => { this.timespan = timespan; - if (!firstRun) { - this.storageService.setValue('miningWindowPreference', timespan); + if (!this.widget && !firstRun) { + this.storageService.setValue('lightningWindowPreference', timespan); } firstRun = false; this.miningWindowPreference = timespan; this.isLoading = true; - return this.lightningApiService.listStatistics$() + return this.lightningApiService.listStatistics$(timespan) .pipe( - tap((data) => { + tap((response) => { + const data = response.body; this.prepareChartOptions({ channel_count: data.map(val => [val.added * 1000, val.channel_count]), capacity: data.map(val => [val.added * 1000, val.total_capacity]), }); this.isLoading = false; }), + map((response) => { + return { + days: parseInt(response.headers.get('x-total-count'), 10), + }; + }), ); }), - ).subscribe(() => { - }); + ) } prepareChartOptions(data) {