RTL/src/app/clightning/home/home.component.html

<div fxLayout="column" fxLayout.gt-sm="row wrap">
  <div fxFlex="20" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoading[2]==='error','custom-card': true}">
      <mat-card-header class="bg-primary" fxLayoutAlign="center end">
        <mat-card-title class="m-0 pt-2">
          <h5>Wallet Balance</h5>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <mat-icon class="icon-large">account_balance_wallet</mat-icon>
        </mat-card-content>
        <span *ngIf="information?.currency_unit; else withoutData">
          <h3 *ngIf="selNode?.satsToBTC; else smallerUnit1">{{totalBalance.btc_confBalance | number}}
            {{information?.currency_unit}}</h3>
          <ng-template #smallerUnit1>
            <h3>{{totalBalance.confBalance | number}} {{information?.smaller_currency_unit}}</h3>
          </ng-template>
        </span>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[2]===true" mode="indeterminate"></mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="20" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoading[0]==='error','custom-card': true}">
      <mat-card-header class="bg-primary" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-2">
          <h5>Peers</h5>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <mat-icon class="icon-large">group</mat-icon>
        </mat-card-content>
        <h3 *ngIf="information.num_peers; else zeroPeers">{{information?.num_peers | number}}</h3>
        <ng-template #zeroPeers>
          <h3>0</h3>
        </ng-template>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="20" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoading[3]==='error','custom-card': true}">
      <mat-card-header class="bg-primary" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-2">
          <h5>Channel Balance</h5>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <mat-icon class="icon-large">linear_scale</mat-icon>
        </mat-card-content>
        <span *ngIf="information?.currency_unit; else withoutData">
          <h3 *ngIf="selNode?.satsToBTC; else smallerUnit2">{{lrBalance.btc_localBalance | number}}
            {{information?.currency_unit}}</h3>
          <ng-template #smallerUnit2>
            <h3>{{lrBalance.localBalance | number}} {{information?.smaller_currency_unit}}</h3>
          </ng-template>
        </span>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[3]===true || flgLoading[0]===true" mode="indeterminate">
      </mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="20" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoading[1]==='error','custom-card': true}">
      <mat-card-header class="bg-primary" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-2">
          <h5>Fee Report</h5>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <mat-icon class="icon-large">redeem</mat-icon>
        </mat-card-content>
        <h3>{{fees?.feeCollected | number}} (mSats)</h3>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[1]===true || flgLoading[0]===true" mode="indeterminate">
      </mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="20" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoading[0]==='error','custom-card': true}">
      <mat-card-header class="bg-primary" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-2">
          <h5>Channel Status</h5>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div fxLayout="column" class="pl-4">
          <mat-list class="channel-status-list" fxFlex="100" fxLayoutAlign="start start">
            <mat-list-item fxFlex="65" fxLayoutAlign="start start">Active</mat-list-item>
            <mat-list-item fxFlex="25" fxLayoutAlign="start start">
              <p class="mat-button-text">{{information?.num_active_channels}}</p>
            </mat-list-item>
            <mat-divider></mat-divider>
          </mat-list>
          <mat-list class="channel-status-list" fxFlex="100" fxLayoutAlign="start start">
            <mat-list-item fxFlex="65" fxLayoutAlign="start start">Inactive</mat-list-item>
            <mat-list-item fxFlex="25" fxLayoutAlign="start start">
              <p class="mat-button-text">{{information?.num_inactive_channels}}</p>
            </mat-list-item>
            <mat-divider></mat-divider>
          </mat-list>
          <mat-list class="channel-status-list" fxFlex="100" fxLayoutAlign="start start">
            <mat-list-item fxFlex="65" fxLayoutAlign="start start">Pending</mat-list-item>
            <mat-list-item fxFlex="25" fxLayoutAlign="start start">
              <p class="mat-button-text">{{information?.num_pending_channels}}</p>
            </mat-list-item>
            <mat-divider></mat-divider>
          </mat-list>
        </div>
        <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate" class="mt-minus-5"></mat-progress-bar>
        <mat-divider></mat-divider>
      </mat-card-content>
    </mat-card>
  </div>
</div>
<div fxLayout="column" fxLayout.gt-sm="row wrap">
  <div fxFlex="40" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoading[3]==='error','custom-card': true}">
      <mat-card-header class="bg-primary" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-2">
          <h5>Local-Remote Channel Capacity</h5>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div fxLayout="row" class="card-chnl-balances">
          <div fxFlex="100" fxLayoutAlign="center center">
            <ngx-charts-bar-vertical [view]="view" [scheme]="colorScheme" [results]="lrBalances"
              [yAxisLabel]="yAxisLabel" [yScaleMax]="maxBalanceValue" xAxis="false" yAxis="true" showYAxis="true"
              showDataLabel="true" tooltipDisabled="true">
            </ngx-charts-bar-vertical>
          </div>
        </div>
        <mat-progress-bar *ngIf="flgLoading[5]===true" mode="indeterminate" class="mt-minus-5"></mat-progress-bar>
        <mat-divider></mat-divider>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="30" class="padding-gap">
    <rtl-cl-fee-rates [flgLoading]="flgLoading[4]" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'"></rtl-cl-fee-rates>
  </div>
  <div fxFlex="30" class="padding-gap">
    <rtl-cl-fee-rates [flgLoading]="flgLoading[4]" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'"></rtl-cl-fee-rates>
  </div>
</div>
<ng-template #withoutData>
  <h3>Sats</h3>
</ng-template>