mempool/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

<app-nodes-channels-map [style]="'widget'"></app-nodes-channels-map>

<div class="container-xl dashboard-container">

  <div class="row row-cols-1 row-cols-md-2">

    <!-- Network capacity/channels/nodes -->
    <div class="col">
      <div class="main-title">
        <span i18n="lightning.network-statistics-title">Network Statistics</span>&nbsp;
      </div>
      <div class="card-wrapper">
        <div class="card" style="height: 123px">
          <div class="card-body more-padding">
            <app-node-statistics [statistics$]="statistics$"></app-node-statistics>
          </div>
        </div>
      </div>
    </div>

    <!-- Channels stats -->
    <div class="col">
      <div class="main-title">
        <span i18n="lightning.channel-statistics-title">Channels Statistics</span>&nbsp;
      </div>
      <div class="card-wrapper">
        <div class="card" style="height: 123px">
          <div class="card-body more-padding">
            <app-channels-statistics [statistics$]="statistics$"></app-channels-statistics>
          </div>
        </div>
      </div>
    </div>

    <!-- ISP pie chart -->
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card">
        <div class="card-body pl-2 pr-2">
          <div class="mempool-graph">
            <app-nodes-per-isp-chart [height]="graphHeight" [widget]="true"></app-nodes-per-isp-chart>
          </div>
          <div style="margin-top: 5px"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- Network history -->
    <div class="col">
      <div class="card">
        <div class="card-body pl-2 pr-2 pt-1">
          <div class="mempool-graph">
            <h5 class="card-title mt-3" i18n="lightning.network-history">Lightning Network History</h5>
            <app-lightning-statistics-chart [height]="(graphHeight / 1.7)" [widget]=true></app-lightning-statistics-chart>
            <app-nodes-networks-chart [height]="(graphHeight / 1.7)" [widget]=true></app-nodes-networks-chart>
          </div>
          <div><a [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- Top nodes per capacity -->
    <div class="col" style="max-height: 410px">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
        </div>
      </div>
    </div>

    <!-- Top nodes per channels -->
    <div class="col" style="max-height: 410px">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
        </div>
      </div>
    </div>

  </div>

</div>