102 lines
4.7 KiB
HTML
102 lines
4.7 KiB
HTML
<div [class]="widget === false ? 'full-container' : ''">
|
|
|
|
<div *ngIf="widget">
|
|
<div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward">
|
|
<div class="item">
|
|
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
|
|
<p class="card-text" i18n-ngbTooltip="lightning.clearnet-capacity-desc"
|
|
ngbTooltip="How much liquidity is running on nodes advertising at least one clearnet IP address" placement="bottom">
|
|
<app-amount [satoshis]="stats.clearnetCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
|
|
</p>
|
|
</div>
|
|
<div class="item">
|
|
<h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
|
|
<p class="card-text" i18n-ngbTooltip="lightning.unknown-capacity-desc"
|
|
ngbTooltip="How much liquidity is running on nodes which ISP was not identifiable" placement="bottom">
|
|
<app-amount [satoshis]="stats.unknownCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
|
|
</p>
|
|
</div>
|
|
<div class="item">
|
|
<h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
|
|
<p class="card-text" i18n-ngbTooltip="lightning.tor-capacity-desc"
|
|
ngbTooltip="How much liquidity is running on nodes advertising only Tor addresses" placement="bottom">
|
|
<app-amount [satoshis]="stats.torCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-header" *ngIf="!widget">
|
|
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
|
|
<span i18n="lightning.top-100-isp-ln">Top 100 ISPs hosting LN nodes</span>
|
|
<button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
|
|
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
|
|
</button>
|
|
</div>
|
|
<small class="d-block" style="color: #ffffff66; min-height: 25px" >
|
|
<span i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
|
|
<div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
|
|
(chartInit)="onChartInit($event)">
|
|
</div>
|
|
|
|
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
|
<div class="spinner-border text-light"></div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-md-end toggle" *ngIf="!widget">
|
|
<app-toggle [textLeft]="'Sort by nodes'" [textRight]="'capacity'" [checked]="true" (toggleStatusChanged)="onGroupToggleStatusChanged($event)"></app-toggle>
|
|
</div>
|
|
|
|
<table class="table table-borderless text-center m-auto" style="max-width: 900px" *ngIf="!widget">
|
|
<thead>
|
|
<tr>
|
|
<th class="rank text-left pl-0" i18n="mining.rank">Rank</th>
|
|
<th class="name text-left" i18n="lightning.isp">ISP</th>
|
|
<th class="share text-right" i18n="lightning.share">Share</th>
|
|
<th class="nodes text-right" i18n="lightning.nodes-count">Nodes</th>
|
|
<th class="capacity text-right pr-0" i18n="lightning.capacity">Capacity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerAsObservable$ | async) as result">
|
|
<tr *ngFor="let isp of result.ispRanking">
|
|
<td class="rank text-left pl-0">{{ isp[5] }}</td>
|
|
<td class="name text-left text-truncate">
|
|
<a [routerLink]="[('/lightning/nodes/isp/' + isp[0]) | relativeUrl]">{{ isp[1] }}</a>
|
|
</td>
|
|
<td class="share text-right">{{ sortBy === 'capacity' ? isp[7] : isp[6] }}%</td>
|
|
<td class="nodes text-right">{{ isp[4] }}</td>
|
|
<td class="capacity text-right pr-0"><app-amount [satoshis]="isp[2]" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ng-template #loadingReward>
|
|
<div class="pool-distribution">
|
|
<div class="item">
|
|
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
|
|
<p class="card-text">
|
|
<span class="skeleton-loader skeleton-loader-big"></span>
|
|
</p>
|
|
</div>
|
|
<div class="item">
|
|
<h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
|
|
<p class="card-text">
|
|
<span class="skeleton-loader skeleton-loader-big"></span>
|
|
</p>
|
|
</div>
|
|
<div class="item">
|
|
<h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
|
|
<p class="card-text">
|
|
<span class="skeleton-loader skeleton-loader-big"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|