mempool/frontend/src/app/components/statistics/statistics.component.html

<div class="container-graph">
  <div>
    <div *ngIf="loading" class="loading">
      <div class="text-center">
        <h3 i18n="statistics.loading-graphs">Loading graphs...</h3>
        <br>
        <div class="spinner-border text-light"></div>
      </div>
    </div>
    <div>
      <div class="card mb-3" *ngIf="mempoolStats.length">
        <div class="card-header">
          <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
          <form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
            <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
            <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H (LIVE)
              </label>
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'24h'" [routerLink]="['/graphs' | relativeUrl]" fragment="24h"> 24H
              </label>
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'1w'" [routerLink]="['/graphs' | relativeUrl]" fragment="1w"> 1W
              </label>
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'1m'" [routerLink]="['/graphs' | relativeUrl]" fragment="1m"> 1M
              </label>
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'3m'" [routerLink]="['/graphs' | relativeUrl]" fragment="3m"> 3M
              </label>
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'6m'" [routerLink]="['/graphs' | relativeUrl]" fragment="6m"> 6M
              </label>
              <label ngbButtonLabel class="btn-primary btn-sm">
                <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
              </label>
            </div>

            <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
              <button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
                <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
              </button>
              <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
                <ul>
                  <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
                    <ng-template [ngIf]="fee === 1">
                      <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
                        <ng-template [ngIf]="inverted">
                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
                        </ng-template>
                        <ng-template [ngIf]="!inverted">
                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
                        </ng-template>
                        <span class="fee-text" >0 - {{ fee }}</span>
                      </li>
                    </ng-template>
                    <ng-template [ngIf]="fee <= 500 && fee !== 1">
                      <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
                      <ng-template [ngIf]="inverted">
                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
                        <span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
                      </ng-template>
                      <ng-template [ngIf]="!inverted">
                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
                        <span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
                      </ng-template>
                    </li>
                    </ng-template>
                  </ng-template>
                </ul>
              </div>
            </div>

            <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
          </form>
        </div>
        <div class="card-body">
          <div class="incoming-transactions-graph">
            <app-mempool-graph
              dir="ltr"
              [template]="'advanced'"
              [limitFee]="500"
              [limitFilterFee]="filterFeeIndex"
              [height]="500"
              [left]="65"
              [right]="10"
              [data]="mempoolStats"
            ></app-mempool-graph>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="card mb-3" *ngIf="mempoolTransactionsWeightPerSecondData">
        <div class="card-header">
            <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
        </div>
        <div class="card-body">
          <div class="incoming-transactions-graph">
            <app-incoming-transactions-graph
              [height]="500"
              [left]="65"
              [template]="'advanced'"
              [data]="mempoolTransactionsWeightPerSecondData"
            ></app-incoming-transactions-graph>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>