From a2b9b0c89df189789d9aa8c66bdbcba0ce8230e6 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 18 Oct 2023 21:12:51 +0000
Subject: [PATCH] Exclude echarts from server-side rendering

---
 .../block-fees-graph.component.html           |  2 +-
 .../block-health-graph.component.html         |  2 +-
 .../block-rewards-graph.component.html        |  2 +-
 .../block-sizes-weights-graph.component.html  |  2 +-
 .../fee-distribution-graph.component.html     |  2 +-
 .../hashrate-chart.component.html             |  2 +-
 .../hashrate-chart-pools.component.html       |  2 +-
 ...incoming-transactions-graph.component.html |  2 +-
 .../lbtc-pegs-graph.component.html            |  2 +-
 .../mempool-graph.component.html              |  2 +-
 .../pool-ranking/pool-ranking.component.html  |  2 +-
 .../pool/pool-preview.component.html          |  2 +-
 .../app/components/pool/pool.component.html   |  2 +-
 .../node-fee-chart.component.html             |  2 +-
 .../node-statistics-chart.component.html      |  2 +-
 .../nodes-channels-map.component.html         |  2 +-
 .../node-channels.component.html              |  2 +-
 .../nodes-map/nodes-map.component.html        |  8 +++++---
 .../nodes-networks-chart.component.html       |  2 +-
 .../nodes-per-country-chart.component.html    |  2 +-
 .../nodes-per-isp-chart.component.html        |  2 +-
 .../lightning-statistics-chart.component.html |  2 +-
 .../directives/browser-only.directive.ts      | 19 +++++++++++++++++++
 frontend/src/app/shared/shared.module.ts      |  3 +++
 24 files changed, 48 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/app/shared/directives/browser-only.directive.ts

diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
index 76071be96..9734f8681 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
@@ -36,7 +36,7 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/block-health-graph/block-health-graph.component.html b/frontend/src/app/components/block-health-graph/block-health-graph.component.html
index 4cd10f2dd..84a75dd3c 100644
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.html
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.html
@@ -45,7 +45,7 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
index 198153583..7a99ac52e 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
@@ -37,7 +37,7 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
index 122b5e7ca..002bbc90d 100644
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
@@ -44,7 +44,7 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
index 3465bde35..afdc35e06 100644
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
@@ -1,5 +1,5 @@
 <div class="fee-distribution-chart" *ngIf="mempoolVsizeFeesOptions; else loadingFees">
-  <div echarts [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+  <div *browserOnly echarts [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
 </div>
 
 <ng-template #loadingFees>
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index f3d340472..eba2746e0 100644
--- 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'" [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
index bbdc745fe..b1588cbb5 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@@ -31,7 +31,7 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
index 05f9d5afb..6b59c557e 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
@@ -1,4 +1,4 @@
-<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
+<div class="echarts" *browserOnly echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
   (chartInit)="onChartInit($event)">
 </div>
 <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
index 99fb46934..878869505 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
@@ -1,4 +1,4 @@
-<div class="echarts" echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
+<div class="echarts" *browserOnly echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
 <div class="text-center loadingGraphs" *ngIf="isLoading">
   <div class="spinner-border text-light"></div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.html b/frontend/src/app/components/mempool-graph/mempool-graph.component.html
index f3ec401cf..1f3621bc3 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.html
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.html
@@ -1,4 +1,4 @@
-<div echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+<div *browserOnly echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
 <div class="text-center loadingGraphs" *ngIf="isLoading">
   <div class="spinner-border text-light"></div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 0cab4456f..f5e21e66f 100644
--- 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'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
       (chartInit)="onChartInit($event)">
     </div>
 
diff --git a/frontend/src/app/components/pool/pool-preview.component.html b/frontend/src/app/components/pool/pool-preview.component.html
index ff5201ae0..5ccb415e6 100644
--- a/frontend/src/app/components/pool/pool-preview.component.html
+++ b/frontend/src/app/components/pool/pool-preview.component.html
@@ -25,7 +25,7 @@
       </div>
   </div>
   <div class="row hash-chart full-width-row">
-    <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartFinished)="onChartReady()"></div>
+    <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartFinished)="onChartReady()"></div>
   </div>
 </div>
 
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index c73f68a46..ad84c77ce 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -168,7 +168,7 @@
   </ng-template>
 
   <!-- Hashrate chart -->
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html
index 468b22acf..4b3a13016 100644
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html
@@ -1,6 +1,6 @@
 <div class="full-container">
   <h2 i18n="lightning.node-fee-distribution">Fee distribution</h2>
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html
index c5cad52fa..209958fde 100644
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html
@@ -1,6 +1,6 @@
 <div class="full-container">
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
+  <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
index 7237c709f..50f84db30 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
@@ -1,7 +1,7 @@
 <div class="map-wrapper" [class]="style" *ngIf="style !== 'graph'">
   <ng-container *ngIf="channelsObservable | async">
     <div *ngIf="chartOptions" [class]="'full-container ' + style + (fitContainer ? ' fit-container' : '')">
