384 some statistics charts are shown too small on mobile

README.md

@@ -8,7 +8,7 @@
 [![GitHub commit activity](https://img.shields.io/github/commit-activity/y/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![GitHub last commit](https://img.shields.io/github/last-commit/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![CircleCI](https://circleci.com/gh/softwaremagico/KendoTournamentManager.svg?style=shield)](https://circleci.com/gh/softwaremagico/KendoTournamentManager)
-[![Time](https://img.shields.io/badge/development-599h-blueviolet.svg)]()
+[![Time](https://img.shields.io/badge/development-599.5h-blueviolet.svg)]()
 
 [![Powered by](https://img.shields.io/badge/powered%20by%20java-orange.svg?logo=OpenJDK&logoColor=white)]()
 [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=kendo-tournament-backend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=kendo-tournament-backend)

frontend/package.json

@@ -26,7 +26,7 @@
     "apexcharts": "^3.37.1",
     "dom-to-image": "^2.6.0",
     "jspdf": "^2.5.1",
-    "ng-apexcharts": "^1.7.4",
+    "ng-apexcharts": "^1.8.0",
     "ngx-cookie-service": "^15.0.0",
     "ngx-webcam": "^0.4.1",
     "rxjs": "~7.4.0",

frontend/src/app/components/charts/bar-chart/bar-chart.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="chartOptions" class="frame">
-  <div class="box shadow">
+  <div class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [colors]="chartOptions.colors"
                [dataLabels]="chartOptions.labels"

frontend/src/app/components/charts/bar-chart/bar-chart.component.ts

@@ -52,7 +52,9 @@ export class BarChartComponent extends CustomChartComponent {
   @Input()
   public width: number = 500;
   @Input()
-  public showToolbar: boolean = true;
+  public height: number | undefined = undefined;
+  @Input()
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -89,7 +91,7 @@ export class BarChartComponent extends CustomChartComponent {
   protected setProperties(): void {
     this.chartOptions = {
       colors: this.colors,
-      chart: this.getChart('bar', this.width, this.shadow, this.showToolbar),
+      chart: this.getChart('bar', this.width, this.height, this.shadow, this.showToolbar),
       series: this.data.getData(),
       labels: this.getLabels(this.showValuesLabels),
       fill: this.getFill(this.fill),

frontend/src/app/components/charts/custom-chart-component.ts

@@ -80,7 +80,7 @@ export abstract class CustomChartComponent implements OnInit {
   }
 
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.darkModeService.darkModeSwitched.subscribe((switched: boolean): void => {
       this.darkMode = switched;
       this.setFontColors(switched);
@@ -99,9 +99,10 @@ export abstract class CustomChartComponent implements OnInit {
 
   protected abstract setProperties(): void;
 
-  protected getChart(type: ChartType, width: number, shadow: boolean, showToolbar: boolean): ApexChart {
+  protected getChart(type: ChartType, width: number, height: number | undefined, shadow: boolean, showToolbar: boolean): ApexChart {
     return {
       width: width,
+      //height: height,
       type: type,
       dropShadow: this.getShadow(shadow),
       toolbar: this.getToolbar(showToolbar),

frontend/src/app/components/charts/gauge-chart/gauge-chart.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="chartOptions" class="frame">
-  <div [ngStyle]="{'height': [height]+'px'}" class="box shadow">
+  <div [ngStyle]="{'height': [height]+'px'}" class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [colors]="chartOptions.colors"
                [fill]="chartOptions.fill"

frontend/src/app/components/charts/gauge-chart/gauge-chart.component.ts

@@ -36,9 +36,9 @@ export class GaugeChartComponent extends CustomChartComponent {
   @Input()
   public width: number = 500;
   @Input()
-  public height: number = 200;
+  public height: number | undefined = undefined;
   @Input()
-  public showToolbar: boolean = true;
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -65,7 +65,7 @@ export class GaugeChartComponent extends CustomChartComponent {
   protected setProperties(): void {
     this.chartOptions = {
       colors: this.colors,
-      chart: this.getChart('radialBar', this.width, this.shadow, this.showToolbar),
+      chart: this.getChart('radialBar', this.width, this.height, this.shadow, this.showToolbar),
       series: this.data?.getValues(),
       labels: this.data?.getLabels(),
       fill: this.getFill(this.fill, this.opacity),

frontend/src/app/components/charts/line-chart/line-chart.component.html

@@ -1,5 +1,5 @@
 <div class="frame">
-  <div class="box shadow">
+  <div class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [colors]="chartOptions.colors"
                [dataLabels]="chartOptions.labels"

frontend/src/app/components/charts/line-chart/line-chart.component.ts

@@ -58,11 +58,11 @@ export class LineChartComponent extends CustomChartComponent {
   @Input()
   public data: LineChartData;
   @Input()
-  public height: number = 250;
+  public height: number | undefined = undefined;
   @Input()
   public width: number = 500;
   @Input()
-  public showToolbar: boolean = true;
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -103,7 +103,7 @@ export class LineChartComponent extends CustomChartComponent {
     this.chartOptions = {
       colors: this.colors,
       series: this.data.getData(),
-      chart: this.getChart('line', this.width, this.shadow, this.showToolbar),
+      chart: this.getChart('line', this.width, this.height, this.shadow, this.showToolbar),
       labels: this.getLabels(this.showValuesLabels),
       fill: this.getFill(this.fill),
       plotOptions: this.getPlotOptions(),

frontend/src/app/components/charts/pie-chart/pie-chart.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="chartOptions" class="frame">
-  <div class="box shadow">
+  <div class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [colors]="chartOptions.colors"
                [fill]="chartOptions.fill"

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,
+  ApexFill, ApexGrid,
   ApexLegend,
   ApexNonAxisChartSeries,
   ApexResponsive,
@@ -48,7 +48,9 @@ export class PieChartComponent extends CustomChartComponent {
   @Input()
   public width: number = 500;
   @Input()
-  public showToolbar: boolean = true;
+  public height: number | undefined = undefined;
+  @Input()
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -71,7 +73,7 @@ export class PieChartComponent extends CustomChartComponent {
   protected setProperties(): void {
     this.chartOptions = {
       colors: this.colors,
-      chart: this.getChart(this.isDonut ? "donut" : "pie", this.width, this.shadow, this.showToolbar),
+      chart: this.getChart(this.isDonut ? "donut" : "pie", this.width, this.height, this.shadow, this.showToolbar),
       series: this.data.getValues(),
       labels: this.data.getLabels(),
       fill: this.getFill(this.fill),

frontend/src/app/components/charts/radar-chart/radar-chart.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="chartOptions" class="frame">
-  <div class="box shadow">
+  <div class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [dataLabels]="chartOptions.labels"
                [fill]="chartOptions.fill"

frontend/src/app/components/charts/radar-chart/radar-chart.component.ts

@@ -53,9 +53,11 @@ export class RadarChartComponent extends CustomChartComponent {
   @Input()
   public width: number = 600;
   @Input()
+  public height: number | undefined = undefined;
+  @Input()
   public radarSize: number = 140;
   @Input()
-  public showToolbar: boolean = true;
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -85,7 +87,7 @@ export class RadarChartComponent extends CustomChartComponent {
 
   protected setProperties(): void {
     this.chartOptions = {
-      chart: this.getChart('radar', this.width, this.shadow, this.showToolbar),
+      chart: this.getChart('radar', this.width, this.height, this.shadow, this.showToolbar),
       series: this.setColors(this.data.getData()),
       labels: this.getLabels(this.showValuesLabels),
       fill: this.getFill(this.fill, this.opacity),

frontend/src/app/components/charts/radial-chart/radial-chart.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="chartOptions" class="frame">
-  <div class="box shadow">
+  <div class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [colors]="chartOptions.colors"
                [fill]="chartOptions.fill"

frontend/src/app/components/charts/radial-chart/radial-chart.component.ts

@@ -46,7 +46,9 @@ export class RadialChartComponent extends CustomChartComponent {
   @Input()
   public width: number = 500;
   @Input()
-  public showToolbar: boolean = true;
+  public height: number | undefined = undefined;
+  @Input()
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -74,7 +76,7 @@ export class RadialChartComponent extends CustomChartComponent {
   protected setProperties(): void {
     this.chartOptions = {
       colors: this.colors,
-      chart: this.getChart('radialBar', this.width, this.shadow, this.showToolbar),
+      chart: this.getChart('radialBar', this.width, this.height, this.shadow, this.showToolbar),
       series: this.data.getValues(),
       labels: this.data.getLabels(),
       fill: this.getFill(this.fill),

frontend/src/app/components/charts/stacked-bars-chart/stacked-bars-chart.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="chartOptions" class="frame">
-  <div class="box shadow">
+  <div class="box">
     <apx-chart #chart [chart]="chartOptions.chart"
                [dataLabels]="chartOptions.labels"
                [fill]="chartOptions.fill"

frontend/src/app/components/charts/stacked-bars-chart/stacked-bars-chart.component.ts

@@ -55,7 +55,9 @@ export class StackedBarsChartComponent extends CustomChartComponent {
   @Input()
   public width: number = 500;
   @Input()
-  public showToolbar: boolean = true;
+  public height: number | undefined = undefined;
+  @Input()
+  public showToolbar: boolean = false;
   @Input()
   public colors: string[] = Colors.defaultPalette;
   @Input()
@@ -97,7 +99,7 @@ export class StackedBarsChartComponent extends CustomChartComponent {
 
   protected setProperties(): void {
     this.chartOptions = {
-      chart: this.getChart('bar', this.width, this.shadow, this.showToolbar),
+      chart: this.getChart('bar', this.width, this.height, this.shadow, this.showToolbar),
       series: this.setColors(this.data.getData()),
       labels: this.getLabels(this.showValuesLabels),
       fill: this.getFill(this.fill),

frontend/src/app/views/participant-statistics/participant-statistics.component.html

@@ -16,7 +16,7 @@ <h1 class="name" *ngIf="participant">{{participant.name}} {{participant.lastname
     <div class="statistics-container">
       <div class="dashboard">
 
-        <div class="box-statistics box shadow">
+        <div class="box-statistics box ">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="card"></mat-icon>
             <h3>{{'roles' | translate}}</h3>
@@ -44,7 +44,7 @@ <h3>{{'tournaments' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow">
+        <div class="box-statistics box ">
           <div class="statistics-table-title">
             <mat-icon>timer</mat-icon>
             <h3>{{'time' | translate}}</h3>
@@ -87,7 +87,7 @@ <h3>{{'duels' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow">
+        <div class="box-statistics box ">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="match"></mat-icon>
             <h3>{{'hits' | translate}}</h3>
@@ -131,7 +131,7 @@ <h3>{{'faults' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow">
+        <div class="box-statistics box ">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon flip" svgIcon="match"></mat-icon>
             <h3>{{'receivedHits' | translate}}</h3>
@@ -175,7 +175,7 @@ <h3>{{'receivedFaults' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow scrollable">
+        <div class="box-statistics box  scrollable">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="competitors-classification"></mat-icon>
             <h3>{{'competitorsRanking' | translate}}</h3>
@@ -202,7 +202,7 @@ <h3>{{'competitorsRanking' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow scrollable">
+        <div class="box-statistics box  scrollable">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="gauge"></mat-icon>
             <h3>{{'performance' | translate}}</h3>
@@ -219,7 +219,7 @@ <h3>{{'performance' | translate}}</h3>
                        [title]="'participantReceivedHitsStatistics' | translate"
                        [width]="360"></app-pie-chart>
 
-        <div class="box-statistics box shadow achievements-box">
+        <div class="box-statistics box  achievements-box">
           <div class="statistics-table-title">
             <mat-icon>stars</mat-icon>
             <h3>{{'achievements' | translate}}</h3>

frontend/src/app/views/tournament-statistics/tournament-statistics.component.html

@@ -16,7 +16,7 @@ <h1 class="name" *ngIf="tournament">{{tournament.name}}</h1>
     <div class="statistics-container">
       <div class="dashboard">
 
-        <div class="box-statistics box shadow">
+        <div class="box-statistics box">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="card"></mat-icon>
             <h3>{{'participants' | translate}}</h3>
@@ -44,7 +44,7 @@ <h3>{{'teams' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow">
+        <div class="box-statistics box">
           <div class="statistics-table-title">
             <mat-icon>timer</mat-icon>
             <h3>{{'time' | translate}}</h3>
@@ -89,7 +89,7 @@ <h3>{{'faults' | translate}}</h3>
         </div>
 
         <div *ngIf="tournamentStatistics && tournamentStatistics.teamSize>1"
-             class="box-statistics box shadow scrollable">
+             class="box-statistics box scrollable">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="teams-classification"></mat-icon>
             <h3>{{'teamsRanking' | translate}}</h3>
@@ -101,16 +101,18 @@ <h3>{{'teamsRanking' | translate}}</h3>
           </table>
         </div>
 
-        <div class="box-statistics box shadow scrollable">
+        <div class="box-statistics box">
           <div class="statistics-table-title">
             <mat-icon class="kendo-icon" svgIcon="competitors-classification"></mat-icon>
             <h3>{{'competitorsRanking' | translate}}</h3>
           </div>
-          <table *ngIf="competitorsScore" aria-hidden="true" class="statistics-table">
-            <tr *ngFor="let scoreOfCompetitor of competitorsScore">
-              <td class="ranking">{{getCompetitorRanking(scoreOfCompetitor)}}</td>
-            </tr>
-          </table>
+          <div class="scrollable">
+            <table *ngIf="competitorsScore" aria-hidden="true" class="statistics-table">
+              <tr *ngFor="let scoreOfCompetitor of competitorsScore">
+                <td class="ranking">{{getCompetitorRanking(scoreOfCompetitor)}}</td>
+              </tr>
+            </table>
+          </div>
         </div>
 
         <app-gauge-chart *ngIf="fightsOverData" [data]="fightsOverData" [height]="260"
@@ -133,7 +135,7 @@ <h3>{{'competitorsRanking' | translate}}</h3>
                                 [title]="('hitsByTournament' | translate)" [width]="400"></app-stacked-bars-chart>
         <app-line-chart #timeByTournamentChart [data]="timeByTournament" [title]="'timeByTournament' | translate"
                         [width]="400" [yAxisTitle]="'minutes' | translate"></app-line-chart>
-        <div class="box-statistics box shadow achievements-box">
+        <div class="box-statistics box achievements-box">
           <div class="statistics-table-title">
             <mat-icon>stars</mat-icon>
             <h3>{{'achievements' | translate}}</h3>

frontend/src/app/views/tournament-statistics/tournament-statistics.component.scss

@@ -55,7 +55,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  margin-bottom: -20px;
+  margin-bottom: -10px;
 }
 
 .statistics-table-title > h3 {