mempool/frontend/src/app/components/block-goggles-graph/block-goggles-graph.component.html

<app-indexing-progress *ngIf="!widget"></app-indexing-progress>

<div [class.full-container]="!widget">
  <div *ngIf="!widget" class="card-header mb-0 mb-md-4">
    <div class="d-flex d-md-block align-items-baseline">
      <span i18n="mining.mempool-goggles">Mempool goggles</span>
      <button class="btn p-0 ps-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
      </button>
    </div>

    <div class="graph-toolbar">
    <form [formGroup]="radioGroupForm" class="formRadioGroup interval-group" *ngIf="(statsObservable$ | async) as stats">
      <div class="btn-group" role="group" name="radioBasic">
        <ng-container *ngIf="stats.blockCount >= 144">
          <input type="radio" class="btn-check" id="goggles-24h" [value]="'24h'" [fragment]="getFragment('24h')" [routerLink]="['/graphs/goggles' | relativeUrl]" formControlName="dateSpan">
          <label class="btn btn-primary btn-sm" for="goggles-24h">24h</label>
        </ng-container>
        <ng-container *ngIf="stats.blockCount >= 25920">
          <input type="radio" class="btn-check" id="goggles-6m" [value]="'6m'" [fragment]="getFragment('6m')" [routerLink]="['/graphs/goggles' | relativeUrl]" formControlName="dateSpan">
          <label class="btn btn-primary btn-sm" for="goggles-6m">6M</label>
        </ng-container>
        <ng-container *ngIf="stats.blockCount >= 52560">
          <input type="radio" class="btn-check" id="goggles-1y" [value]="'1y'" [fragment]="getFragment('1y')" [routerLink]="['/graphs/goggles' | relativeUrl]" formControlName="dateSpan">
          <label class="btn btn-primary btn-sm" for="goggles-1y">1Y</label>
        </ng-container>
        <ng-container *ngIf="stats.blockCount >= 105120">
          <input type="radio" class="btn-check" id="goggles-2y" [value]="'2y'" [fragment]="getFragment('2y')" [routerLink]="['/graphs/goggles' | relativeUrl]" formControlName="dateSpan">
          <label class="btn btn-primary btn-sm" for="goggles-2y">2Y</label>
        </ng-container>
        <ng-container *ngIf="stats.blockCount >= 157680">
          <input type="radio" class="btn-check" id="goggles-3y" [value]="'3y'" [fragment]="getFragment('3y')" [routerLink]="['/graphs/goggles' | relativeUrl]" formControlName="dateSpan">
          <label class="btn btn-primary btn-sm" for="goggles-3y">3Y</label>
        </ng-container>
        <input type="radio" class="btn-check" id="goggles-all" [value]="'all'" [fragment]="getFragment('all')" [routerLink]="['/graphs/goggles' | relativeUrl]" formControlName="dateSpan">
        <label class="btn btn-primary btn-sm" for="goggles-all">ALL</label>
      </div>
    </form>

    <form [formGroup]="unitGroupForm" class="formRadioGroup">
      <div class="btn-group" role="group" name="radioBasic">
        <input type="radio" class="btn-check" id="goggles-vBytes" [value]="'vb'" formControlName="unitType">
        <label class="btn btn-primary btn-sm" for="goggles-vBytes">vBytes</label>
        <input type="radio" class="btn-check" id="goggles-txCount" [value]="'txCount'" formControlName="unitType">
        <label class="btn btn-primary btn-sm" for="goggles-txCount">{{count}}</label>
      </div>
    </form>
    <form [formGroup]="bucketGroupForm" class="formRadioGroup" *ngIf="availableBucketSizes.length > 1">
      <div class="btn-group" role="group" name="radioBasic">
        <input type="radio" class="btn-check" id="bucket-week" [value]="1008" formControlName="bucketSize">
        <label class="btn btn-primary btn-sm" for="bucket-week">Week</label>
        <input type="radio" class="btn-check" id="bucket-month" [value]="4032" formControlName="bucketSize">
        <label class="btn btn-primary btn-sm" for="bucket-month">Month</label>
      </div>
    </form>
    <form [formGroup]="modeGroupForm" class="formRadioGroup" *ngIf="isFiltered">
      <div class="btn-group" role="group" name="radioBasic">
        <input type="radio" class="btn-check" id="goggles-abs" [value]="'abs'" formControlName="mode">
        <label class="btn btn-primary btn-sm" for="goggles-abs" i18n="mining.absolute">Absolute</label>
        <input type="radio" class="btn-check" id="goggles-rel" [value]="'rel'" formControlName="mode">
        <label class="btn btn-primary btn-sm" for="goggles-rel" i18n="mining.relative">Relative</label>
      </div>
    </form>
    </div>
  </div>

  <div class="goggles-chart-wrapper" [class.chart]="!widget" [class.chart-widget]="widget">
    <app-block-filters *ngIf="!widget" class="goggles-filters" [showTint]="false" (onFilterChanged)="onFilterChanged($event)"></app-block-filters>
    <div class="echarts-container" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
      (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
    </div>
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

</div>