mempool/frontend/src/app/components/acceleration/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">

    <!-- pending stats -->
    <div class="col">
      <div class="main-title">
        <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Active Accelerations</span>
      </div>
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
            <app-pending-stats [accelerations$]="pendingAccelerations$"></app-pending-stats>
          </div>
        </div>
      </div>
    </div>

    <!-- 1m stats -->
    <div class="col">
      <div class="main-title">
        <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
        @switch (timespan) {
          @case ('24h') {
            <span style="font-size: xx-small" i18n="mining.1-day">(1 day)</span>
          }
          @case ('1m') {
            <span style="font-size: xx-small" i18n="mining.1-month">(1 month)</span>
          }
          @case ('1y') {
            <span style="font-size: xx-small" i18n="mining.1-year">(1 year)</span>
          }
          @case ('all') {
            <span style="font-size: xx-small" i18n="mining.all-time">(all time)</span>
          }
        }
      </div>
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
            <app-acceleration-stats [timespan]="timespan"></app-acceleration-stats>
            <div class="widget-toggler">
              <a href="" (click)="setTimespan('24h')" class="toggler-option"
                [ngClass]="{'inactive': timespan === '24h'}"><small>24h</small></a>
              <span style="color: #ffffff66; font-size: 8px"> | </span>
              <a href="" (click)="setTimespan('1m')" class="toggler-option"
              [ngClass]="{'inactive': timespan === '1m'}"><small>1m</small></a>
              <span style="color: #ffffff66; font-size: 8px"> | </span>
              <a href="" (click)="setTimespan('1y')" class="toggler-option"
                [ngClass]="{'inactive': timespan === '1y'}"><small>1y</small></a>
              <span style="color: #ffffff66; font-size: 8px"> | </span>
              <a href="" (click)="setTimespan('all')" class="toggler-option"
              [ngClass]="{'inactive': timespan === 'all'}"><small>all</small></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Next block visualization -->
    <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">
          <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
            <h5 class="card-title d-inline">Mempool Goggles&trade; : <ng-container i18n="accelerator.accelerations">Accelerations</ng-container></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>
          <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
            <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
          </div>
        </div>
      </div>
    </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">
          <h5 class="card-title" i18n="acceleration.historical-trend">Historical Trend</h5>
          <div class="mempool-graph">
            <app-acceleration-fees-graph
              [height]="graphHeight"
              [attr.data-cy]="'acceleration-fees'"
              [widget]=true
              [period]="timespan"
              [right]="80"
              [left]="50"
            ></app-acceleration-fees-graph>
          </div>
          <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>

    <!-- Recent Accelerations List -->
    <div class="col">
      <div class="card list-card">
        <div class="card-body">
          <div class="title-link">
            <h5 class="card-title d-inline" i18n="accelerator.pending-accelerations">Active Accelerations</h5>
          </div>
          <app-accelerations-list [attr.data-cy]="'pending-accelerations'" [widget]=true [pending]=true [accelerations$]="pendingAccelerations$"></app-accelerations-list>
        </div>
      </div>
    </div>

    <!-- Confirmed List -->
    <div class="col">
      <div class="card list-card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</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-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
        </div>
      </div>
    </div>
  </div>
</div>