mempool/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.html

<app-indexing-progress></app-indexing-progress>

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

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

    <div class="col">
      <div class="main-title">
        <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
        <span style="font-size: xx-small" i18n="mining.144-blocks">(144 blocks)</span>
      </div>
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
            <app-acceleration-stats></app-acceleration-stats>
          </div>
        </div>
      </div>
    </div>

    <!-- difficulty adjustment -->
    <div class="col">
      <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
      <app-difficulty-mining [attr.data-cy]="'difficulty-adjustment'" [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty-mining>
    </div>

    <!-- acceleration fees graph -->
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card graph-card">
        <div class="card-body pl-2 pr-2">
          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true></app-acceleration-fees-graph>
          <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- block fee rates -->
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card">
        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
          <app-block-fee-rates-graph [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-block-fee-rates-graph>
          <div class="mt-1"><a [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" fragment="1m" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- Latest accelerations -->
    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/acceleration-list' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.latest-accelerations">Latest accelerations</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
          </a>
          <app-accelerations-list [attr.data-cy]="'latest-accelerations'" [widget]=true></app-accelerations-list>
        </div>
      </div>
    </div>

    <!-- Difficult adjustments -->
    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
          </a>
          <app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
        </div>
      </div>
    </div>

  </div>
</div>