From 51ac04f20716f7bd2269125941d33ddcfe892674 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Thu, 23 Feb 2023 18:19:47 +0900 Subject: [PATCH 1/8] Fix design for node liquidity ranking --- .../tx-bowtie-graph.component.ts | 10 +- .../lightning-dashboard.component.html | 2 +- .../top-nodes-per-capacity.component.html | 91 ++++++------- .../top-nodes-per-capacity.component.scss | 121 ++++++++---------- .../top-nodes-per-capacity.component.ts | 20 ++- .../top-nodes-per-channels.component.ts | 4 +- 6 files changed, 110 insertions(+), 138 deletions(-) diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts index cd1fc6855..49d97dd40 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts +++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts @@ -196,8 +196,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands); this.middle = { - path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.25} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.25}`, - style: `stroke-width: ${this.combinedWeight + 0.5}; stroke: ${this.gradient[1]}` + path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`, + style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}` }; this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false) @@ -254,7 +254,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { const lineParams = weights.map((w, i) => { return { weight: w, - thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.min(this.combinedWeight + 0.5, Math.max(this.minWeight - 1, w) + 1), + thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.max(this.minWeight - 1, w) + 1, offset: 0, innerY: 0, outerY: 0, @@ -266,7 +266,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { // bounds of the middle segment const innerTop = (this.height / 2) - (this.combinedWeight / 2); - const innerBottom = innerTop + this.combinedWeight + 0.5; + const innerBottom = innerTop + this.combinedWeight; // tracks the visual bottom of the endpoints of the previous line let lastOuter = 0; let lastInner = innerTop; @@ -291,7 +291,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { // set the vertical position of the (center of the) outer side of the line line.outerY = lastOuter + (line.thickness / 2); - line.innerY = Math.min(innerBottom - (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2))); + line.innerY = Math.min(innerBottom + (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2))); // special case to center single input/outputs if (xputs.length === 1) { 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 c12565d6d..c00a4be58 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -55,7 +55,7 @@ -
+
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html index 9a169bb44..a9e30705e 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html @@ -1,71 +1,56 @@ -
-

- Top 100 nodes liquidity ranking -

-
- + +
+

Liquidity Ranking

+ +
+ +
+
- - - - - - - + + + + + + + - - - + + - - - + - - - - - - - - - - - - - - - -
AliasLiquidityChannelsFirst seenLast updateLocationAliasLiquidity{{ currency$ | async }}ChannelsFirst seenLast updateLocation
- {{ i + 1 }} +
+
+ + {{ node.alias }} + +
- {{ node.alias }} - + + + + {{ node.channels | number }} + + +
- - - - - - - - - - - - - -
+ + +
+
+
-
\ No newline at end of file + +
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index 59151f6b2..d177a8b01 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -1,91 +1,70 @@ +.spinner-border { + height: 25px; + width: 25px; + margin-top: 13px; +} + .container-xl { max-width: 1400px; - padding-bottom: 100px; - @media (min-width: 960px) { - padding-left: 50px; - padding-right: 50px; - } +} +.container-xl.widget { + padding-right: 0px; + padding-left: 0px; + padding-bottom: 0px; +} +.container-xl.legacy { + max-width: 1140px; } -.table td, .table th { - padding: 0.5rem; +.container { + max-width: 100%; } -.full .rank { - width: 5%; -} -.widget .rank { - @media (min-width: 960px) { - width: 13%; - } - @media (max-width: 960px) { - padding-left: 0px; - padding-right: 0px; - } +tr, td, th { + border: 0px; + padding-top: 0.65rem !important; + padding-bottom: 0.7rem !important; } -.full .alias { - width: 20%; +.clear-link { + color: white; +} + +.disabled { + pointer-events: none; + opacity: 0.5; +} + +.progress { + background-color: #2d3348; +} + +.pool { + width: 15%; + @media (max-width: 576px) { + width: 75%; + } overflow: hidden; text-overflow: ellipsis; - max-width: 350px; - @media (max-width: 960px) { - width: 40%; - max-width: 500px; - } + white-space: nowrap; + max-width: 160px; } -.widget .alias { - width: 60%; - overflow: hidden; +.pool-name { + display: inline-block; + vertical-align: text-top; text-overflow: ellipsis; - max-width: 350px; - @media (max-width: 960px) { - max-width: 175px; - } + overflow: hidden; } -.full .capacity { +.liquidity { width: 10%; - @media (max-width: 960px) { - width: 30%; - } -} -.widget .capacity { - width: 32%; - @media (max-width: 960px) { - padding-left: 0px; - padding-right: 0px; + @media (max-width: 576px) { + width: 25%; } } -.full .channels { +.fiat { width: 15%; - padding-right: 50px; - @media (max-width: 960px) { - display: none; - } + font-family: monospace; + font-size: 14px; } - -.full .timestamp-first { - width: 10%; - @media (max-width: 960px) { - display: none; - } -} - -.full .timestamp-update { - width: 10%; - @media (max-width: 960px) { - display: none; - } -} - -.full .location { - width: 15%; - @media (max-width: 960px) { - width: 30%; - } - @media (max-width: 600px) { - display: none; - } -} \ No newline at end of file diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts index 766e7f090..489ba9b21 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts @@ -1,5 +1,6 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { map, Observable } from 'rxjs'; +import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { map, Observable, Subscription } from 'rxjs'; +import { StateService } from 'src/app/services/state.service'; import { INodesRanking, ITopNodesPerCapacity } from '../../../interfaces/node-api.interface'; import { SeoService } from '../../../services/seo.service'; import { isMobile } from '../../../shared/common.utils'; @@ -12,24 +13,31 @@ import { LightningApiService } from '../../lightning-api.service'; styleUrls: ['./top-nodes-per-capacity.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TopNodesPerCapacity implements OnInit { +export class TopNodesPerCapacity implements OnInit, OnDestroy { @Input() nodes$: Observable; @Input() widget: boolean = false; topNodesPerCapacity$: Observable; skeletonRows: number[] = []; + currency$: Observable; constructor( private apiService: LightningApiService, - private seoService: SeoService + private seoService: SeoService, + private stateService: StateService, ) {} + ngOnDestroy(): void { + } + ngOnInit(): void { + this.currency$ = this.stateService.fiatCurrency$; + if (!this.widget) { this.seoService.setTitle($localize`:@@2d9883d230a47fbbb2ec969e32a186597ea27405:Liquidity Ranking`); } - for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 7) : 100); ++i) { + for (let i = 1; i <= (this.widget ? 6 : 100); ++i) { this.skeletonRows.push(i); } @@ -50,7 +58,7 @@ export class TopNodesPerCapacity implements OnInit { } else { this.topNodesPerCapacity$ = this.nodes$.pipe( map((ranking) => { - return ranking.topByCapacity.slice(0, isMobile() ? 8 : 7); + return ranking.topByCapacity.slice(0, 6); }) ); } diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts index 2c88e4bae..ac67787e6 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts @@ -23,7 +23,7 @@ export class TopNodesPerChannels implements OnInit { ) {} ngOnInit(): void { - for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 7) : 100); ++i) { + for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 6) : 100); ++i) { this.skeletonRows.push(i); } @@ -44,7 +44,7 @@ export class TopNodesPerChannels implements OnInit { } else { this.topNodesPerChannels$ = this.nodes$.pipe( map((ranking) => { - return ranking.topByChannels.slice(0, isMobile() ? 8 : 7); + return ranking.topByChannels.slice(0, isMobile() ? 8 : 6); }) ); } From 50c3f834840239ed3520e2fafb43592559796e12 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Thu, 23 Feb 2023 18:36:13 +0900 Subject: [PATCH 2/8] Fix design for node channels ranking --- .../lightning-dashboard.component.html | 2 +- .../top-nodes-per-capacity.component.scss | 22 ----- .../top-nodes-per-capacity.component.ts | 10 +- .../top-nodes-per-channels.component.html | 89 +++++++---------- .../top-nodes-per-channels.component.scss | 99 ++++++------------- .../top-nodes-per-channels.component.ts | 5 + 6 files changed, 74 insertions(+), 153 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 c00a4be58..b73d21bcd 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -69,7 +69,7 @@
-
+
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index d177a8b01..b7ed8cf04 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -1,9 +1,3 @@ -.spinner-border { - height: 25px; - width: 25px; - margin-top: 13px; -} - .container-xl { max-width: 1400px; } @@ -12,13 +6,6 @@ padding-left: 0px; padding-bottom: 0px; } -.container-xl.legacy { - max-width: 1140px; -} - -.container { - max-width: 100%; -} tr, td, th { border: 0px; @@ -30,15 +17,6 @@ tr, td, th { color: white; } -.disabled { - pointer-events: none; - opacity: 0.5; -} - -.progress { - background-color: #2d3348; -} - .pool { width: 15%; @media (max-width: 576px) { diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts index 489ba9b21..4925256c0 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts @@ -1,9 +1,8 @@ -import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { map, Observable, Subscription } from 'rxjs'; +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; +import { map, Observable } from 'rxjs'; import { StateService } from 'src/app/services/state.service'; import { INodesRanking, ITopNodesPerCapacity } from '../../../interfaces/node-api.interface'; import { SeoService } from '../../../services/seo.service'; -import { isMobile } from '../../../shared/common.utils'; import { GeolocationData } from '../../../shared/components/geolocation/geolocation.component'; import { LightningApiService } from '../../lightning-api.service'; @@ -13,7 +12,7 @@ import { LightningApiService } from '../../lightning-api.service'; styleUrls: ['./top-nodes-per-capacity.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TopNodesPerCapacity implements OnInit, OnDestroy { +export class TopNodesPerCapacity implements OnInit { @Input() nodes$: Observable; @Input() widget: boolean = false; @@ -27,9 +26,6 @@ export class TopNodesPerCapacity implements OnInit, OnDestroy { private stateService: StateService, ) {} - ngOnDestroy(): void { - } - ngOnInit(): void { this.currency$ = this.stateService.fiatCurrency$; diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html index 7d02e510f..ccb6a48fe 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html @@ -1,71 +1,56 @@ -
-

- Top 100 nodes connectivity ranking -

-
+ +
+

Liquidity Ranking

+ +
+ +
- - - - - - + + + + + + - - - + + - - - - + - - - + - - - - - - - - - - - - -
AliasChannelsLiquidityFirst seenLast updateLocationChannelsCapacity{{ currency$ | async }}First seenLast updateLocation
- {{ i + 1 }} +
+
+ + {{ node.alias }} + +
- {{ node.alias }} - + {{ node.channels | number }} + + + + + +
- - - - - - - - - - - - - -
+ + +
+
+
-
\ No newline at end of file + +
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss index 59151f6b2..b7ed8cf04 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss @@ -1,91 +1,48 @@ .container-xl { max-width: 1400px; - padding-bottom: 100px; - @media (min-width: 960px) { - padding-left: 50px; - padding-right: 50px; - } +} +.container-xl.widget { + padding-right: 0px; + padding-left: 0px; + padding-bottom: 0px; } -.table td, .table th { - padding: 0.5rem; +tr, td, th { + border: 0px; + padding-top: 0.65rem !important; + padding-bottom: 0.7rem !important; } -.full .rank { - width: 5%; -} -.widget .rank { - @media (min-width: 960px) { - width: 13%; - } - @media (max-width: 960px) { - padding-left: 0px; - padding-right: 0px; - } +.clear-link { + color: white; } -.full .alias { - width: 20%; +.pool { + width: 15%; + @media (max-width: 576px) { + width: 75%; + } overflow: hidden; text-overflow: ellipsis; - max-width: 350px; - @media (max-width: 960px) { - width: 40%; - max-width: 500px; - } + white-space: nowrap; + max-width: 160px; } -.widget .alias { - width: 60%; - overflow: hidden; +.pool-name { + display: inline-block; + vertical-align: text-top; text-overflow: ellipsis; - max-width: 350px; - @media (max-width: 960px) { - max-width: 175px; - } + overflow: hidden; } -.full .capacity { +.liquidity { width: 10%; - @media (max-width: 960px) { - width: 30%; - } -} -.widget .capacity { - width: 32%; - @media (max-width: 960px) { - padding-left: 0px; - padding-right: 0px; + @media (max-width: 576px) { + width: 25%; } } -.full .channels { +.fiat { width: 15%; - padding-right: 50px; - @media (max-width: 960px) { - display: none; - } + font-family: monospace; + font-size: 14px; } - -.full .timestamp-first { - width: 10%; - @media (max-width: 960px) { - display: none; - } -} - -.full .timestamp-update { - width: 10%; - @media (max-width: 960px) { - display: none; - } -} - -.full .location { - width: 15%; - @media (max-width: 960px) { - width: 30%; - } - @media (max-width: 600px) { - display: none; - } -} \ No newline at end of file diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts index ac67787e6..f1740e5bc 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { map, Observable } from 'rxjs'; +import { StateService } from 'src/app/services/state.service'; import { INodesRanking, ITopNodesPerChannels } from '../../../interfaces/node-api.interface'; import { isMobile } from '../../../shared/common.utils'; import { GeolocationData } from '../../../shared/components/geolocation/geolocation.component'; @@ -17,12 +18,16 @@ export class TopNodesPerChannels implements OnInit { topNodesPerChannels$: Observable; skeletonRows: number[] = []; + currency$: Observable; constructor( private apiService: LightningApiService, + private stateService: StateService, ) {} ngOnInit(): void { + this.currency$ = this.stateService.fiatCurrency$; + for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 6) : 100); ++i) { this.skeletonRows.push(i); } From 7e913e4d34f417fb16248abad85cea4a30c160ee Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Thu, 23 Feb 2023 18:57:55 +0900 Subject: [PATCH 3/8] Show geolocation in node channels ranking widget --- backend/src/api/explorer/nodes.api.ts | 20 +++++++++++++++---- .../top-nodes-per-channels.component.html | 6 +++--- .../top-nodes-per-channels.component.scss | 3 +++ .../top-nodes-per-channels.component.ts | 13 ++++++++++-- 4 files changed, 33 insertions(+), 9 deletions(-) diff --git a/backend/src/api/explorer/nodes.api.ts b/backend/src/api/explorer/nodes.api.ts index b3f83faa6..6d1d8aa0a 100644 --- a/backend/src/api/explorer/nodes.api.ts +++ b/backend/src/api/explorer/nodes.api.ts @@ -228,7 +228,7 @@ class NodesApi { nodes.capacity FROM nodes ORDER BY capacity DESC - LIMIT 100 + LIMIT 6 `; [rows] = await DB.query(query); @@ -269,14 +269,26 @@ class NodesApi { let query: string; if (full === false) { query = ` - SELECT nodes.public_key as publicKey, IF(nodes.alias = '', SUBSTRING(nodes.public_key, 1, 20), alias) as alias, - nodes.channels + SELECT + nodes.public_key as publicKey, + IF(nodes.alias = '', SUBSTRING(nodes.public_key, 1, 20), alias) as alias, + nodes.channels, + geo_names_city.names as city, geo_names_country.names as country, + geo_names_iso.names as iso_code, geo_names_subdivision.names as subdivision FROM nodes + LEFT JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country' + LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city' + LEFT JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code' + LEFT JOIN geo_names geo_names_subdivision on geo_names_subdivision.id = nodes.subdivision_id AND geo_names_subdivision.type = 'division' ORDER BY channels DESC - LIMIT 100; + LIMIT 6; `; [rows] = await DB.query(query); + for (let i = 0; i < rows.length; ++i) { + rows[i].country = JSON.parse(rows[i].country); + rows[i].city = JSON.parse(rows[i].city); + } } else { query = ` SELECT nodes.public_key AS publicKey, IF(nodes.alias = '', SUBSTRING(nodes.public_key, 1, 20), alias) as alias, diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html index ccb6a48fe..538cae1c2 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html @@ -8,13 +8,13 @@
- + - + @@ -40,7 +40,7 @@ - diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss index b7ed8cf04..ffde7c479 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss @@ -33,6 +33,9 @@ tr, td, th { text-overflow: ellipsis; overflow: hidden; } +.pool.widget { + width: 45%; +} .liquidity { width: 10%; diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts index f1740e5bc..79a6eb28f 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts @@ -28,7 +28,7 @@ export class TopNodesPerChannels implements OnInit { ngOnInit(): void { this.currency$ = this.stateService.fiatCurrency$; - for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 6) : 100); ++i) { + for (let i = 1; i <= (this.widget ? 6 : 100); ++i) { this.skeletonRows.push(i); } @@ -49,7 +49,16 @@ export class TopNodesPerChannels implements OnInit { } else { this.topNodesPerChannels$ = this.nodes$.pipe( map((ranking) => { - return ranking.topByChannels.slice(0, isMobile() ? 8 : 6); + for (const i in ranking.topByChannels) { + ranking.topByChannels[i].geolocation = { + country: ranking.topByChannels[i].country?.en, + city: ranking.topByChannels[i].city?.en, + subdivision: ranking.topByChannels[i].subdivision?.en, + iso: ranking.topByChannels[i].iso_code, + }; + console.log(ranking.topByChannels[i].geolocation); + } + return ranking.topByChannels; }) ); } From a26dc977ba0783bc6beb492741c2f1a007531e4e Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Fri, 24 Feb 2023 14:20:16 +0900 Subject: [PATCH 4/8] Hide new columns when screen width is too small --- .../top-nodes-per-capacity.component.html | 4 ++-- .../top-nodes-per-capacity.component.scss | 3 +++ .../top-nodes-per-channels.component.html | 6 +++--- .../top-nodes-per-channels.component.scss | 10 +++++----- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html index a9e30705e..3efbc8594 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html @@ -10,7 +10,7 @@ - + @@ -28,7 +28,7 @@ - - + @@ -26,7 +26,7 @@ - diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss index ffde7c479..eba9afee9 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss @@ -44,8 +44,8 @@ tr, td, th { } } -.fiat { - width: 15%; - font-family: monospace; - font-size: 14px; -} +.geolocation { + @media (max-width: 991px) { + display: none !important; + } +} \ No newline at end of file From 7cee6df369533475c5ace2f043b25082f07115af Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Fri, 24 Feb 2023 17:47:33 +0900 Subject: [PATCH 5/8] Remove console.log --- .../top-nodes-per-channels/top-nodes-per-channels.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts index 79a6eb28f..cd5796664 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts @@ -56,7 +56,6 @@ export class TopNodesPerChannels implements OnInit { subdivision: ranking.topByChannels[i].subdivision?.en, iso: ranking.topByChannels[i].iso_code, }; - console.log(ranking.topByChannels[i].geolocation); } return ranking.topByChannels; }) From 98e709b739ab95bad3f78358549393f3c1441a85 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Fri, 24 Feb 2023 17:49:06 +0900 Subject: [PATCH 6/8] Remove monospace from fiat amount --- .../top-nodes-per-capacity.component.scss | 2 -- .../top-nodes-per-channels/top-nodes-per-channels.component.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index 452122d8e..787f64f30 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -43,8 +43,6 @@ tr, td, th { .fiat { width: 15%; - font-family: monospace; - font-size: 14px; @media (max-width: 991px) { display: none !important; } diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts index cd5796664..62f461c6c 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core import { map, Observable } from 'rxjs'; import { StateService } from 'src/app/services/state.service'; import { INodesRanking, ITopNodesPerChannels } from '../../../interfaces/node-api.interface'; -import { isMobile } from '../../../shared/common.utils'; import { GeolocationData } from '../../../shared/components/geolocation/geolocation.component'; import { LightningApiService } from '../../lightning-api.service'; From 92862939dace11804d366e48607b2ede15c49a29 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Fri, 24 Feb 2023 20:25:28 +0900 Subject: [PATCH 7/8] Make sure we don't show more than 6 rows in channel ranking widget --- .../top-nodes-per-channels/top-nodes-per-channels.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts index 62f461c6c..ce6436ce3 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts @@ -56,7 +56,7 @@ export class TopNodesPerChannels implements OnInit { iso: ranking.topByChannels[i].iso_code, }; } - return ranking.topByChannels; + return ranking.topByChannels.slice(0, 6); }) ); } From 80e0ef8970d39617008c45487dfb91f099cf02fd Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Sat, 25 Feb 2023 13:20:49 +0900 Subject: [PATCH 8/8] Improve responsiveness on single column layout --- .../top-nodes-per-capacity.component.scss | 9 ++++++--- .../top-nodes-per-channels.component.scss | 5 ++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index 787f64f30..3547c447f 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -19,7 +19,7 @@ tr, td, th { .pool { width: 15%; - @media (max-width: 576px) { + @media (max-width: 575px) { width: 75%; } overflow: hidden; @@ -36,14 +36,17 @@ tr, td, th { .liquidity { width: 10%; - @media (max-width: 576px) { + @media (max-width: 575px) { width: 25%; } } .fiat { width: 15%; - @media (max-width: 991px) { + @media (min-width: 768px) and (max-width: 991px) { + display: none !important; + } + @media (max-width: 575px) { display: none !important; } } diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss index eba9afee9..a42599d69 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss @@ -45,7 +45,10 @@ tr, td, th { } .geolocation { - @media (max-width: 991px) { + @media (min-width: 768px) and (max-width: 991px) { + display: none !important; + } + @media (max-width: 575px) { display: none !important; } } \ No newline at end of file
AliasAlias Channels Capacity {{ currency$ | async }} First seen Last updateLocationLocation
+
Alias Liquidity{{ currency$ | async }}{{ currency$ | async }} Channels First seen Last update + diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index b7ed8cf04..452122d8e 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -45,4 +45,7 @@ tr, td, th { width: 15%; font-family: monospace; font-size: 14px; + @media (max-width: 991px) { + display: none !important; + } } diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html index 538cae1c2..4bab712a8 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html @@ -14,7 +14,7 @@ {{ currency$ | async }} First seen Last updateLocationLocation
- {{ node.channels | number }} + {{ node.channels ? (node.channels | number) : '~' }} @@ -40,7 +40,7 @@ +