diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 15e4a41fa..c41cb4971 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } import { ActivatedRoute } from '@angular/router'; import { EChartsOption, graphic } from 'echarts'; import { BehaviorSubject, Observable, timer } from 'rxjs'; -import { map, switchMap, tap } from 'rxjs/operators'; +import { distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators'; import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface'; import { ApiService } from 'src/app/services/api.service'; import { StateService } from 'src/app/services/state.service'; @@ -20,7 +20,7 @@ export class PoolComponent implements OnInit { @Input() left: number | string = 75; gfg = true; - + formatNumber = formatNumber; poolStats$: Observable; blocks$: Observable; @@ -34,7 +34,7 @@ export class PoolComponent implements OnInit { blocks: BlockExtended[] = []; slug: string = undefined; - loadMoreSubject: BehaviorSubject = new BehaviorSubject(this.slug); + loadMoreSubject: BehaviorSubject = new BehaviorSubject(this.blocks[this.blocks.length - 1]?.height); constructor( @Inject(LOCALE_ID) public locale: string, @@ -50,18 +50,20 @@ export class PoolComponent implements OnInit { switchMap((slug: any) => { this.isLoading = true; this.slug = slug; - this.loadMoreSubject.next(this.slug); return this.apiService.getPoolHashrate$(this.slug) .pipe( switchMap((data) => { this.isLoading = false; this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate])); - return slug; + return [slug]; }), ); }), - switchMap(() => { - return this.apiService.getPoolStats$(this.slug); + switchMap((slug) => { + return this.apiService.getPoolStats$(slug); + }), + tap(() => { + this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height); }), map((poolStats) => { let regexes = '"'; @@ -79,6 +81,7 @@ export class PoolComponent implements OnInit { this.blocks$ = this.loadMoreSubject .pipe( + distinctUntilChanged(), switchMap((flag) => { if (this.slug === undefined) { return []; @@ -88,7 +91,8 @@ export class PoolComponent implements OnInit { tap((newBlocks) => { this.blocks = this.blocks.concat(newBlocks); }), - map(() => this.blocks) + map(() => this.blocks), + share(), ); } @@ -124,7 +128,7 @@ export class PoolComponent implements OnInit { align: 'left', }, borderColor: '#000', - formatter: function(ticks: any[]) { + formatter: function (ticks: any[]) { let hashratePowerOfTen: any = selectPowerOfTen(1); let hashrate = ticks[0].data[1]; @@ -192,14 +196,14 @@ export class PoolComponent implements OnInit { bottom: 0, left: 20, right: 15, - selectedDataBackground: { + selectedDataBackground: { lineStyle: { color: '#fff', opacity: 0.45, }, areaStyle: { opacity: 0, - }, + }, }, }], }; @@ -210,7 +214,7 @@ export class PoolComponent implements OnInit { } loadMore() { - this.loadMoreSubject.next(this.slug); + this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height); } trackByBlock(index: number, block: BlockExtended) {