SSR: Fix more merge/version conflicts

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html

@@ -45,10 +45,10 @@
     </form>
   </div>
 
-  <div [class.chart]="!widget" [class.chart-widget]="widget" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 </div>

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
-import { EChartsOption } from 'echarts';
+import { EChartsOption } from '../../../graphs/echarts';
 import { Observable, Subscription, combineLatest, fromEvent, share } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../../services/seo.service';
@@ -11,6 +11,7 @@ import { MiningService } from '../../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
 import { Acceleration } from '../../../interfaces/node-api.interface';
 import { ServicesApiServices } from '../../../services/services-api.service';
+import { StateService } from '../../../services/state.service';
 
 @Component({
   selector: 'app-acceleration-fees-graph',
@@ -59,6 +60,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
     private storageService: StorageService,
     private miningService: MiningService,
     private route: ActivatedRoute,
+    public stateService: StateService,
     private cd: ChangeDetectorRef,
   ) {
     this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
@@ -176,10 +178,10 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
           padding: [10, 0, 0, 0],
         },
         type: 'time',
-        boundaryGap: false,
+        boundaryGap: [0, 0],
         axisLine: { onZero: true },
         axisLabel: {
-          formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)),
+          formatter: (val): string => formatterXAxisTimeCategory(this.locale, this.timespan, val),
           align: 'center',
           fontSize: 11,
           lineHeight: 12,

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -42,7 +42,7 @@
             <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">
+          <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
             <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
           </div>
         </div>
@@ -66,16 +66,6 @@
       </div>
     </div>
 
-    <!-- Avg block fees graph -->
-    <!-- <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-block-fee-rates-graph [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-block-fee-rates-graph>
-          <div class="mt-1"><a [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" fragment="1m" i18n="dashboard.view-more">View more &raquo;</a></div>
-        </div>
-      </div>
-    </div> -->
-
     <!-- Recent Accelerations List -->
     <div class="col">
       <div class="card list-card">

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { OpenGraphService } from '../../../services/opengraph.service';
 import { WebsocketService } from '../../../services/websocket.service';
@@ -10,6 +10,7 @@ import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
 import { feeLevels, mempoolFeeColors } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
+import { detectWebGL } from '../../../shared/graphs.utils';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
@@ -30,6 +31,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   pendingAccelerations$: Observable<Acceleration[]>;
   minedAccelerations$: Observable<Acceleration[]>;
   loadingBlocks: boolean = true;
+  webGlEnabled = true;
 
   graphHeight: number = 300;
 
@@ -39,7 +41,9 @@ export class AcceleratorDashboardComponent implements OnInit {
     private websocketService: WebsocketService,
     private serviceApiServices: ServicesApiServices,
     private stateService: StateService,
+    @Inject(PLATFORM_ID) private platformId: Object,
   ) {
+    this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
     this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Accelerator Dashboard`);
     this.ogService.setManualOgImage('accelerator.jpg');
   }
@@ -48,7 +52,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
 
-    this.pendingAccelerations$ = interval(30000).pipe(
+    this.pendingAccelerations$ = (this.stateService.isBrowser ? interval(30000) : of(null)).pipe(
       startWith(true),
       switchMap(() => {
         return this.serviceApiServices.getAccelerations$().pipe(