Use dark theme colors for charts

foxypool · Nov 14, 2023 · e25edf5 · e25edf5
1 parent 4232911
commit e25edf5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git 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
@@ -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,
-              },
-            },
-          }],
+          }
         }
       })
     )