From 64542bd660224bcf091bf6c3c4f7ab2d5a8b3a67 Mon Sep 17 00:00:00 2001 From: Software Magico Date: Tue, 7 May 2024 12:12:35 +0200 Subject: [PATCH] Improved visibility --- .../components/charts/custom-chart-component.ts | 2 +- .../charts/gauge-chart/gauge-chart.component.ts | 15 +++++++++------ .../charts/pie-chart/pie-chart.component.ts | 14 ++++++++++++-- frontend/src/app/utils/dates/date-conversor.ts | 2 +- .../tournament-statistics.component.ts | 8 ++++---- 5 files changed, 27 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/components/charts/custom-chart-component.ts b/frontend/src/app/components/charts/custom-chart-component.ts index e7c23eaaa..cc2bc148a 100644 --- a/frontend/src/app/components/charts/custom-chart-component.ts +++ b/frontend/src/app/components/charts/custom-chart-component.ts @@ -241,7 +241,7 @@ export abstract class CustomChartComponent implements OnInit { //fillSeriesColor: true, style: { fontFamily: 'Roboto', - }, + } } } diff --git a/frontend/src/app/components/charts/gauge-chart/gauge-chart.component.ts b/frontend/src/app/components/charts/gauge-chart/gauge-chart.component.ts index eccd1656c..c210bac06 100644 --- a/frontend/src/app/components/charts/gauge-chart/gauge-chart.component.ts +++ b/frontend/src/app/components/charts/gauge-chart/gauge-chart.component.ts @@ -7,7 +7,7 @@ import {DarkModeService} from "../../../services/notifications/dark-mode.service import {UserSessionService} from "../../../services/user-session.service"; import {ApexTheme} from "ng-apexcharts/lib/model/apex-types"; -type GaugeChartOptions = { +export type GaugeChartOptions = { series: number[]; colors: string []; labels: string[]; @@ -66,13 +66,13 @@ export class GaugeChartComponent extends CustomChartComponent { this.chartOptions = { colors: this.colors, chart: this.getChart('radialBar', this.width, this.height, this.shadow, this.showToolbar), - series: this.data?.getValues(), - labels: this.data?.getLabels(), + series: this.data!.getValues(), + labels: this.data!.getLabels(), fill: this.getFill(this.fill, this.opacity), plotOptions: this.getPlotOptions(), tooltip: this.getTooltip(), title: this.getTitle(this.title, this.titleAlignment), - theme:this.getTheme() + theme: this.getTheme() }; } @@ -102,7 +102,10 @@ export class GaugeChartComponent extends CustomChartComponent { value: { show: true, offsetY: -15, - fontSize: "12px" + fontSize: "12px", + formatter: function (value: number): string { + return value.toFixed(2) + "%" + } } }, hollow: { @@ -112,7 +115,7 @@ export class GaugeChartComponent extends CustomChartComponent { } } - update(data: GaugeChartData) { + update(data: GaugeChartData): void { this.chart.updateSeries(data.getData()); } } diff --git a/frontend/src/app/components/charts/pie-chart/pie-chart.component.ts b/frontend/src/app/components/charts/pie-chart/pie-chart.component.ts index dc13ef340..3157f15c7 100644 --- a/frontend/src/app/components/charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/components/charts/pie-chart/pie-chart.component.ts @@ -2,7 +2,7 @@ import {Component, Input, ViewChild} from '@angular/core'; import { ApexChart, - ApexFill, ApexGrid, + ApexFill, ApexLegend, ApexNonAxisChartSeries, ApexResponsive, @@ -89,8 +89,18 @@ export class PieChartComponent extends CustomChartComponent { return undefined; } - update(data: PieChartData) { + update(data: PieChartData): void { this.chart.updateSeries(data.getData()); } + protected override getTooltip(): ApexTooltip { + return { + theme: 'dark', + //fillSeriesColor: true, + style: { + fontFamily: 'Roboto', + } + } + } + } diff --git a/frontend/src/app/utils/dates/date-conversor.ts b/frontend/src/app/utils/dates/date-conversor.ts index 7bdc8d87a..bd0a35adf 100644 --- a/frontend/src/app/utils/dates/date-conversor.ts +++ b/frontend/src/app/utils/dates/date-conversor.ts @@ -12,7 +12,7 @@ export function convertSeconds(seconds: number | undefined): string { } export function convertDate(pipe: DatePipe, date: Date | undefined): string | null { - if (date) { + if (date && new Date(date).getFullYear() > 2000) { return pipe.transform(date, 'short'); } return ""; diff --git a/frontend/src/app/views/tournament-statistics/tournament-statistics.component.ts b/frontend/src/app/views/tournament-statistics/tournament-statistics.component.ts index db8d85c71..245d37eba 100644 --- a/frontend/src/app/views/tournament-statistics/tournament-statistics.component.ts +++ b/frontend/src/app/views/tournament-statistics/tournament-statistics.component.ts @@ -269,8 +269,8 @@ export class TournamentStatisticsComponent extends RbacBasedComponent implements if (tournamentStatistics.tournamentFightStatistics?.fightsFinishedAt && tournamentStatistics.tournamentFightStatistics?.fightsStartedAt && tournamentStatistics.tournamentFightStatistics?.fightsFinishedAt && tournamentStatistics.tournamentFightStatistics?.fightsStartedAt) { //Time in minutes. - times = [this.getLabel(tournamentStatistics.tournamentName), truncate((new Date(tournamentStatistics.tournamentFightStatistics.fightsFinishedAt).getTime() - - new Date(tournamentStatistics.tournamentFightStatistics.fightsStartedAt).getTime()) / (1000 * 60), 2)]; + times = [this.getLabel(tournamentStatistics.tournamentName), Math.max(0, truncate((new Date(tournamentStatistics.tournamentFightStatistics.fightsFinishedAt).getTime() - + new Date(tournamentStatistics.tournamentFightStatistics.fightsStartedAt).getTime()) / (1000 * 60), 2))]; } else { times = [this.getLabel(tournamentStatistics.tournamentName), 0]; } @@ -303,8 +303,8 @@ export class TournamentStatisticsComponent extends RbacBasedComponent implements let times: [string, number]; if (tournamentStatistics.tournamentFinishedAt && tournamentStatistics.tournamentCreatedAt) { //Time in minutes. - times = [this.getLabel(tournamentStatistics.tournamentName), truncate((new Date(tournamentStatistics.tournamentFinishedAt).getTime() - - new Date(tournamentStatistics.tournamentCreatedAt).getTime()) / (1000 * 60), 2)]; + times = [this.getLabel(tournamentStatistics.tournamentName), Math.max(0, truncate((new Date(tournamentStatistics.tournamentFinishedAt).getTime() - + new Date(tournamentStatistics.tournamentCreatedAt).getTime()) / (1000 * 60), 2))]; } else { times = [this.getLabel(tournamentStatistics.tournamentName), 0]; }