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

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

@@ -40,3 +40,10 @@
.contentFlex {
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 }}">
<ng-template matTabContent>
<canvas
baseChart
[data]="barChartData"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[type]="barChartType"
>
</canvas>
<table mat-table [dataSource]="dsNbJumpByYearByJumpType">
<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>
<div class="chart-container">
<canvas
baseChart
[data]="barChartData"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[type]="barChartType"
>
</canvas>
</div>
</ng-template>
</mat-tab>
</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 dsNbJumpByType: MatTableDataSource<StatsByJumpTypeResp>;
public dsNbJumpByYear: MatTableDataSource<StatsByYearResp>;
public dsNbJumpByYearByJumpType: MatTableDataSource<StatsByYearResp>;
public dsJumpForLastYearByDz: MatTableDataSource<StatsByDzResp>;
public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
@@ -148,7 +147,6 @@ export class SummaryComponent implements OnInit {
case 7:
this.serviceApi.getStatsByYearByJumpType().subscribe((data) => {
data.sort((a, b) => a.label.localeCompare(b.label));
this.dsNbJumpByYearByJumpType = new MatTableDataSource(data);
let firstYear: number = Number(data[0].label);
const now = new Date();
@@ -186,27 +184,12 @@ export class SummaryComponent implements OnInit {
backgroundColor: color,
borderColor: color,
pointBackgroundColor: color,
// pointBorderColor: "#fb0000ff",
fill: false,
pointRadius: 6,
};
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 = {
labels: listOfYears,
datasets: results,
@@ -226,7 +209,7 @@ export class SummaryComponent implements OnInit {
this.barChartType = "line";
this.barChartOptions = {
responsive: true,
maintainAspectRatio: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
@@ -246,6 +229,7 @@ export class SummaryComponent implements OnInit {
},
y: {
stacked: false,
beginAtZero: true,
},
},
};