RTL/src/app/lnd/network-info/network-info.component.html

<div fxLayout="column" fxLayoutAlign="space-between stretch" class="mb-4">
  <mat-grid-list *ngIf="selNode.userPersona !== userPersonaEnum.OPERATOR" cols="3" rowHeight="330px">
    <mat-grid-tile class="node-grid-tile" *ngFor="let card of nodeCards" [colspan]="card.cols" [rowspan]="card.rows">
      <div fxLayout="column" fxLayoutAlign="stretch start" fxFlex="100" class="h-100">
        <div fxLayout="row" fxLayoutAlign="start start" class="w-100">
          <div fxLayout="row" fxLayoutAlign="start start" class="padding-gap-x page-title-container">
            <fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
            <span>{{card.title}}</span>
          </div>
        </div>
        <div fxLayout="column" fxLayoutAlign="stretch center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="center stretch" class="w-100 h-93">
          <mat-card fxLayout="row" fxFlex="95" fxLayoutAlign="start stretch" class="dashboard-card p-24 w-96 h-93">
            <mat-card-content fxFlex="100" class="dashboard-card-content">
              <div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
                <rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info>
                <rtl-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [ngClass]="{'error-border': flgLoading[2]==='error'}"></rtl-fee-info>
                <rtl-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [ngClass]="{'error-border': flgLoading[3]==='error' || flgLoading[4]==='error'}"></rtl-channel-status-info>
              </div>
            </mat-card-content>
          </mat-card>
        </div>          
      </div>
    </mat-grid-tile>
  </mat-grid-list>
  <div fxLayout="row" fxLayoutAlign="start end" class="padding-gap-x page-title-container" [ngClass]="{'mt-1': screenSize !== screenSizeEnum.XS}">
    <fa-icon [icon]="faProjectDiagram" class="page-title-img mr-1"></fa-icon>
    <span class="page-title">Network</span>
  </div>
  <mat-grid-list cols="3" rowHeight="250px">
    <mat-grid-tile fxLayout="row" *ngFor="let card of networkCards" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card fxLayout="row" fxFlex="95" fxLayoutAlign="start stretch" class="dashboard-card p-24 h-93">
        <mat-card-content fxFlex="100" class="dashboard-card-content">
          <div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
            <div fxFlex="100" *ngSwitchCase="'general'" [ngClass]="{'error-border': flgLoading[1]==='error'}"><ng-container *ngTemplateOutlet="generalBlock"></ng-container></div>
            <div fxFlex="100" *ngSwitchCase="'channels'" [ngClass]="{'error-border': flgLoading[1]==='error'}"><ng-container *ngTemplateOutlet="channelsBlock"></ng-container></div>
            <div fxFlex="100" *ngSwitchCase="'degrees'" [ngClass]="{'error-border': flgLoading[1]==='error'}"><ng-container *ngTemplateOutlet="degreesBlock"></ng-container></div>
          </div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<ng-template #generalBlock>
  <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between">
    <div>
      <h4 class="dashboard-info-title">Network Capacity</h4>
      <div class="dashboard-info-value">{{networkInfo.total_network_capacity | number}} Sats</div>
    </div>
    <div>
      <h4 class="dashboard-info-title">Number of Nodes</h4>
      <div class="dashboard-info-value">{{networkInfo.num_nodes | number}}</div>
    </div>
    <div>
      <h4 class="dashboard-info-title">Number of Channels</h4>
      <span class="overflow-wrap dashboard-info-value">{{networkInfo.num_channels | number}}</span>
    </div>
  </div>
</ng-template>
<ng-template #channelsBlock>
  <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between">
    <div>
      <h4 class="dashboard-info-title">Max Channel Size</h4>
      <div class="dashboard-info-value">{{networkInfo.max_channel_size | number}}</div>
    </div>
    <div>
      <h4 class="dashboard-info-title">Avg Channel Size</h4>
      <div class="dashboard-info-value">{{networkInfo.avg_channel_size | number}}</div>
    </div>
    <div>
      <h4 class="dashboard-info-title">Min Channel Size</h4>
      <span class="overflow-wrap dashboard-info-value">{{networkInfo.min_channel_size | number}}</span>
    </div>
  </div>
</ng-template>
<ng-template #degreesBlock>
  <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between">
    <div>
      <h4 class="dashboard-info-title">Max Out Degree</h4>
      <div class="dashboard-info-value">{{networkInfo.max_out_degree | number}}</div>
    </div>
    <div>
      <h4 class="dashboard-info-title">Avg Out Degree</h4>
      <div class="dashboard-info-value">{{networkInfo.avg_out_degree | number:'1.0-2'}}</div>
    </div>
    <div fxFlex="20">
      <h4 class="dashboard-info-title"></h4>
      <span class="overflow-wrap dashboard-info-value"></span>
    </div>
  </div>
</ng-template>