Merge branch 'master' into hunicus/move-on-in-it

frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts

@@ -1,5 +1,6 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from '../../services/state.service';
 import { EventType, NavigationStart, Router } from '@angular/router';
@@ -11,18 +12,22 @@ import { EventType, NavigationStart, Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit, AfterViewInit {
+  graphHeight = 375;
+
   constructor(
     private seoService: SeoService,
+    private ogService: OpenGraphService,
     private websocketService: WebsocketService,
     private stateService: StateService,
     private router: Router
-  ) {
-  }
+  ) { }
 
   ngOnInit(): void {
+    this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
     this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Mining Dashboard`);
     this.seoService.setDescription($localize`:@@meta.description.mining.dashboard:Get real-time Bitcoin mining stats like hashrate, difficulty adjustment, block rewards, pool dominance, and more.`);
+    this.ogService.setManualOgImage('mining.jpg');
   }
 
   ngAfterViewInit(): void {
@@ -35,4 +40,15 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
       }
     });
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.graphHeight = 335;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 240;
+    }
+  }
 }