sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Meuilleure taille du graphe

Browse Source
This commit is contained in:
sandre
2026-01-12 11:08:45 +01:00
parent 8ae8f66065
commit 29832138d5
3 changed files with 21 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Front/skydivelogs-app/src/app/summary/summary.component.css
View File

@@ -39,4 +39,11 @@
} }
.contentFlex { .contentFlex {
flex: 45%; flex: 45%;
} }
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}

36
Front/skydivelogs-app/src/app/summary/summary.component.html
View File

@@ -165,31 +165,17 @@
<mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}"> <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
<ng-template matTabContent> <ng-template matTabContent>
<canvas <div class="chart-container">
baseChart <canvas
[data]="barChartData" baseChart
[options]="barChartOptions" [data]="barChartData"
[plugins]="barChartPlugins" [options]="barChartOptions"
[legend]="barChartLegend" [plugins]="barChartPlugins"
[type]="barChartType" [legend]="barChartLegend"
> [type]="barChartType"
</canvas> >
</canvas>
<table mat-table [dataSource]="dsNbJumpByYearByJumpType"> </div>
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{ element.label }}</td>
</ng-container>
<ng-container matColumnDef="label2">
<td mat-cell *matCellDef="let element">{{ element.label2 }}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{ element.nb }}</td>
</ng-container>
<tr
mat-row
*matRowDef="let row; columns: displayedColumnsByYearByJumpType"
></tr>
</table>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>

20
Front/skydivelogs-app/src/app/summary/summary.component.ts
View File

@@ -26,7 +26,6 @@ export class SummaryComponent implements OnInit {
public dsNbJumpByGear: MatTableDataSource<StatsByGearResp>; public dsNbJumpByGear: MatTableDataSource<StatsByGearResp>;
public dsNbJumpByType: MatTableDataSource<StatsByJumpTypeResp>; public dsNbJumpByType: MatTableDataSource<StatsByJumpTypeResp>;
public dsNbJumpByYear: MatTableDataSource<StatsByYearResp>; public dsNbJumpByYear: MatTableDataSource<StatsByYearResp>;
public dsNbJumpByYearByJumpType: MatTableDataSource<StatsByYearResp>;
public dsJumpForLastYearByDz: MatTableDataSource<StatsByDzResp>; public dsJumpForLastYearByDz: MatTableDataSource<StatsByDzResp>;
public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>; public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>; public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
@@ -148,7 +147,6 @@ export class SummaryComponent implements OnInit {
case 7: case 7:
this.serviceApi.getStatsByYearByJumpType().subscribe((data) => { this.serviceApi.getStatsByYearByJumpType().subscribe((data) => {
data.sort((a, b) => a.label.localeCompare(b.label)); data.sort((a, b) => a.label.localeCompare(b.label));
this.dsNbJumpByYearByJumpType = new MatTableDataSource(data);
let firstYear: number = Number(data[0].label); let firstYear: number = Number(data[0].label);
const now = new Date(); const now = new Date();
@@ -186,27 +184,12 @@ export class SummaryComponent implements OnInit {
backgroundColor: color, backgroundColor: color,
borderColor: color, borderColor: color,
pointBackgroundColor: color, pointBackgroundColor: color,
// pointBorderColor: "#fb0000ff",
fill: false, fill: false,
pointRadius: 6, pointRadius: 6,
}; };
results.push(tmp); results.push(tmp);
}); });
// const results = Array.from(tmpResults, function (item) {
// //const color = this.jumpTypeToColor.get(item[0]);
// return {
// label: item[0],
// data: item[1],
// backgroundColor: color,
// borderColor: color,
// pointBackgroundColor: color,
// pointBorderColor: "#fb0000ff",
// fill: false,
// pointRadius: 6,
// };
// });
this.barChartData = { this.barChartData = {
labels: listOfYears, labels: listOfYears,
datasets: results, datasets: results,
@@ -226,7 +209,7 @@ export class SummaryComponent implements OnInit {
this.barChartType = "line"; this.barChartType = "line";
this.barChartOptions = { this.barChartOptions = {
responsive: true, responsive: true,
maintainAspectRatio: true, maintainAspectRatio: false,
plugins: { plugins: {
legend: { legend: {
display: true, display: true,
@@ -246,6 +229,7 @@ export class SummaryComponent implements OnInit {
}, },
y: { y: {
stacked: false, stacked: false,
beginAtZero: true,
}, },
}, },
}; };