-      <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+      <div class="chart" [class]="style" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
         (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
       </div>
       <div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>
diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.html b/frontend/src/app/lightning/nodes-channels/node-channels.component.html
index 8fc63793c..c3a865a0f 100644
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.html
+++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="channelsObservable$ | async" style="min-height: 455px">
   <h2 i18n="lightning.active-channels-map">Active channels map</h2>
-  <div echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
+  <div *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
   </div>
 </div>
 
diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.html b/frontend/src/app/lightning/nodes-map/nodes-map.component.html
index 7fed096f5..045ab7925 100644
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.html
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.html
@@ -7,8 +7,10 @@
     <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
   </div>
 
-  <div *ngIf="observable$ | async" class="chart" [class]="widget ? 'widget' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
-  </div>
+  <ng-container *ngIf="observable$ | async">
+    <div class="chart" [class]="widget ? 'widget' : ''" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+      (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
+    </div>
+  </ng-container>
 
 </div>
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
index 915f2f7ec..cf02b60a8 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
@@ -35,7 +35,7 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
+  <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
index ed42595ef..5c285e3de 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@@ -12,7 +12,7 @@
 
   <div class="container pb-lg-0">
     <div class="pb-lg-5">
-      <div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+      <div class="chart w-100" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
         (chartInit)="onChartInit($event)">
       </div>
     </div>
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
index 794ced684..aa005933a 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@@ -39,7 +39,7 @@
   </div>
 
   <div *ngIf="!indexingInProgress else indexing" [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
-    <div [class]="widget ? 'chart-widget' : 'chart'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
       (chartInit)="onChartInit($event)">
     </div>
 
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
index 9bb88ac59..b0bfc8295 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
@@ -42,7 +42,7 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
diff --git a/frontend/src/app/shared/directives/browser-only.directive.ts b/frontend/src/app/shared/directives/browser-only.directive.ts
new file mode 100644
index 000000000..97df39e2b
--- /dev/null
+++ b/frontend/src/app/shared/directives/browser-only.directive.ts
@@ -0,0 +1,19 @@
+import { Directive, TemplateRef, ViewContainerRef, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Directive({
+  selector: '[browserOnly]'
+})
+export class BrowserOnlyDirective {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {
+    if (isPlatformBrowser(this.platformId)) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 245b68c53..53a5beba5 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -33,6 +33,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
 import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
+import { BrowserOnlyDirective } from './directives/browser-only.directive';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
 import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
 import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
@@ -132,6 +133,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     FeeRoundingPipe,
     FiatCurrencyPipe,
     ColoredPriceDirective,
+    BrowserOnlyDirective,
     BlockchainComponent,
     BlockViewComponent,
     EightBlocksComponent,
@@ -264,6 +266,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     Decimal2HexPipe,
     FeeRoundingPipe,
     ColoredPriceDirective,
+    BrowserOnlyDirective,
     NoSanitizePipe,
     BlockchainComponent,
     MempoolBlocksComponent,