Improve contrast of chart text/elements in dark mode

src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.html

@@ -31,9 +31,9 @@
       <span translate="Portal.ApiKeyUsage.LoadingData"></span>
     </div>
   } @else {
-    <div style="width: 50%">
-      <div echarts [options]="apiKeyUsageChart" style="height: 300px"></div>
-      <div class="text-center small">
+    <div style="width: 50%" class="pt-2 ps-4">
+      <tp-chart-wrapper [chartOptions]="apiKeyUsageChart" [height]="300" />
+      <div class="mt-2 text-center small">
         <span translate="Portal.ApiKeyUsage.Total"></span>
         <span class="ms-1 fw-bold">{{ totalCount }}</span>
       </div>

src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.ts

@@ -7,15 +7,15 @@ import { FormsModule } from '@angular/forms';
 import { ActionButtonComponent } from '../action-button/action-button.component';
 import { AlertComponent } from '../alert/alert.component';
 import { SmallSpinnerComponent } from '../../../core/components/small-spinner/small-spinner.component';
-import { NgxEchartsDirective } from 'ngx-echarts';
 import { EChartsCoreOption } from 'echarts/core';
 import { TurnierplanApi } from '../../../api/turnierplan-api';
 import { getApiKeyUsage } from '../../../api/fn/api-keys/get-api-key-usage';
+import { ChartWrapperComponent } from '../chart-wrapper/chart-wrapper.component';
 
 @Component({
   selector: 'tp-api-key-usage',
   templateUrl: './api-key-usage.component.html',
-  imports: [TranslateDirective, FormsModule, ActionButtonComponent, AlertComponent, SmallSpinnerComponent, NgxEchartsDirective]
+  imports: [TranslateDirective, FormsModule, ActionButtonComponent, AlertComponent, SmallSpinnerComponent, ChartWrapperComponent]
 })
 export class ApiKeyUsageComponent implements OnDestroy {
   @Output()

src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.html

@@ -0,0 +1,6 @@
+<div
+  echarts
+  class="shadow-sm"
+  [options]="chartOptions"
+  [theme]="(colorThemeService.theme$ | async) === 'dark' ? 'dark-bold' : ''"
+  [style]="style"></div>

src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.ts

@@ -0,0 +1,46 @@
+import { Component, inject, Input } from '@angular/core';
+import { EChartsCoreOption } from 'echarts/core';
+import { NgxEchartsDirective } from 'ngx-echarts';
+import { ColorThemeService } from '../../../core/services/color-theme.service';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'tp-chart-wrapper',
+  imports: [NgxEchartsDirective, AsyncPipe],
+  templateUrl: './chart-wrapper.component.html'
+})
+export class ChartWrapperComponent {
+  @Input({ required: true })
+  public chartOptions!: EChartsCoreOption;
+
+  protected readonly colorThemeService = inject(ColorThemeService);
+
+  protected style: { [key: string]: string } = {};
+
+  private _width?: number;
+  private _height?: number;
+
+  @Input()
+  public set width(value: number) {
+    this._width = value;
+    this.buildStyle();
+  }
+
+  @Input()
+  public set height(value: number) {
+    this._height = value;
+    this.buildStyle();
+  }
+
+  private buildStyle(): void {
+    this.style = {};
+
+    if (this._width !== undefined) {
+      this.style['width'] = `${this._width}px`;
+    }
+
+    if (this._height !== undefined) {
+      this.style['height'] = `${this._height}px`;
+    }
+  }
+}

src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.html

@@ -68,7 +68,7 @@
           <ng-container [ngTemplateOutlet]="excludedTournamentsNotice" />
         </div>
         <div class="mt-3 d-flex flex-row justify-content-center">
-          <div echarts [options]="outcomesBarChart" style="width: 600px; height: 300px"></div>
+          <tp-chart-wrapper [chartOptions]="outcomesBarChart" [width]="600" [height]="300" />
         </div>
       }
 
@@ -77,7 +77,7 @@
 
         <div class="text-center text-decoration-underline" translate="Portal.FolderStatistics.PageViewsPerTournament"></div>
         <div class="mt-3 d-flex flex-row justify-content-center">
-          <div echarts [options]="pageViewsBarChart" style="width: 600px; height: 300px"></div>
+          <tp-chart-wrapper [chartOptions]="pageViewsBarChart" [width]="600" [height]="300" />
         </div>
       }
     </div>

src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.ts

@@ -8,11 +8,11 @@ import { TitleService } from '../../services/title.service';
 import { PageFrameComponent } from '../../components/page-frame/page-frame.component';
 import { NgTemplateOutlet, NgStyle, DecimalPipe, PercentPipe } from '@angular/common';
 import { TooltipIconComponent } from '../../components/tooltip-icon/tooltip-icon.component';
-import { NgxEchartsDirective } from 'ngx-echarts';
 import { EChartsCoreOption } from 'echarts/core';
 import { FolderStatisticsDto } from '../../../api/models/folder-statistics-dto';
 import { TurnierplanApi } from '../../../api/turnierplan-api';
 import { getFolderStatistics } from '../../../api/fn/folders/get-folder-statistics';
+import { ChartWrapperComponent } from '../../components/chart-wrapper/chart-wrapper.component';
 
 @Component({
   templateUrl: './folder-statistics.component.html',
@@ -26,7 +26,7 @@ import { getFolderStatistics } from '../../../api/fn/folders/get-folder-statisti
     DecimalPipe,
     PercentPipe,
     TranslatePipe,
-    NgxEchartsDirective
+    ChartWrapperComponent
   ]
 })
 export class FolderStatisticsComponent implements OnInit, OnDestroy {

src/Turnierplan.App/Client/src/app/portal/portal.component.ts

@@ -19,6 +19,7 @@ import { E2eDirective } from '../core/directives/e2e.directive';
 import { ColorThemeSelectorComponent } from '../core/components/color-theme-selector/color-theme-selector.component';
 
 echarts.use([BarChart, GridComponent, CanvasRenderer, TooltipComponent]);
+import 'echarts/theme/dark-bold.js';
 
 type UserInfoAction = 'ChangePassword' | 'Logout';