diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index 135a8b842..eacd16118 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -26,15 +26,7 @@
position: absolute;
left: 0;
top: 75px;
- --divider-offset: 50vw;
- --mempool-offset: 0px;
- transform: translateX(calc(var(--divider-offset) + var(--mempool-offset)));
-}
-
-.blockchain-wrapper.time-ltr {
- .position-container {
- transform: translateX(calc(100vw - var(--divider-offset) - var(--mempool-offset)));
- }
+ transform: translateX(1280px);
}
.black-background {
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts
index 56b7c39e6..2293b9479 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { firstValueFrom, Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
@@ -27,8 +27,11 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
loadingTip: boolean = true;
connected: boolean = true;
- dividerOffset: number = 0;
- mempoolOffset: number = 0;
+ dividerOffset: number | null = null;
+ mempoolOffset: number | null = null;
+ positionStyle = {
+ transform: "translateX(1280px)",
+ };
constructor(
public stateService: StateService,
@@ -40,6 +43,7 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
this.network = this.stateService.network;
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
+ this.updateStyle();
});
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
this.connected = (state === 2);
@@ -63,29 +67,47 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
const prevOffset = this.mempoolOffset;
this.mempoolOffset = 0;
this.mempoolOffsetChange.emit(0);
+ this.updateStyle();
setTimeout(() => {
this.ltrTransitionEnabled = true;
this.flipping = true;
this.stateService.timeLtr.next(!this.timeLtr);
+ this.cd.markForCheck();
setTimeout(() => {
this.ltrTransitionEnabled = false;
this.flipping = false;
this.mempoolOffset = prevOffset;
- this.mempoolOffsetChange.emit(this.mempoolOffset);
+ this.mempoolOffsetChange.emit((this.mempoolOffset || 0));
+ this.updateStyle();
+ this.cd.markForCheck();
}, 1000);
}, 0);
- this.cd.markForCheck();
}
onMempoolWidthChange(width): void {
if (this.flipping) {
return;
}
- this.mempoolOffset = Math.max(0, width - this.dividerOffset);
- this.cd.markForCheck();
+ this.mempoolOffset = Math.max(0, width - (this.dividerOffset || 0));
+ this.updateStyle();
this.mempoolOffsetChange.emit(this.mempoolOffset);
}
+ updateStyle(): void {
+ if (this.dividerOffset == null || this.mempoolOffset == null) {
+ return;
+ }
+ const oldTransform = this.positionStyle.transform;
+ this.positionStyle = this.timeLtr ? {
+ transform: `translateX(calc(100vw - ${this.dividerOffset + this.mempoolOffset}px)`,
+ } : {
+ transform: `translateX(${this.dividerOffset + this.mempoolOffset}px)`,
+ };
+ if (oldTransform !== this.positionStyle.transform) {
+ this.cd.detectChanges();
+ }
+ }
+
ngOnChanges(changes: SimpleChanges): void {
if (changes.containerWidth) {
this.onResize();
@@ -107,6 +129,6 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
this.dividerOffset = width * 0.95;
}
}
- this.cd.markForCheck();
+ this.updateStyle();
}
}
diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts
index 7f305416f..81084f524 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -194,7 +194,7 @@ export class DifficultyComponent implements OnInit {
@HostListener('pointerdown', ['$event'])
onPointerDown(event): void {
- if (this.epochSvgElement.nativeElement?.contains(event.target)) {
+ if (this.epochSvgElement?.nativeElement?.contains(event.target)) {
this.onPointerMove(event);
event.preventDefault();
}
@@ -202,7 +202,7 @@ export class DifficultyComponent implements OnInit {
@HostListener('pointermove', ['$event'])
onPointerMove(event): void {
- if (this.epochSvgElement.nativeElement?.contains(event.target)) {
+ if (this.epochSvgElement?.nativeElement?.contains(event.target)) {
this.tooltipPosition = { x: event.clientX, y: event.clientY };
this.cd.markForCheck();
}
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 484389cd3..0ddbbd4b7 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -97,6 +97,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.chainTip = this.stateService.latestBlockHeight;
+ const width = this.containerOffset + (this.stateService.env.MEMPOOL_BLOCKS_AMOUNT) * this.blockOffset;
+ this.mempoolWidth = width;
+ this.widthChange.emit(this.mempoolWidth);
+
if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
this.enabledMiningInfoIfNeeded(this.location.path());
this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
@@ -161,11 +165,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
return this.mempoolBlocks;
}),
tap(() => {
- this.cd.markForCheck();
const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset;
if (this.mempoolWidth !== width) {
this.mempoolWidth = width;
this.widthChange.emit(this.mempoolWidth);
+ this.cd.markForCheck();
}
})
);
@@ -215,11 +219,13 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (isNewBlock && (block?.extras?.similarity == null || block?.extras?.similarity > 0.5) && !this.tabHidden) {
this.blockIndex++;
}
+ this.cd.markForCheck();
});
this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
if (this.chainTip === -1) {
this.chainTip = height;
+ this.cd.markForCheck();
}
});
@@ -257,6 +263,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.blockPadding = 0.24 * this.blockWidth;
this.containerOffset = 0.32 * this.blockWidth;
this.blockOffset = this.blockWidth + this.blockPadding;
+ this.cd.markForCheck();
}
}
@@ -275,6 +282,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
onResize(): void {
this.animateEntry = false;
this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
+ this.cd.markForCheck();
}
trackByFn(index: number, block: MempoolBlock) {
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 6c9795c89..935e79b2c 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
import { WuBytesPipe } from '../../shared/pipes/bytes-pipe/wubytes.pipe';
+import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
import { formatNumber } from '@angular/common';
import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from '../../services/state.service';
@@ -26,6 +27,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() data: any[];
@Input() filterSize = 100000;
@Input() limitFilterFee = 1;
+ @Input() hideCount: boolean = false;
@Input() height: number | string = 200;
@Input() top: number | string = 20;
@Input() right: number | string = 10;
@@ -50,10 +52,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
inverted: boolean;
chartInstance: any = undefined;
weightMode: boolean = false;
+ isWidget: boolean = false;
+ showCount: boolean = true;
constructor(
private vbytesPipe: VbytesPipe,
private wubytesPipe: WuBytesPipe,
+ private amountShortenerPipe: AmountShortenerPipe,
private stateService: StateService,
private storageService: StorageService,
@Inject(LOCALE_ID) private locale: string,
@@ -62,12 +67,16 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
ngOnInit(): void {
this.isLoading = true;
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
+ this.isWidget = this.template === 'widget';
+ this.showCount = !this.isWidget && !this.hideCount;
}
- ngOnChanges() {
+ ngOnChanges(changes) {
if (!this.data) {
return;
}
+ this.isWidget = this.template === 'widget';
+ this.showCount = !this.isWidget && !this.hideCount;
this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
this.mountFeeChart();
@@ -96,10 +105,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
mempoolStats.reverse();
const labels = mempoolStats.map(stats => stats.added);
const finalArrayVByte = this.generateArray(mempoolStats);
+ const finalArrayCount = this.generateCountArray(mempoolStats);
return {
labels: labels,
- series: finalArrayVByte
+ series: finalArrayVByte,
+ countSeries: finalArrayCount,
};
}
@@ -124,9 +135,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
return finalArray;
}
+ generateCountArray(mempoolStats: OptimizedMempoolStats[]) {
+ return mempoolStats.filter(stats => stats.count > 0).map(stats => [stats.added * 1000, stats.count]);
+ }
+
mountFeeChart() {
this.orderLevels();
- const { series } = this.mempoolVsizeFeesData;
+ const { series, countSeries } = this.mempoolVsizeFeesData;
const seriesGraph = [];
const newColors = [];
@@ -178,6 +193,29 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
});
}
}
+ if (this.showCount) {
+ newColors.push('white');
+ seriesGraph.push({
+ zlevel: 1,
+ yAxisIndex: 1,
+ name: 'count',
+ type: 'line',
+ stack: 'count',
+ smooth: false,
+ markPoint: false,
+ lineStyle: {
+ width: 2,
+ opacity: 1,
+ },
+ symbol: 'none',
+ silent: true,
+ areaStyle: {
+ color: null,
+ opacity: 0,
+ },
+ data: countSeries,
+ });
+ }
this.mempoolVsizeFeesOptions = {
series: this.inverted ? [...seriesGraph].reverse() : seriesGraph,
@@ -201,7 +239,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
label: {
formatter: (params: any) => {
if (params.axisDimension === 'y') {
- return this.vbytesPipe.transform(params.value, 2, 'vB', 'MvB', true)
+ if (params.axisIndex === 0) {
+ return this.vbytesPipe.transform(params.value, 2, 'vB', 'MvB', true);
+ } else {
+ return this.amountShortenerPipe.transform(params.value, 2, undefined, true);
+ }
} else {
return formatterXAxis(this.locale, this.windowPreference, params.value);
}
@@ -214,7 +256,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
const itemFormatted = [];
let totalParcial = 0;
let progressPercentageText = '';
- const items = this.inverted ? [...params].reverse() : params;
+ let countItem;
+ let items = this.inverted ? [...params].reverse() : params;
+ if (items[items.length - 1].seriesName === 'count') {
+ countItem = items.pop();
+ }
items.map((item: any, index: number) => {
totalParcial += item.value[1];
const progressPercentage = (item.value[1] / totalValue) * 100;
@@ -276,6 +322,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
`);
});
const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
+ const titleCount = $localize`Count`;
const titleRange = $localize`Range`;
const titleSize = $localize`:@@7faaaa08f56427999f3be41df1093ce4089bbd75:Size`;
const titleSum = $localize`Sum`;
@@ -286,6 +333,25 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
+ ` +
+ (this.showCount && countItem ? `
+