From e25edf5b4fed9be3a87393da3d8c59d0223a8ccd Mon Sep 17 00:00:00 2001
From: Felix Brucker <felix@felixbrucker.com>
Date: Tue, 14 Nov 2023 23:29:08 +0530
Subject: [PATCH] Use dark theme colors for charts

---
 src/app/info/info.component.html |  2 +-
 src/app/info/info.component.ts   | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/info/info.component.html b/src/app/info/info.component.html
index 68d1198..cddf8df 100644
--- a/src/app/info/info.component.html
+++ b/src/app/info/info.component.html
@@ -48,7 +48,7 @@ <h4>
     </div>
   </div>
   <div class="col-auto">
-    <div echarts [options]="clientVersionsChartOptions" [merge]="clientVersionsChartUpdateOptions" theme="default" class="client-version-chart"></div>
+    <div echarts [options]="clientVersionsChartOptions" [merge]="clientVersionsChartUpdateOptions" [theme]="chartTheme" class="client-version-chart"></div>
   </div>
   <div class="col-auto">
     <h5>Chart Mode</h5>
diff --git a/src/app/info/info.component.ts b/src/app/info/info.component.ts
index cf658b1..bfa6400 100644
--- a/src/app/info/info.component.ts
+++ b/src/app/info/info.component.ts
@@ -29,6 +29,10 @@ export class InfoComponent implements OnInit, OnDestroy {
     return this.poolsProvider.pool.type === PoolType.nft
   }
 
+  public get chartTheme(): string {
+    return this.themeProvider.isDarkTheme ? 'dark' : 'default'
+  }
+
   protected readonly faCheck = faCheck
 
   private clientVersionsUpdateInterval?: ReturnType<typeof setInterval>
@@ -62,6 +66,7 @@ export class InfoComponent implements OnInit, OnDestroy {
     private readonly themeProvider: ThemeProvider,
   ) {
     this.clientVersionsChartOptions = {
+      backgroundColor: 'rgba(0,0,0,0)',
       title: {
         text: 'Client Versions',
         left: 'center',
@@ -116,16 +121,16 @@ export class InfoComponent implements OnInit, OnDestroy {
               color: textColor,
             },
           },
-          series: [{
-            label: {
+        }
+        if (this.clientVersionsChartUpdateOptions.series !== undefined) {
+          this.clientVersionsChartUpdateOptions.series[0].label = {
+            color: textColor,
+          }
+          this.clientVersionsChartUpdateOptions.series[0].labelLine = {
+            lineStyle: {
               color: textColor,
             },
-            labelLine: {
-              lineStyle: {
-                color: textColor,
-              },
-            },
-          }],
+          }
         }
       })
     )