From 82d06117da1e25ff31ec50d253408d3052bb6965 Mon Sep 17 00:00:00 2001
From: sandre <perso@sebastienandre.com>
Date: Mon, 12 Jan 2026 15:24:41 +0100
Subject: [PATCH] Fix sur le CSS pour la taille du graphique

---
 .../list-of-tunnel-flights.component.css      |  40 ++--
 .../list-of-tunnel-flights.component.html     | 197 +++++++++++-------
 2 files changed, 145 insertions(+), 92 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css
index 1137428..d52e6a2 100644
--- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css
@@ -1,18 +1,24 @@
 .formListTunnelFlight {
-    display: flex;
-    flex-direction: column;
-  
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
-  }
-  
-  .content {
-    min-height: 90vh;
-    display: flex;
-    justify-content: left;
-    flex-direction: column;
-    align-items: initial;
-    padding-top: 25px;
-  }
-  
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.content {
+  min-height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+  padding-top: 25px;
+}
+
+.chart-container {
+  position: relative;
+  margin: auto;
+  height: 80vh;
+  width: 80vw;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html
index e9f703e..8d54f86 100644
--- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html
@@ -1,89 +1,136 @@
 <div class="content">
-    <div>
-        <button mat-raised-button color="accent" [routerLink]="['/newTunnelFlight']" [routerLinkActive]="['active']"
-                skipLocationChange>{{ 'ListTunnelFlight_Add' | translate }}</button>
-    </div>
+  <div>
+    <button
+      mat-raised-button
+      color="accent"
+      [routerLink]="['/newTunnelFlight']"
+      [routerLinkActive]="['active']"
+      skipLocationChange
+    >
+      {{ "ListTunnelFlight_Add" | translate }}
+    </button>
+  </div>
 
-    <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
+  <mat-progress-bar
+    [mode]="'indeterminate'"
+    *ngIf="isLoading"
+  ></mat-progress-bar>
 
-    <mat-radio-group [(ngModel)]="selectedPeriod" (ngModelChange)="onPeriodChange()">
-        <mat-radio-button value="currentYear">{{ 'ListTunnelFlight_CurrentYear' | translate }}</mat-radio-button>
-        <mat-radio-button value="12Months">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button>
-        <mat-radio-button value="all">{{ 'ListTunnelFlight_AllFlights' | translate }}</mat-radio-button>
-    </mat-radio-group>
+  <mat-radio-group
+    [(ngModel)]="selectedPeriod"
+    (ngModelChange)="onPeriodChange()"
+  >
+    <mat-radio-button value="currentYear">{{
+      "ListTunnelFlight_CurrentYear" | translate
+    }}</mat-radio-button>
+    <mat-radio-button value="12Months">{{
+      "ListTunnelFlight_12Months" | translate
+    }}</mat-radio-button>
+    <mat-radio-button value="all">{{
+      "ListTunnelFlight_AllFlights" | translate
+    }}</mat-radio-button>
+  </mat-radio-group>
 
-    <mat-nav-list>
-        <mat-list-item matListItemLine *ngFor="let stat of stats">
-            <label>{{stat.id}} : {{stat.values}}</label>
-        </mat-list-item>
-    </mat-nav-list>
+  <mat-nav-list>
+    <mat-list-item matListItemLine *ngFor="let stat of stats">
+      <label>{{ stat.id }} : {{ stat.values }}</label>
+    </mat-list-item>
+  </mat-nav-list>
 
-    <div style="display: inline-block; position: relative; width: 100%;">
-        <canvas baseChart
-                [data]="barChartData" 
-                [options]="barChartOptions"
-                [plugins]="barChartPlugins" 
-                [legend]="barChartLegend" 
-                [type]="barChartType">
-        </canvas>
-    </div>
+  <div class="chart-container">
+    <canvas
+      baseChart
+      [data]="barChartData"
+      [options]="barChartOptions"
+      [plugins]="barChartPlugins"
+      [legend]="barChartLegend"
+      [type]="barChartType"
+    >
+    </canvas>
+  </div>
 
-    <div>
-        <button mat-raised-button color="accent" (click)="onLoadTable()" >{{ 'ListTunnelFlight_LoadTable' | translate }}</button>
+  <div>
+    <button mat-raised-button color="accent" (click)="onLoadTable()">
+      {{ "ListTunnelFlight_LoadTable" | translate }}
+    </button>
 
-        <table mat-table [dataSource]="dataSourceTable" *ngIf="dataSourceTable?.data.length">
-            <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef>ID</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
-                </td>
-            </ng-container>
+    <table
+      mat-table
+      [dataSource]="dataSourceTable"
+      *ngIf="dataSourceTable?.data.length"
+    >
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let element">
+          <span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="tunnel">
-                <th mat-header-cell *matHeaderCellDef>Tunnel</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.tunnel.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="tunnel">
+        <th mat-header-cell *matHeaderCellDef>Tunnel</th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.tunnel.name"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="jumpType">
-                <th mat-header-cell *matHeaderCellDef>Jump Type</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="jumpType">
+        <th mat-header-cell *matHeaderCellDef>Jump Type</th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.jumpType.name"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="nbMinutes">
-                <th mat-header-cell *matHeaderCellDef>Minutes</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.nbMinutes"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="nbMinutes">
+        <th mat-header-cell *matHeaderCellDef>Minutes</th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.nbMinutes"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="notes">
-                <th mat-header-cell *matHeaderCellDef>Notes</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.notes"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="notes">
+        <th mat-header-cell *matHeaderCellDef>Notes</th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.notes"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="flightDate">
-                <th mat-header-cell *matHeaderCellDef>Date</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="flightDate">
+        <th mat-header-cell *matHeaderCellDef>Date</th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.flightDate | date : 'yyyy-MM-dd'"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 80px;"></th>
-                <td mat-cell *matCellDef="let element" style="text-align: left;">
-                    <mat-icon aria-hidden="false" aria-label="Delete this jump" style="cursor: pointer;"
-                        (click)='delete(element)'>delete</mat-icon>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
+        <td mat-cell *matCellDef="let element" style="text-align: left">
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Delete this jump"
+            style="cursor: pointer"
+            (click)="delete(element)"
+            >delete</mat-icon
+          >
+        </td>
+      </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-    </div>
-</div>
\ No newline at end of file
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
+</div>