From abeb5434e565a027eb1c46085da03aeae4e0d916 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elias=20H=C3=B6rner?= Date: Sun, 1 Mar 2026 10:17:15 +0100 Subject: [PATCH] Fix --- .../api-key-usage.component.html | 6 +-- .../api-key-usage/api-key-usage.component.ts | 4 +- .../chart-wrapper.component.html | 6 +++ .../chart-wrapper/chart-wrapper.component.ts | 46 +++++++++++++++++++ .../folder-statistics.component.html | 4 +- .../folder-statistics.component.ts | 4 +- .../Client/src/app/portal/portal.component.ts | 1 + 7 files changed, 62 insertions(+), 9 deletions(-) create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.html create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.ts diff --git a/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.html b/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.html index 30b761ef..f2fb19dd 100644 --- a/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.html +++ b/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.html @@ -31,9 +31,9 @@ } @else { -
-
-
+
+ +
{{ totalCount }}
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.ts index 72c7d8f4..225b4623 100644 --- a/src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.ts +++ b/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() diff --git a/src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.html b/src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.html new file mode 100644 index 00000000..e3d35603 --- /dev/null +++ b/src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.html @@ -0,0 +1,6 @@ +
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/chart-wrapper/chart-wrapper.component.ts new file mode 100644 index 00000000..ab091770 --- /dev/null +++ b/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`; + } + } +} diff --git a/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.html b/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.html index a6c3a437..0df51334 100644 --- a/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.html +++ b/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.html @@ -68,7 +68,7 @@
-
+
} @@ -77,7 +77,7 @@
-
+
}
diff --git a/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.ts b/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.ts index 101e2709..176c0508 100644 --- a/src/Turnierplan.App/Client/src/app/portal/pages/folder-statistics/folder-statistics.component.ts +++ b/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 { diff --git a/src/Turnierplan.App/Client/src/app/portal/portal.component.ts b/src/Turnierplan.App/Client/src/app/portal/portal.component.ts index 23e1c5cd..c59c251a 100644 --- a/src/Turnierplan.App/Client/src/app/portal/portal.component.ts +++ b/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';