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

<div class="container-graph">
  <div>
    <div>
      <div class="card mb-3">
        <div class="card-header">
          <div class="d-flex d-md-block align-items-baseline">
            <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
            </button>
          </div>  

          <form [formGroup]="radioGroupForm" class="formRadioGroup"
            [class]="(stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING) ? 'mining' : 'no-menu'" (click)="saveGraphPreference()">
            <div class="small-buttons">
              <a class="btn btn-primary btn-sm mb-0" [routerLink]="['/clock/mempool/0' | relativeUrl]" style="color: white" id="btn-clock">
                <fa-icon [icon]="['fas', 'clock']" [fixedWidth]="true" i18n-title="master-page.clockview" title="Clock view"></fa-icon>
              </a>
              <a *ngIf="!isMobile()" class="btn btn-primary btn-sm mb-0" [routerLink]="['/tv' | relativeUrl]" style="color: white" id="btn-tv">
                <fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon>
              </a>
            </div>
            <div class="btn-toggle-rows" name="radioBasic">
              <div class="btn-group btn-group-toggle">
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '2h'">
                  <input type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h" formControlName="dateSpan"> 2H
                  (LIVE)
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
                  <input type="radio" [value]="'24h'" [routerLink]="['/graphs' | relativeUrl]" fragment="24h" formControlName="dateSpan">
                  24H
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '1w'">
                  <input type="radio" [value]="'1w'" [routerLink]="['/graphs' | relativeUrl]" fragment="1w" formControlName="dateSpan"> 1W
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
                  <input type="radio" [value]="'1m'" [routerLink]="['/graphs' | relativeUrl]" fragment="1m" formControlName="dateSpan"> 1M
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
                  <input type="radio" [value]="'3m'" [routerLink]="['/graphs' | relativeUrl]" fragment="3m" formControlName="dateSpan"> 3M
                </label>
              </div>
              <div class="btn-group btn-group-toggle">
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
                  <input type="radio" [value]="'6m'" [routerLink]="['/graphs' | relativeUrl]" fragment="6m" formControlName="dateSpan"> 6M
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '1y'">
                  <input type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y" formControlName="dateSpan"> 1Y
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '2y'">
                  <input type="radio" [value]="'2y'" [routerLink]="['/graphs' | relativeUrl]" fragment="2y" formControlName="dateSpan"> 2Y
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '3y'">
                  <input type="radio" [value]="'3y'" [routerLink]="['/graphs' | relativeUrl]" fragment="3y" formControlName="dateSpan"> 3Y
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '4y'">
                  <input type="radio" [value]="'4y'" [routerLink]="['/graphs' | relativeUrl]" fragment="4y" formControlName="dateSpan"> 4Y
                </label>
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
                  <input type="radio" [value]="'all'" [routerLink]="['/graphs' | relativeUrl]" fragment="all" formControlName="dateSpan"><span i18n="all">All</span>
                </label>
              </div>
            </div>
            <div class="small-buttons">
              <div ngbDropdown #myDrop="ngbDropdown">
                <button class="btn btn btn-primary btn-sm" 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-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
                      <ng-template [ngIf]="feeData.fee <= (feeLevels[maxFeeIndex])">
                        <li (click)="filterFeeIndex = feeData.fee"
                          [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
                          <span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
                          <span class="fee-text">{{ feeData.range }}</span>
                        </li>
                      </ng-template>
                    </ng-template>
                  </ul>
                </div>
              </div>

              <button (click)="invertGraph()" class="btn btn btn-primary btn-sm">
                <fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true"
                  i18n-title="statistics.component-invert.title" title="Invert"></fa-icon>
              </button>
            </div>
          </form>
          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading && mempoolStats.length"></div>
        </div>
        <div class="card-body">
          <div class="incoming-transactions-graph">
            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'"
              [limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="10"
              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="card mb-3">
        <div class="card-header">
          <div class="d-flex d-md-block align-items-baseline">
            <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
            </button>
          </div>  
        </div>

        <div class="card-body">
          <div class="incoming-transactions-graph">
            <app-incoming-transactions-graph #incominggraph [height]="500" [left]="65" [template]="'advanced'"
              [data]="mempoolTransactionsWeightPerSecondData"></app-incoming-transactions-graph>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>