Expand mining dashboard widgets & improve responsiveness

2024-11-20 10:21:52 +01:00 · 2024-02-07 23:26:06 +00:00 · 2024-02-07 23:26:06 +00:00 · ce7a007b62
commit ce7a007b62
parent ba0a3d004d
8 changed files with 65 additions and 26 deletions
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@ -58,7 +58,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/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: 432px;
+  }
+}
+
 .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 = 330;
+    } 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;