Merge branch 'master' into natsoni/fix-broken-blocks-skeleton

2024-02-08 16:22:06 +08:00
parent 03d4375b17 999994c701
commit a51d82bcfb
36 changed files with 436 additions and 233 deletions
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
@@ -27,12 +27,6 @@
    </form>
  </div>

-  <div *ngIf="widget">
-    <div class="item">
-      <h5 class="card-title" i18n="acceleration.total-bid-boost">Total Bid Boost</h5>
-    </div>
-  </div>
-
  <div [class.chart]="!widget" [class.chart-widget]="widget" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
@@ -53,11 +53,6 @@
    padding-bottom: 55px;
  }
 }
-.chart-widget {
-  width: 100%;
-  height: 100%;
-  max-height: 290px;
-}

 h5 {
  margin-bottom: 10px;
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
 import { EChartsOption, graphic } from 'echarts';
-import { Observable, Subscription, combineLatest } from 'rxjs';
+import { Observable, Subscription, combineLatest, fromEvent } from 'rxjs';
 import { map, max, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { SeoService } from '../../../services/seo.service';
@@ -28,6 +28,7 @@ import { Acceleration } from '../../../interfaces/node-api.interface';
 })
 export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
  @Input() widget: boolean = false;
+  @Input() height: number | string = '200';
  @Input() right: number | string = 45;
  @Input() left: number | string = 75;
  @Input() accelerations$: Observable<Acceleration[]>;
@@ -74,6 +75,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
      this.statsObservable$ = combineLatest([
        (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
        this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
+        fromEvent(window, 'resize').pipe(startWith(null)),
      ]).pipe(
        tap(([accelerations, blockFeesResponse]) => {
          this.prepareChartOptions(accelerations, blockFeesResponse.body);
@@ -173,6 +175,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
      ],
      animation: false,
      grid: {
+        height: this.height,
        right: this.right,
        left: this.left,
        bottom: this.widget ? 30 : 80,
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -37,6 +37,11 @@
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card">
        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
+          <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5>
+            <span>&nbsp;</span>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+          </a>
          <div class="mempool-block-wrapper">
            <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
          </div>
@@ -48,7 +53,15 @@
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card graph-card">
        <div class="card-body pl-2 pr-2">
-          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true [accelerations$]="accelerations$"></app-acceleration-fees-graph>
+          <h5 class="card-title" i18n="acceleration.total-bid-boost">Total Bid Boost</h5>
+          <div class="mempool-graph">
+            <app-acceleration-fees-graph
+              [height]="graphHeight"
+              [attr.data-cy]="'acceleration-fees'"
+              [widget]=true
+              [accelerations$]="accelerations$"
+            ></app-acceleration-fees-graph>
+          </div>
          <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -17,6 +17,16 @@
  }
 }

+.mempool-graph {
+  height: 295px;
+  @media (min-width: 768px) {
+    height: 325px;
+  }
+  @media (min-width: 992px) {
+    height: 400px;
+  }
+}
+
 .card-title {
  font-size: 1rem;
  color: #4a68b9;
@@ -135,7 +145,12 @@
 }

 .card {
-  height: 385px;
+  @media (min-width: 768px) {
+    height: 420px;
+  }
+  @media (min-width: 992px) {
+    height: 510px;
+  }
 }
 .list-card {
  height: 410px;
@@ -145,7 +160,16 @@
 }

 .mempool-block-wrapper {
-  max-height: 380px;
-  max-width: 380px;
+  max-height: 430px;
+  max-width: 430px;
  margin: auto;
+
+  @media (min-width: 768px) {
+    max-height: 344px;
+    max-width: 344px;
+  }
+  @media (min-width: 992px) {
+    max-height: 430px;
+    max-width: 430px;
+  }
 }
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
@@ -30,6 +30,8 @@ export class AcceleratorDashboardComponent implements OnInit {
  minedAccelerations$: Observable<Acceleration[]>;
  loadingBlocks: boolean = true;

+  graphHeight: number = 300;
+
  constructor(
    private seoService: SeoService,
    private websocketService: WebsocketService,
@@ -40,6 +42,7 @@ export class AcceleratorDashboardComponent implements OnInit {
  }

  ngOnInit(): void {
+    this.onResize();
    this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);

    this.pendingAccelerations$ = interval(30000).pipe(
@@ -121,4 +124,15 @@ export class AcceleratorDashboardComponent implements OnInit {
      return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
    }
  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.graphHeight = 330;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 210;
+    }
+  }
 }
--- a/frontend/src/app/components/address-labels/address-labels.component.ts
+++ b/frontend/src/app/components/address-labels/address-labels.component.ts
@@ -43,7 +43,7 @@ export class AddressLabelsComponent implements OnChanges {

  handleVin() {
    if (this.vin.inner_witnessscript_asm) {
-      if (this.vin.inner_witnessscript_asm.indexOf('OP_DEPTH OP_PUSHNUM_12 OP_EQUAL OP_IF OP_PUSHNUM_11') === 0) {
+      if (this.vin.inner_witnessscript_asm.indexOf('OP_DEPTH OP_PUSHNUM_12 OP_EQUAL OP_IF OP_PUSHNUM_11') === 0 || this.vin.inner_witnessscript_asm.indexOf('OP_PUSHNUM_15 OP_CHECKMULTISIG OP_IFDUP OP_NOTIF OP_PUSHBYTES_2') === 1259) {
        if (this.vin.witness.length > 11) {
          this.label = 'Liquid Peg Out';
        } else {
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -31,8 +31,7 @@ export class AddressComponent implements OnInit, OnDestroy {
  addressLoadingStatus$: Observable<number>;
  addressInfo: null | AddressInformation = null;

-  totalConfirmedTxCount = 0;
-  loadedConfirmedTxCount = 0;
+  fullyLoaded = false;
  txCount = 0;
  received = 0;
  sent = 0;
@@ -66,7 +65,7 @@ export class AddressComponent implements OnInit, OnDestroy {
        switchMap((params: ParamMap) => {
          this.error = undefined;
          this.isLoadingAddress = true;
-          this.loadedConfirmedTxCount = 0;
+          this.fullyLoaded = false;
          this.address = null;
          this.isLoadingTransactions = true;
          this.transactions = null;
@@ -128,7 +127,6 @@ export class AddressComponent implements OnInit, OnDestroy {
          this.tempTransactions = transactions;
          if (transactions.length) {
            this.lastTransactionTxId = transactions[transactions.length - 1].txid;
-            this.loadedConfirmedTxCount += transactions.filter((tx) => tx.status.confirmed).length;
          }

          const fetchTxs: string[] = [];
@@ -191,8 +189,6 @@ export class AddressComponent implements OnInit, OnDestroy {
            this.audioService.playSound('magic');
          }
        }
-        this.totalConfirmedTxCount++;
-        this.loadedConfirmedTxCount++;
      });
  }

@@ -252,16 +248,19 @@ export class AddressComponent implements OnInit, OnDestroy {
  }

  loadMore() {
-    if (this.isLoadingTransactions || !this.totalConfirmedTxCount || this.loadedConfirmedTxCount >= this.totalConfirmedTxCount) {
+    if (this.isLoadingTransactions || this.fullyLoaded) {
      return;
    }
    this.isLoadingTransactions = true;
    this.retryLoadMore = false;
    this.electrsApiService.getAddressTransactions$(this.address.address, this.lastTransactionTxId)
      .subscribe((transactions: Transaction[]) => {
-        this.lastTransactionTxId = transactions[transactions.length - 1].txid;
-        this.loadedConfirmedTxCount += transactions.length;
-        this.transactions = this.transactions.concat(transactions);
+        if (transactions && transactions.length) {
+          this.lastTransactionTxId = transactions[transactions.length - 1].txid;
+          this.transactions = this.transactions.concat(transactions);
+        } else {
+          this.fullyLoaded = true;
+        }
        this.isLoadingTransactions = false;
      },
      (error) => {
@@ -278,7 +277,6 @@ export class AddressComponent implements OnInit, OnDestroy {
    this.received = this.address.chain_stats.funded_txo_sum + this.address.mempool_stats.funded_txo_sum;
    this.sent = this.address.chain_stats.spent_txo_sum + this.address.mempool_stats.spent_txo_sum;
    this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count;
-    this.totalConfirmedTxCount = this.address.chain_stats.tx_count;
  }

  ngOnDestroy() {
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -42,6 +42,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  @Input() showFilters: boolean = false;
  @Input() excludeFilters: string[] = [];
  @Input() filterFlags: bigint | null = null;
+  @Input() filterMode: 'and' | 'or' = 'and';
  @Input() blockConversion: Price;
  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
  @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
@@ -113,7 +114,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    if (changes.overrideColor && this.scene) {
      this.scene.setColorFunction(this.overrideColors);
    }
-    if ((changes.filterFlags || changes.showFilters)) {
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode)) {
      this.setFilterFlags();
    }
  }
@@ -121,8 +122,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  setFilterFlags(flags?: bigint | null): void {
    this.activeFilterFlags = this.filterFlags || flags || null;
    if (this.scene) {
-      if (flags != null) {
-        this.scene.setColorFunction(this.getFilterColorFunction(flags));
+      if (this.activeFilterFlags != null) {
+        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
      } else {
        this.scene.setColorFunction(this.overrideColors);
      }
@@ -523,7 +524,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On

  getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
    return (tx: TxView) => {
-      if ((tx.bigintFlags & flags) === flags) {
+      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (tx.bigintFlags & flags) > 0n)) {
        return defaultColorFunction(tx);
      } else {
        return defaultColorFunction(
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -54,7 +54,7 @@
    </form>
  </div>

-  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
  <div class="text-center loadingGraphs" *ngIf="isLoading">
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -57,8 +57,6 @@
 }
 .chart-widget {
  width: 100%;
-  height: 100%;
-  height: 240px;
 }

 .pool-distribution {
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
 import { echarts, EChartsOption } from '../../graphs/echarts';
-import { merge, Observable, of } from 'rxjs';
+import { combineLatest, fromEvent, merge, Observable, of } from 'rxjs';
 import { map, mergeMap, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
@@ -31,6 +31,7 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
 export class HashrateChartComponent implements OnInit {
  @Input() tableOnly = false;
  @Input() widget = false;
+  @Input() height: number = 300;
  @Input() right: number | string = 45;
  @Input() left: number | string = 75;

@@ -86,28 +87,32 @@ export class HashrateChartComponent implements OnInit {
        }
      });

-    this.hashrateObservable$ = merge(
-      this.radioGroupForm.get('dateSpan').valueChanges
-        .pipe(
-          startWith(this.radioGroupForm.controls.dateSpan.value),
-          switchMap((timespan) => {
-            if (!this.widget && !firstRun) {
-              this.storageService.setValue('miningWindowPreference', timespan);
-            }
-            this.timespan = timespan;
-            firstRun = false;
-            this.miningWindowPreference = timespan;
-            this.isLoading = true;
-            return this.apiService.getHistoricalHashrate$(this.timespan);
-          })
-        ),
-        this.stateService.chainTip$
+    this.hashrateObservable$ = combineLatest(
+        merge(
+        this.radioGroupForm.get('dateSpan').valueChanges
          .pipe(
-            switchMap(() => {
+            startWith(this.radioGroupForm.controls.dateSpan.value),
+            switchMap((timespan) => {
+              if (!this.widget && !firstRun) {
+                this.storageService.setValue('miningWindowPreference', timespan);
+              }
+              this.timespan = timespan;
+              firstRun = false;
+              this.miningWindowPreference = timespan;
+              this.isLoading = true;
              return this.apiService.getHistoricalHashrate$(this.timespan);
            })
-          )
+          ),
+          this.stateService.chainTip$
+            .pipe(
+              switchMap(() => {
+                return this.apiService.getHistoricalHashrate$(this.timespan);
+              })
+            )
+        ),
+        fromEvent(window, 'resize').pipe(startWith(null)),
      ).pipe(
+        map(([response, _]) => response),
        tap((response: any) => {
          const data = response.body;

@@ -221,6 +226,7 @@ export class HashrateChartComponent implements OnInit {
        ]),
      ],
      grid: {
+        height: (this.widget && this.height) ? this.height - 30 : undefined,
        top: this.widget ? 20 : 40,
        bottom: this.widget ? 30 : 70,
        right: this.right,
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -1,11 +1,13 @@
 <app-block-overview-graph
  #blockGraph
  [isLoading]="isLoading$ | async"
-  [resolution]="86"
+  [resolution]="resolution"
  [blockLimit]="stateService.blockVSize"
  [orientation]="timeLtr ? 'right' : 'left'"
  [flip]="true"
  [showFilters]="showFilters"
+  [filterFlags]="filterFlags"
+  [filterMode]="filterMode"
  [overrideColors]="overrideColors"
  (txClickEvent)="onTxClick($event)"
 ></app-block-overview-graph>
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -18,8 +18,11 @@ import TxView from '../block-overview-graph/tx-view';
 })
 export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
  @Input() index: number;
+  @Input() resolution = 86;
  @Input() showFilters: boolean = false;
  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
+  @Input() filterFlags: bigint | undefined = undefined;
+  @Input() filterMode: 'and' | 'or' = 'and';
  @Output() txPreviewEvent = new EventEmitter<TransactionStripped | void>();

  @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -26,9 +26,11 @@

    <!-- pool distribution -->
    <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card graph-card">
+      <div class="card">
        <div class="card-body pl-2 pr-2">
-          <app-pool-ranking [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking>
+          <div class="mempool-graph">
+            <app-pool-ranking [height]="graphHeight" [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking>
+          </div>
          <div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
@@ -38,7 +40,9 @@
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card">
        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
-          <app-hashrate-chart [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart>
+          <div class="fixed-mempool-graph">
+            <app-hashrate-chart [height]="graphHeight" [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart>
+          </div>
          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -17,6 +17,19 @@
  }
 }

+.fixed-mempool-graph {
+  height: 330px;
+}
+
+.mempool-graph, .fixed-mempool-graph {
+  @media (min-width: 768px) {
+    height: 345px;
+  }
+  @media (min-width: 992px) {
+    height: 472px;
+  }
+}
+
 .card-title {
  font-size: 1rem;
  color: #4a68b9;
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../services/seo.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from '../../services/state.service';
@@ -11,6 +11,8 @@ import { EventType, NavigationStart, Router } from '@angular/router';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit, AfterViewInit {
+  graphHeight = 300;
+
  constructor(
    private seoService: SeoService,
    private websocketService: WebsocketService,
@@ -22,6 +24,7 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
  }

  ngOnInit(): void {
+    this.onResize();
    this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
  }

@@ -35,4 +38,15 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
      }
    });
  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.graphHeight = 340;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 240;
+    }
+  }
 }
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -76,7 +76,7 @@
  </div>

  <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
-    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="widget ? 'chart-widget' : 'chart'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
      (chartInit)="onChartInit($event)">
    </div>

--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -28,7 +28,9 @@
 .chart-widget {
  width: 100%;
  height: 100%;
-  height: 240px;
+  @media (max-width: 767px) {
+    max-height: 240px;
+  }
  @media (max-width: 485px) {
    max-height: 200px;
  }
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -20,6 +20,7 @@ import { isMobile } from '../../shared/common.utils';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PoolRankingComponent implements OnInit {
+  @Input() height: number = 300;
  @Input() widget = false;

  miningWindowPreference: string;