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); }) ); }