mirror of
https://github.com/mempool/mempool.git
synced 2026-08-13 12:33:11 +02:00
add: mempool goggles graph to the frontend
This commit is contained in:
rodribp
parent
1af9dfd457
commit
abd8defcbb
9 changed files with 959 additions and 1 deletions
|
|
@ -25,7 +25,7 @@
|
||||||
<label class="btn btn-xs red mode-toggle" [class.active]="filterMode === 'nor'" for="match-none"><ng-container i18n="mempool-goggles.none">None</ng-container></label>
|
<label class="btn btn-xs red mode-toggle" [class.active]="filterMode === 'nor'" for="match-none"><ng-container i18n="mempool-goggles.none">None</ng-container></label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-element">
|
<div class="filter-element" *ngIf="showTint">
|
||||||
<h5 i18n="mempool-goggles.tint">Tint</h5>
|
<h5 i18n="mempool-goggles.tint">Tint</h5>
|
||||||
<div class="btn-group" role="group">
|
<div class="btn-group" role="group">
|
||||||
<input type="radio" class="btn-check" id="tint-classic" [value]="'fee'" fragment="classic" (click)="setGradientMode('fee')">
|
<input type="radio" class="btn-check" id="tint-classic" [value]="'fee'" fragment="classic" (click)="setGradientMode('fee')">
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import { Subscription } from 'rxjs';
|
||||||
export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
|
export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
|
||||||
@Input() cssWidth: number = 800;
|
@Input() cssWidth: number = 800;
|
||||||
@Input() excludeFilters: string[] = [];
|
@Input() excludeFilters: string[] = [];
|
||||||
|
@Input() showTint: boolean = true;
|
||||||
@Output() onFilterChanged: EventEmitter<ActiveFilter | null> = new EventEmitter();
|
@Output() onFilterChanged: EventEmitter<ActiveFilter | null> = new EventEmitter();
|
||||||
|
|
||||||
filterSubscription: Subscription;
|
filterSubscription: Subscription;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
.card-header {
|
||||||
|
border-bottom: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
@media (min-width: 465px) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1340px) {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-toolbar {
|
||||||
|
@media (min-width: 1340px) {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
@media (max-width: 1339px) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-container .card-header .graph-toolbar .formRadioGroup {
|
||||||
|
@media (max-width: 1339px) {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-container .card-header .graph-toolbar .interval-group {
|
||||||
|
@media (max-width: 829px) {
|
||||||
|
width: 100%;
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
.btn {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
position: relative;
|
||||||
|
color: var(--fg);
|
||||||
|
opacity: var(--opacity);
|
||||||
|
margin-top: -13px;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0px 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 225px);
|
||||||
|
min-height: 400px;
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
height: calc(100vh - 150px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-right: 10px;
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
padding-bottom: 25px;
|
||||||
|
}
|
||||||
|
@media (max-width: 829px) {
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
padding-bottom: 25px;
|
||||||
|
}
|
||||||
|
@media (max-width: 629px) {
|
||||||
|
padding-bottom: 55px;
|
||||||
|
}
|
||||||
|
@media (max-width: 567px) {
|
||||||
|
padding-bottom: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goggles-chart-wrapper {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.echarts-container {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// the goggles toggle is hidden by default (reveals on canvas hover); surface it for the graph
|
||||||
|
::ng-deep .block-filters .menu-toggle {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
&:hover ::ng-deep .block-filters .menu-toggle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-widget {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 238px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-fee-rates {
|
||||||
|
min-height: 56px;
|
||||||
|
display: block;
|
||||||
|
@media (min-width: 485px) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0px auto 20px;
|
||||||
|
&:nth-child(2) {
|
||||||
|
order: 2;
|
||||||
|
@media (min-width: 485px) {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
order: 3;
|
||||||
|
@media (min-width: 485px) {
|
||||||
|
order: 2;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--title-fg);
|
||||||
|
}
|
||||||
|
.card-text {
|
||||||
|
font-size: 18px;
|
||||||
|
span {
|
||||||
|
color: var(--transparent-fg);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.formRadioGroup {
|
||||||
|
margin-top: 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
@media (min-width: 991px) {
|
||||||
|
position: relative;
|
||||||
|
top: -100px;
|
||||||
|
}
|
||||||
|
@media (min-width: 830px) and (max-width: 991px) {
|
||||||
|
position: relative;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
@media (min-width: 830px) {
|
||||||
|
flex-direction: row;
|
||||||
|
float: right;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
.btn-sm {
|
||||||
|
font-size: 9px;
|
||||||
|
@media (min-width: 830px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-loader {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
max-width: 80px;
|
||||||
|
margin: 15px auto 3px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,667 @@
|
||||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
|
||||||
|
import { EChartsOption } from '@app/graphs/echarts';
|
||||||
|
import { BehaviorSubject, combineLatest, forkJoin, Observable, of } from 'rxjs';
|
||||||
|
import { catchError, debounceTime, distinctUntilChanged, filter, map, share, startWith, switchMap, tap } from 'rxjs/operators';
|
||||||
|
import { ActiveFilter, FilterMode, toFilters, toFlags } from '@app/shared/filters.utils';
|
||||||
|
import { ApiService } from '@app/services/api.service';
|
||||||
|
import { formatNumber } from '@angular/common';
|
||||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
|
||||||
|
import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
|
||||||
|
import { StorageService } from '@app/services/storage.service';
|
||||||
|
import { MiningService } from '@app/services/mining.service';
|
||||||
|
import { selectPowerOfTen } from '@app/bitcoin.utils';
|
||||||
|
import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
|
||||||
|
import { StateService } from '@app/services/state.service';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { HttpResponse } from '@angular/common/http';
|
||||||
|
import { VbytesPipe } from '@app/shared/pipes/bytes-pipe/vbytes.pipe';
|
||||||
|
import { SeoService } from '@app/services/seo.service';
|
||||||
|
|
||||||
|
interface GogglesRollup {
|
||||||
|
bucketSize: string;
|
||||||
|
startHeight: number;
|
||||||
|
avgTimestamp: number;
|
||||||
|
txCount: number;
|
||||||
|
vSizeTotal: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GogglesDatum {
|
||||||
|
value: number;
|
||||||
|
startHeight: number;
|
||||||
|
bucketSize: number;
|
||||||
|
txCount: number;
|
||||||
|
vSizeTotal: number;
|
||||||
|
timestampMs: number;
|
||||||
|
baseTxCount?: number;
|
||||||
|
baseVSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const INTERVAL_PRESETS: Record<string, number[]> = {
|
||||||
|
'24h': [1],
|
||||||
|
'6m': [1008, 4032],
|
||||||
|
'1y': [1008, 4032],
|
||||||
|
'2y': [1008, 4032],
|
||||||
|
'3y': [1008, 4032],
|
||||||
|
'all': [1008, 4032],
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-block-goggles-graph',
|
||||||
|
templateUrl: './block-goggles-graph.component.html',
|
||||||
|
styleUrls: ['./block-goggles-graph.component.scss'],
|
||||||
|
styles: [`
|
||||||
|
.loadingGraphs {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(50% - 15px);
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
`],
|
||||||
|
standalone: false,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
})
|
||||||
|
export class BlockGogglesGraphComponent implements OnInit {
|
||||||
|
@Input() widget = false;
|
||||||
|
@Input() right: number | string = 45;
|
||||||
|
@Input() left: number | string = 75;
|
||||||
|
|
||||||
|
miningWindowPreference: string;
|
||||||
|
radioGroupForm: UntypedFormGroup;
|
||||||
|
unitGroupForm: UntypedFormGroup;
|
||||||
|
bucketGroupForm: UntypedFormGroup;
|
||||||
|
modeGroupForm: UntypedFormGroup;
|
||||||
|
count = $localize`:@@8177873832400820695:Count`;
|
||||||
|
allLabel = $localize`All transactions`;
|
||||||
|
transactionsLabel = $localize`Transactions`;
|
||||||
|
matchedLabel = $localize`Matched`;
|
||||||
|
|
||||||
|
chartOptions: EChartsOption = {};
|
||||||
|
chartInitOptions = {
|
||||||
|
renderer: 'svg',
|
||||||
|
};
|
||||||
|
|
||||||
|
statsObservable$: Observable<any>;
|
||||||
|
isLoading = true;
|
||||||
|
formatNumber = formatNumber;
|
||||||
|
timespan = '';
|
||||||
|
chartInstance: any = undefined;
|
||||||
|
|
||||||
|
// active goggles filter; empty op/mask means no filter, so the backend returns total tx counts
|
||||||
|
goggle$ = new BehaviorSubject<{ op?: FilterMode, mask?: bigint }>({});
|
||||||
|
|
||||||
|
private intervals = Object.keys(INTERVAL_PRESETS);
|
||||||
|
|
||||||
|
private bucketTimestampByHeight = new Map<number, number>();
|
||||||
|
|
||||||
|
private totalsCache: Record<string, GogglesRollup[]> = {};
|
||||||
|
|
||||||
|
private relativeMode = false;
|
||||||
|
|
||||||
|
private prefs: { unit: string, bucket: number, mode: string } = { unit: 'txCount', bucket: 1008, mode: 'abs' };
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
@Inject(LOCALE_ID) public locale: string,
|
||||||
|
private apiService: ApiService,
|
||||||
|
private formBuilder: UntypedFormBuilder,
|
||||||
|
private storageService: StorageService,
|
||||||
|
private miningService: MiningService,
|
||||||
|
public stateService: StateService,
|
||||||
|
private router: Router,
|
||||||
|
private zone: NgZone,
|
||||||
|
private route: ActivatedRoute,
|
||||||
|
private cd: ChangeDetectorRef,
|
||||||
|
private seoService: SeoService,
|
||||||
|
private vbytesPipe: VbytesPipe,
|
||||||
|
) {
|
||||||
|
this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
|
||||||
|
this.radioGroupForm.controls.dateSpan.setValue('1y');
|
||||||
|
this.unitGroupForm = this.formBuilder.group({ unitType: 'txCount'});
|
||||||
|
this.unitGroupForm.controls.unitType.setValue('txCount');
|
||||||
|
this.bucketGroupForm = this.formBuilder.group({ bucketSize: 1008});
|
||||||
|
this.bucketGroupForm.controls.bucketSize.setValue(1008);
|
||||||
|
this.modeGroupForm = this.formBuilder.group({ mode: 'abs' });
|
||||||
|
this.modeGroupForm.controls.mode.setValue('abs');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
let firstRun = true;
|
||||||
|
if (this.widget) {
|
||||||
|
this.miningWindowPreference = '6m';
|
||||||
|
} else {
|
||||||
|
this.seoService.setTitle($localize`Mempool Goggles`);
|
||||||
|
this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.goggles:See Bitcoin transactions matching Mempool Goggles filters visualized over time.`);
|
||||||
|
this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
|
||||||
|
}
|
||||||
|
if (!this.intervals.includes(this.miningWindowPreference)) {
|
||||||
|
this.miningWindowPreference = '1y';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
|
||||||
|
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
|
||||||
|
let storedPrefs: any = {};
|
||||||
|
try {
|
||||||
|
storedPrefs = JSON.parse(this.storageService.getValue('goggles_prefs')) ?? {};
|
||||||
|
} catch {
|
||||||
|
storedPrefs = {};
|
||||||
|
}
|
||||||
|
if (['vb', 'txCount'].includes(storedPrefs.unit)) {
|
||||||
|
this.prefs.unit = storedPrefs.unit;
|
||||||
|
}
|
||||||
|
if ([1008, 4032].includes(storedPrefs.bucket)) {
|
||||||
|
this.prefs.bucket = storedPrefs.bucket;
|
||||||
|
}
|
||||||
|
if (['abs', 'rel'].includes(storedPrefs.mode)) {
|
||||||
|
this.prefs.mode = storedPrefs.mode;
|
||||||
|
}
|
||||||
|
this.unitGroupForm = this.formBuilder.group({ unitType: this.prefs.unit });
|
||||||
|
this.unitGroupForm.controls.unitType.setValue(this.prefs.unit);
|
||||||
|
this.bucketGroupForm.controls.bucketSize.setValue(this.prefs.bucket, { emitEvent: false });
|
||||||
|
this.modeGroupForm.controls.mode.setValue(this.prefs.mode, { emitEvent: false });
|
||||||
|
|
||||||
|
if (!this.widget) {
|
||||||
|
this.route
|
||||||
|
.fragment
|
||||||
|
.subscribe((fragment) => {
|
||||||
|
this.parseFragment(fragment);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.statsObservable$ = combineLatest([
|
||||||
|
this.radioGroupForm.get('dateSpan').valueChanges.pipe(
|
||||||
|
startWith(this.radioGroupForm.controls.dateSpan.value),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
),
|
||||||
|
// debounce so toggling several flags fires one request; startWith keeps the first paint immediate
|
||||||
|
this.goggle$.pipe(
|
||||||
|
debounceTime(250),
|
||||||
|
startWith(this.goggle$.value),
|
||||||
|
distinctUntilChanged((a, b) => a.op === b.op && a.mask === b.mask),
|
||||||
|
),
|
||||||
|
this.unitGroupForm.get('unitType').valueChanges.pipe(
|
||||||
|
startWith(this.unitGroupForm.controls.unitType.value),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
),
|
||||||
|
this.bucketGroupForm.get('bucketSize').valueChanges.pipe(
|
||||||
|
startWith(this.bucketGroupForm.controls.bucketSize.value),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
),
|
||||||
|
this.modeGroupForm.get('mode').valueChanges.pipe(
|
||||||
|
startWith(this.modeGroupForm.controls.mode.value),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
),
|
||||||
|
]).pipe(
|
||||||
|
switchMap(([timespan, goggle, unitType, bucketSize, mode]) => {
|
||||||
|
if (!this.widget && !firstRun && timespan !== this.timespan) {
|
||||||
|
this.storageService.setValue('miningWindowPreference', timespan);
|
||||||
|
}
|
||||||
|
firstRun = false;
|
||||||
|
this.timespan = timespan;
|
||||||
|
this.isLoading = true;
|
||||||
|
// reconcile the bucket size with the interval (e.g. 24h is per-block only) and keep the UI radio in sync
|
||||||
|
const allowedBuckets = this.bucketSizesForInterval(timespan);
|
||||||
|
const effectiveBucket = allowedBuckets.includes(bucketSize) ? bucketSize : allowedBuckets[0];
|
||||||
|
if (effectiveBucket !== this.bucketGroupForm.controls.bucketSize.value) {
|
||||||
|
this.bucketGroupForm.controls.bucketSize.setValue(effectiveBucket, { emitEvent: false });
|
||||||
|
}
|
||||||
|
const effectiveMode = goggle.mask ? mode : 'abs';
|
||||||
|
if (effectiveMode !== this.modeGroupForm.controls.mode.value) {
|
||||||
|
this.modeGroupForm.controls.mode.setValue(effectiveMode, { emitEvent: false });
|
||||||
|
}
|
||||||
|
this.prefs.unit = unitType;
|
||||||
|
if (allowedBuckets.length > 1) {
|
||||||
|
this.prefs.bucket = effectiveBucket;
|
||||||
|
}
|
||||||
|
if (goggle.mask) {
|
||||||
|
this.prefs.mode = effectiveMode;
|
||||||
|
}
|
||||||
|
this.storageService.setValue('goggles_prefs', JSON.stringify(this.prefs));
|
||||||
|
const cacheKey = `${timespan}:${effectiveBucket}`;
|
||||||
|
const filtered$ = this.apiService.getHistoricalTxCountByFlags$(timespan, effectiveBucket.toString(), goggle.op, goggle.mask?.toString());
|
||||||
|
const totals$ = goggle.mask
|
||||||
|
? (this.totalsCache[cacheKey]
|
||||||
|
? of(this.totalsCache[cacheKey])
|
||||||
|
: this.apiService.getHistoricalTxCountByFlags$(timespan, effectiveBucket.toString()).pipe(
|
||||||
|
map((res) => res.body || []),
|
||||||
|
tap((body) => { this.totalsCache[cacheKey] = body; }),
|
||||||
|
))
|
||||||
|
: of(null);
|
||||||
|
const unit = of(unitType);
|
||||||
|
return forkJoin<[HttpResponse<GogglesRollup[]>, GogglesRollup[], string]>([filtered$, totals$, unit]).pipe(
|
||||||
|
tap(([response, totalsBody, unit]) => {
|
||||||
|
const body: GogglesRollup[] = response.body || [];
|
||||||
|
const filtered = !!this.goggle$.value.mask;
|
||||||
|
// when filtering, body is the matched rows and totalsBody the unfiltered totals; otherwise body itself is the totals
|
||||||
|
const totalRows: GogglesRollup[] = filtered ? (totalsBody || []) : body;
|
||||||
|
const matchedRows: GogglesRollup[] = filtered ? body : [];
|
||||||
|
const unitIsTx = unit === 'txCount';
|
||||||
|
this.relativeMode = filtered && effectiveMode === 'rel';
|
||||||
|
const matchedByHeight = new Map<number, GogglesRollup>();
|
||||||
|
for (const row of matchedRows) {
|
||||||
|
matchedByHeight.set(row.startHeight, row);
|
||||||
|
}
|
||||||
|
const sorted = [...totalRows].sort((a, b) => a.startHeight - b.startHeight);
|
||||||
|
const categories = sorted.map((row) => row.startHeight);
|
||||||
|
this.bucketTimestampByHeight = new Map(sorted.map((row) => [row.startHeight, Number(row.avgTimestamp) * 1000]));
|
||||||
|
const toSeries = (matched = false): GogglesDatum[] => sorted.map((row) => {
|
||||||
|
const bucketSize = parseInt(row.bucketSize, 10) || 1;
|
||||||
|
const source = matched ? matchedByHeight.get(row.startHeight) : row;
|
||||||
|
const txCount = source ? Number(source.txCount) : 0;
|
||||||
|
const vSizeTotal = source ? Number(source.vSizeTotal) : 0;
|
||||||
|
const selected = unitIsTx ? txCount : vSizeTotal;
|
||||||
|
const plotted = bucketSize > 1 ? selected / bucketSize : selected;
|
||||||
|
const datum: GogglesDatum = { value: plotted, startHeight: row.startHeight, bucketSize, txCount, vSizeTotal, timestampMs: Number(row.avgTimestamp) * 1000 };
|
||||||
|
if (matched) {
|
||||||
|
datum.baseTxCount = Number(row.txCount);
|
||||||
|
datum.baseVSize = Number(row.vSizeTotal);
|
||||||
|
if (this.relativeMode) {
|
||||||
|
const base = unitIsTx ? datum.baseTxCount : datum.baseVSize;
|
||||||
|
datum.value = base > 0 ? selected / base * 100 : 0;
|
||||||
|
}
|
||||||
|
} else if (this.relativeMode) {
|
||||||
|
datum.value = 100;
|
||||||
|
}
|
||||||
|
return datum;
|
||||||
|
});
|
||||||
|
this.prepareChartOptions(categories, toSeries(), filtered ? toSeries(true) : []);
|
||||||
|
this.isLoading = false;
|
||||||
|
this.cd.markForCheck();
|
||||||
|
}),
|
||||||
|
map(([response]) => {
|
||||||
|
const body: GogglesRollup[] = response.body || [];
|
||||||
|
const headerCount = parseInt(response.headers.get('x-total-count'), 10);
|
||||||
|
return {
|
||||||
|
blockCount: Number.isFinite(headerCount) ? headerCount : Number.MAX_SAFE_INTEGER,
|
||||||
|
txCount: body.reduce((acc, row) => acc + row.txCount, 0),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
catchError(err => {
|
||||||
|
this.prepareChartOptions([], [], [], err);
|
||||||
|
this.isLoading = false;
|
||||||
|
this.cd.markForCheck();
|
||||||
|
return of({ blockCount: Number.MAX_SAFE_INTEGER, txCount: 0 });
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
share(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onFilterChanged(activeFilter: ActiveFilter | null): void {
|
||||||
|
const mask = activeFilter ? toFlags(activeFilter.filters) : 0n;
|
||||||
|
this.goggle$.next(mask > 0n
|
||||||
|
? { op: activeFilter.mode, mask }
|
||||||
|
: {}
|
||||||
|
);
|
||||||
|
if (!this.widget) {
|
||||||
|
this.router.navigate([], { relativeTo: this.route, fragment: this.getFragment(), replaceUrl: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// builds the URL fragment: just the interval when no filter is active ("1y"), or "interval=1y&op=and&mask=5" when filtering
|
||||||
|
getFragment(interval?: string): string {
|
||||||
|
const timespan = interval ?? this.radioGroupForm.controls.dateSpan.value;
|
||||||
|
const { op, mask } = this.goggle$.value;
|
||||||
|
return mask ? `interval=${timespan}&op=${op}&mask=${mask.toString()}` : timespan;
|
||||||
|
}
|
||||||
|
|
||||||
|
// restores state from a fragment in either form, letting block-filters pick up restored filters via activeGoggles$
|
||||||
|
private parseFragment(fragment: string): void {
|
||||||
|
if (!fragment) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.intervals.includes(fragment)) {
|
||||||
|
this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const params = new URLSearchParams(fragment);
|
||||||
|
const rawInterval = params.get('interval') ?? '';
|
||||||
|
const interval = this.intervals.includes(rawInterval) ? rawInterval : this.radioGroupForm.controls.dateSpan.value;
|
||||||
|
const maskParam = params.get('mask') ?? '';
|
||||||
|
const mask = maskParam && /^\d+$/.test(maskParam) ? BigInt(maskParam) : 0n;
|
||||||
|
const op = (['and', 'or', 'nor'].includes(params.get('op')) ? params.get('op') : 'and') as FilterMode;
|
||||||
|
|
||||||
|
this.radioGroupForm.controls.dateSpan.setValue(interval, { emitEvent: false });
|
||||||
|
// skip if already applied, otherwise the navigation in onFilterChanged would loop back here
|
||||||
|
if ((mask > 0n && (this.goggle$.value.mask ?? 0n) !== mask) || this.goggle$.value.op !== op) {
|
||||||
|
this.stateService.activeGoggles$.next({ mode: op, filters: toFilters(mask).map(f => f.key), gradient: 'fee' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
prepareChartOptions(categories: number[], totalData: GogglesDatum[], matchedData: GogglesDatum[], error?): void {
|
||||||
|
const filtered = !!this.goggle$.value.mask;
|
||||||
|
const perBlock = totalData.length > 0 && totalData[0].bucketSize === 1;
|
||||||
|
let title: object;
|
||||||
|
if (totalData.length === 0 ) {
|
||||||
|
title = {
|
||||||
|
textStyle: {
|
||||||
|
color: 'grey',
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
|
||||||
|
left: 'center',
|
||||||
|
top: 'center'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (error && error.status === 404) {
|
||||||
|
title = {
|
||||||
|
textStyle: {
|
||||||
|
color: 'grey',
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
text: $localize`Block summaries indexing is required for this graph`,
|
||||||
|
left: 'center',
|
||||||
|
top: 'center'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const unitIsVb = this.unitGroupForm.controls.unitType.value === 'vb';
|
||||||
|
const yAxisName = this.relativeMode
|
||||||
|
? (unitIsVb ? $localize`Share of vsize (%)` : $localize`Share of txs (%)`)
|
||||||
|
: (unitIsVb ? $localize`Total vsize (vB)` : $localize`Total txs (Count)`);
|
||||||
|
this.chartOptions = {
|
||||||
|
title,
|
||||||
|
color: ['#1E88E5'],
|
||||||
|
animation: false,
|
||||||
|
grid: {
|
||||||
|
right: this.right,
|
||||||
|
left: this.left,
|
||||||
|
bottom: this.widget ? 30 : 80,
|
||||||
|
top: this.widget ? 20 : (this.isMobile() ? 10 : 50),
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: !this.isMobile(),
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line'
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(17, 19, 31, 1)',
|
||||||
|
borderRadius: 4,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
textStyle: {
|
||||||
|
color: 'var(--tooltip-grey)',
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
borderColor: '#000',
|
||||||
|
formatter: function(params): string {
|
||||||
|
if (!params || params.length <= 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const baseline = params.find(p => p.seriesId === 'total');
|
||||||
|
const matched = params.find(p => p.seriesId === 'matched');
|
||||||
|
const anchor = baseline || matched;
|
||||||
|
if (!anchor) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const startHeight = anchor.data.startHeight;
|
||||||
|
const bucketSize = anchor.data.bucketSize || 1;
|
||||||
|
const timestampMs = anchor.data.timestampMs;
|
||||||
|
const baseTxCount = baseline ? baseline.data.txCount : (matched ? matched.data.baseTxCount : 0);
|
||||||
|
const baseVSize = baseline ? baseline.data.vSizeTotal : (matched ? matched.data.baseVSize : 0);
|
||||||
|
const filtered = !!this.goggle$.value.mask;
|
||||||
|
const unitIsTxCount = this.unitGroupForm.controls.unitType.value === 'txCount';
|
||||||
|
const rolledUp = bucketSize > 1;
|
||||||
|
|
||||||
|
const fmtCount = (v): string => formatNumber(v, this.locale, '1.0-0');
|
||||||
|
const fmtAvg = (v): string => formatNumber(v, this.locale, '1.0-2');
|
||||||
|
const fmtVSize = (v): string => this.vbytesPipe.transform(v, 2, 'vB', undefined, true);
|
||||||
|
const fmtPct = (v): string => formatNumber(v, this.locale, '1.0-2') + '%';
|
||||||
|
|
||||||
|
let tooltip = '';
|
||||||
|
tooltip += `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, timestampMs)}</b><br>`;
|
||||||
|
|
||||||
|
const fmtVal = (v): string => unitIsTxCount
|
||||||
|
? (rolledUp ? fmtAvg(v / bucketSize) : fmtCount(v))
|
||||||
|
: fmtVSize(rolledUp ? v / bucketSize : v);
|
||||||
|
|
||||||
|
if (baseline) {
|
||||||
|
tooltip += `${baseline.marker} ${baseline.seriesName}: ${fmtVal(unitIsTxCount ? baseTxCount : baseVSize)}<br>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filtered && matched) {
|
||||||
|
const matchedVal = unitIsTxCount ? matched.data.txCount : matched.data.vSizeTotal;
|
||||||
|
const base = unitIsTxCount ? baseTxCount : baseVSize;
|
||||||
|
tooltip += `${matched.marker} ${matched.seriesName}: ${fmtVal(matchedVal)}<br>`;
|
||||||
|
if (base > 0) {
|
||||||
|
tooltip += `${matched.marker} ` + $localize`Share` + `: ${fmtPct(matchedVal / base * 100)}<br>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rolledUp) {
|
||||||
|
tooltip += `<small>` + $localize`*On average between blocks ${startHeight} - ${startHeight + bucketSize - 1}` + `</small>`;
|
||||||
|
} else {
|
||||||
|
tooltip += `<small>` + $localize`At block: ${startHeight}` + `</small>`;
|
||||||
|
}
|
||||||
|
return tooltip;
|
||||||
|
}.bind(this)
|
||||||
|
},
|
||||||
|
xAxis: totalData.length === 0 ? undefined : {
|
||||||
|
name: this.widget ? undefined : formatterXAxisLabel(this.locale, this.timespan),
|
||||||
|
nameLocation: 'middle',
|
||||||
|
nameTextStyle: {
|
||||||
|
padding: [10, 0, 0, 0],
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
data: categories,
|
||||||
|
axisLine: { onZero: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (value): string => {
|
||||||
|
const ts = this.bucketTimestampByHeight.get(Number(value));
|
||||||
|
return ts !== undefined ? formatterXAxisTimeCategory(this.locale, this.timespan, ts) : '';
|
||||||
|
},
|
||||||
|
align: 'center',
|
||||||
|
fontSize: 11,
|
||||||
|
lineHeight: 12,
|
||||||
|
hideOverlap: true,
|
||||||
|
padding: [0, 5],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: totalData.length === 0 ? undefined : {
|
||||||
|
position: 'left',
|
||||||
|
name: this.widget ? undefined : yAxisName,
|
||||||
|
nameLocation: 'middle',
|
||||||
|
nameRotate: 90,
|
||||||
|
nameGap: 55,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 11,
|
||||||
|
color: 'rgb(110, 112, 121)'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgb(110, 112, 121)',
|
||||||
|
formatter: (val): string => {
|
||||||
|
if (this.relativeMode) {
|
||||||
|
return `${val}%`;
|
||||||
|
}
|
||||||
|
if (this.unitGroupForm.controls.unitType.value === 'vb') {
|
||||||
|
return this.vbytesPipe.transform(val, 0, 'vB', undefined, true);
|
||||||
|
}
|
||||||
|
const selectedPowerOfTen: any = selectPowerOfTen(val);
|
||||||
|
const newVal = Math.round(val / selectedPowerOfTen.divider);
|
||||||
|
return `${newVal}${selectedPowerOfTen.unit}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dotted',
|
||||||
|
color: 'var(--transparent-fg)',
|
||||||
|
opacity: 0.25,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
legend: (this.widget || totalData.length === 0 || !filtered) ? undefined : {
|
||||||
|
top: 'top',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: this.allLabel,
|
||||||
|
inactiveColor: 'rgb(110, 112, 121)',
|
||||||
|
textStyle: { color: 'var(--fg)' },
|
||||||
|
icon: 'roundRect',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.matchedLabel,
|
||||||
|
inactiveColor: 'rgb(110, 112, 121)',
|
||||||
|
textStyle: { color: 'var(--fg)' },
|
||||||
|
icon: 'roundRect',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selected: JSON.parse(this.storageService.getValue('goggles_legend') || 'null') ?? {
|
||||||
|
[this.allLabel]: true,
|
||||||
|
[this.matchedLabel]: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: totalData.length === 0 ? undefined : [
|
||||||
|
{
|
||||||
|
id: 'total',
|
||||||
|
zlevel: 0,
|
||||||
|
name: filtered ? this.allLabel : this.transactionsLabel,
|
||||||
|
data: totalData,
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '100%',
|
||||||
|
cursor: perBlock ? 'pointer' : 'default',
|
||||||
|
itemStyle: { color: '#1E88E5' }, // blue: total tx count
|
||||||
|
},
|
||||||
|
...(filtered && matchedData.length > 0 ? [{
|
||||||
|
id: 'matched',
|
||||||
|
zlevel: 1,
|
||||||
|
z: 3,
|
||||||
|
name: this.matchedLabel,
|
||||||
|
data: matchedData,
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '100%',
|
||||||
|
barGap: '-100%', // overlay directly on top of the total bars
|
||||||
|
cursor: perBlock ? 'pointer' : 'default',
|
||||||
|
itemStyle: { color: '#8E24AA' },
|
||||||
|
}] : []),
|
||||||
|
],
|
||||||
|
dataZoom: this.widget ? null : [{
|
||||||
|
type: 'inside',
|
||||||
|
realtime: true,
|
||||||
|
zoomLock: true,
|
||||||
|
maxSpan: 100,
|
||||||
|
minSpan: 5,
|
||||||
|
moveOnMouseMove: false,
|
||||||
|
}, {
|
||||||
|
showDetail: false,
|
||||||
|
show: true,
|
||||||
|
type: 'slider',
|
||||||
|
brushSelect: false,
|
||||||
|
realtime: true,
|
||||||
|
left: 20,
|
||||||
|
right: 15,
|
||||||
|
selectedDataBackground: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
opacity: 0.45,
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(ec): void {
|
||||||
|
if (this.chartInstance !== undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartInstance = ec;
|
||||||
|
|
||||||
|
this.chartInstance.on('click', (e) => {
|
||||||
|
if (e.data.bucketSize > 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.zone.run(() => {
|
||||||
|
const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.data.startHeight}`);
|
||||||
|
this.router.navigate([url]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.chartInstance.on('legendselectchanged', (e) => {
|
||||||
|
this.storageService.setValue('goggles_legend', JSON.stringify(e.selected));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
isMobile(): boolean {
|
||||||
|
return (window.innerWidth <= 767.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
// the bucket sizes a given interval can be viewed at (24h is per-block only; longer ranges are week/month)
|
||||||
|
bucketSizesForInterval(interval: string): number[] {
|
||||||
|
return INTERVAL_PRESETS[interval] ?? [1008, 4032];
|
||||||
|
}
|
||||||
|
|
||||||
|
// for the template: the bucket options for the currently selected interval (used to show/hide the selector)
|
||||||
|
get availableBucketSizes(): number[] {
|
||||||
|
return this.bucketSizesForInterval(this.radioGroupForm.controls.dateSpan.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get isFiltered(): boolean {
|
||||||
|
return !!this.goggle$.value.mask;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSaveChart(): void {
|
||||||
|
// @ts-ignore
|
||||||
|
const prevBottom = this.chartOptions.grid.bottom;
|
||||||
|
// @ts-ignore
|
||||||
|
const prevTitle = { ...this.chartOptions.title ?? {text: ''}};
|
||||||
|
// @ts-ignore
|
||||||
|
const prevYAxisNameStyle: any = { ...this.chartOptions.yAxis.nameTextStyle};
|
||||||
|
const now = new Date();
|
||||||
|
const { op, mask } = this.goggle$.value;
|
||||||
|
const filters = mask ? toFilters(mask).map(f => f.label) : [];
|
||||||
|
if (this.chartOptions.legend) {
|
||||||
|
const currentLegend = this.chartInstance.getOption().legend;
|
||||||
|
if (currentLegend?.[0]?.selected) {
|
||||||
|
// @ts-ignore
|
||||||
|
this.chartOptions.legend.selected = currentLegend[0].selected;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// @ts-ignore
|
||||||
|
this.chartOptions.grid.bottom = 90;
|
||||||
|
this.chartOptions.backgroundColor = 'var(--active-bg)';
|
||||||
|
const bucket = this.bucketGroupForm.controls.bucketSize.value;
|
||||||
|
const bucketSuffix = bucket === 1008
|
||||||
|
? $localize`Weekly average`
|
||||||
|
: bucket === 4032
|
||||||
|
? $localize`Monthly average`
|
||||||
|
: '';
|
||||||
|
let expression = '';
|
||||||
|
if (filters.length && this.chartOptions.xAxis) {
|
||||||
|
if (op === 'nor') {
|
||||||
|
expression += $localize`matching none of: `;
|
||||||
|
} else if (op === 'or') {
|
||||||
|
expression += $localize`matching any of: `;
|
||||||
|
} else {
|
||||||
|
expression += $localize`matching all of: `;
|
||||||
|
}
|
||||||
|
expression += filters.length > 1 ? filters.join(' - ') : filters[0];
|
||||||
|
}
|
||||||
|
const text = `${bucketSuffix} ${$localize`of transactions`} ${expression}`;
|
||||||
|
this.chartOptions.title = {
|
||||||
|
text,
|
||||||
|
textStyle: { color: 'white', fontSize: 15, fontWeight: 'normal' },
|
||||||
|
left: 'center',
|
||||||
|
bottom: 15,
|
||||||
|
};
|
||||||
|
// @ts-ignore
|
||||||
|
this.chartOptions.yAxis.nameTextStyle = {
|
||||||
|
fontSize: 14,
|
||||||
|
color: 'white',
|
||||||
|
};
|
||||||
|
this.chartInstance.setOption(this.chartOptions);
|
||||||
|
download(this.chartInstance.getDataURL({
|
||||||
|
pixelRatio: 2,
|
||||||
|
excludeComponents: ['dataZoom'],
|
||||||
|
}), `block-goggles-${this.timespan}${mask ? `-${op}-${mask.toString()}` : ''}-${Math.round(now.getTime() / 1000)}.svg`);
|
||||||
|
// @ts-ignore
|
||||||
|
this.chartOptions.grid.bottom = prevBottom;
|
||||||
|
this.chartOptions.backgroundColor = 'none';
|
||||||
|
this.chartOptions.title = prevTitle;
|
||||||
|
// @ts-ignore
|
||||||
|
this.chartOptions.yAxis.nameTextStyle = prevYAxisNameStyle;
|
||||||
|
this.chartInstance.setOption(this.chartOptions);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,9 @@
|
||||||
<a routerLinkActive="active" class="btn btn-primary w-33"
|
<a routerLinkActive="active" class="btn btn-primary w-33"
|
||||||
[routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
|
[routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
|
||||||
|
|
||||||
|
<a routerLinkActive="active" class="btn btn-primary w-33"
|
||||||
|
[routerLink]="['/graphs/goggles' | relativeUrl]" i18n="mining.goggles">Goggles</a>
|
||||||
|
|
||||||
<div ngbDropdown class="w-33" *ngIf="stateService.env.MINING_DASHBOARD">
|
<div ngbDropdown class="w-33" *ngIf="stateService.env.MINING_DASHBOARD">
|
||||||
<button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
|
<button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
|
||||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import { BlockFeesSubsidyGraphComponent } from '@components/block-fees-subsidy-g
|
||||||
import { PriceChartComponent } from '@components/price-chart/price-chart.component';
|
import { PriceChartComponent } from '@components/price-chart/price-chart.component';
|
||||||
import { BlockRewardsGraphComponent } from '@components/block-rewards-graph/block-rewards-graph.component';
|
import { BlockRewardsGraphComponent } from '@components/block-rewards-graph/block-rewards-graph.component';
|
||||||
import { BlockFeeRatesGraphComponent } from '@components/block-fee-rates-graph/block-fee-rates-graph.component';
|
import { BlockFeeRatesGraphComponent } from '@components/block-fee-rates-graph/block-fee-rates-graph.component';
|
||||||
|
import { BlockGogglesGraphComponent } from '@components/block-goggles-graph/block-goggles-graph.component';
|
||||||
import { BlockSizesWeightsGraphComponent } from '@components/block-sizes-weights-graph/block-sizes-weights-graph.component';
|
import { BlockSizesWeightsGraphComponent } from '@components/block-sizes-weights-graph/block-sizes-weights-graph.component';
|
||||||
import { FeeDistributionGraphComponent } from '@components/fee-distribution-graph/fee-distribution-graph.component';
|
import { FeeDistributionGraphComponent } from '@components/fee-distribution-graph/fee-distribution-graph.component';
|
||||||
import { IncomingTransactionsGraphComponent } from '@components/incoming-transactions-graph/incoming-transactions-graph.component';
|
import { IncomingTransactionsGraphComponent } from '@components/incoming-transactions-graph/incoming-transactions-graph.component';
|
||||||
|
|
@ -70,6 +71,7 @@ import { CommonModule } from '@angular/common';
|
||||||
PriceChartComponent,
|
PriceChartComponent,
|
||||||
BlockRewardsGraphComponent,
|
BlockRewardsGraphComponent,
|
||||||
BlockFeeRatesGraphComponent,
|
BlockFeeRatesGraphComponent,
|
||||||
|
BlockGogglesGraphComponent,
|
||||||
BlockSizesWeightsGraphComponent,
|
BlockSizesWeightsGraphComponent,
|
||||||
FeeDistributionGraphComponent,
|
FeeDistributionGraphComponent,
|
||||||
IncomingTransactionsGraphComponent,
|
IncomingTransactionsGraphComponent,
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ import { AccelerationsListComponent } from '@components/acceleration/acceleratio
|
||||||
import { AddressComponent } from '@components/address/address.component';
|
import { AddressComponent } from '@components/address/address.component';
|
||||||
import { WalletComponent } from '@components/wallet/wallet.component';
|
import { WalletComponent } from '@components/wallet/wallet.component';
|
||||||
import { CalculatorComponent } from '@components/calculator/calculator.component';
|
import { CalculatorComponent } from '@components/calculator/calculator.component';
|
||||||
|
import { BlockGogglesGraphComponent } from '@components/block-goggles-graph/block-goggles-graph.component';
|
||||||
|
|
||||||
const browserWindow = window || {};
|
const browserWindow = window || {};
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
@ -114,6 +115,11 @@ const routes: Routes = [
|
||||||
data: { networks: ['bitcoin', 'liquid'] },
|
data: { networks: ['bitcoin', 'liquid'] },
|
||||||
component: StatisticsComponent,
|
component: StatisticsComponent,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'goggles',
|
||||||
|
data: { networks: [ 'bitcoin' ]},
|
||||||
|
component: BlockGogglesGraphComponent,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'mining/hashrate-difficulty',
|
path: 'mining/hashrate-difficulty',
|
||||||
data: { networks: ['bitcoin'] },
|
data: { networks: ['bitcoin'] },
|
||||||
|
|
|
||||||
|
|
@ -407,6 +407,13 @@ export class ApiService {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getHistoricalTxCountByFlags$(interval: string, bucketSize: string, op?: string, mask?: string) : Observable<HttpResponse<any[]>> {
|
||||||
|
return this.httpClient.get<any[]>(
|
||||||
|
this.apiBaseUrl + this.apiBasePath + `/api/v1/goggles/${interval}/${bucketSize}` +
|
||||||
|
(op !== undefined && mask !== undefined ? `/${op}/${mask}` : ''), { observe: 'response' }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
getBlockAudit$(hash: string) : Observable<BlockAudit> {
|
getBlockAudit$(hash: string) : Observable<BlockAudit> {
|
||||||
this.setBlockAuditLoaded(hash);
|
this.setBlockAuditLoaded(hash);
|
||||||
return this.httpClient.get<BlockAudit>(
|
return this.httpClient.get<BlockAudit>(
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue