mempool/frontend/src/app/components/statistics/statistics.component.html
Miguel Medeiros f434e50a2c
Invert the tooltip legends order.
Fix default data to title tooltip MM/dd HH:mm.
Add symbol to tx chart tooltip .
Add accumulative total for tooltip information.
Add 3th column to tooltip with a progress bar.
Add and max span zoom span.
Add feeRate limit input to mempool graph component.
Add showZoom option to mempool graph component.
Remove start animation to match the layout for future SSR.
Remove mouse wheel zoom from small template.
Fix small template style.
2021-09-14 22:35:49 -03:00

74 lines
3.3 KiB
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>
</form>
</div>
<div class="card-body">
<div class="incoming-transactions-graph">
<app-mempool-graph
dir="ltr"
[template]="'advanced'"
[limitFee]="500"
[height]="500"
[left]="50"
[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]="50"
[template]="'advanced'"
[data]="mempoolTransactionsWeightPerSecondData"
></app-incoming-transactions-graph>
</div>
</div>
</div>
</div>
</div>
</div>