SkydiveLogs/Front/skydivelogs-app/src/app/summary/summary.component.html

<div class="content">
    <div class="paragraph">
        <label class="left160">{{ "Summary_TotalJumps" | translate }}</label>
        <span>: {{ totalJumps }}</span>
    </div>

    <div class="paragraph">
        <label class="left160">{{ "Summary_TotalCutaways" | translate }}</label>
        <span>: {{ totalCutaways }}</span>
    </div>

    <div class="paragraph">
        <label class="left160">{{ "Summary_LastJump" | translate }}</label>
        <span>: {{ lastJump }}</span>
    </div>

    <div class="paragraph" style="margin-top: 20px">
        <label class="left160">{{ "Summary_Refresh" | translate }}</label>
        <mat-icon
            aria-hidden="false"
            aria-label="Force the refresh of the stats"
            style="cursor: pointer"
            (click)="refreshStats()"
            svgIcon="reset"
        ></mat-icon>
    </div>

    <mat-tab-group
        mat-align-tabs="left"
        animationDuration="0ms"
        (selectedIndex)="(0)"
        (selectedTabChange)="onTabChanged($event)"
    >
        <mat-tab label="{{ 'Summary_LastMonth_Title' | translate }}">
            <ng-template matTabContent>
                <div class="containerFlex">
                    <fieldset class="contentFlex">
                        <legend>
                            {{ "Summary_LastMonth_ByDz" | translate }}
                        </legend>
                        <table mat-table [dataSource]="dsJumpForLastMonthByDz">
                            <ng-container matColumnDef="label">
                                <td mat-cell *matCellDef="let element">
                                    {{ element.label }}
                                </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: displayedColumns"
                            ></tr>
                        </table>
                    </fieldset>
                    <fieldset class="contentFlex">
                        <legend>
                            {{ "Summary_LastMonth_ByJumpType" | translate }}
                        </legend>
                        <table
                            mat-table
                            [dataSource]="dsJumpForLastMonthByJumpType"
                        >
                            <ng-container matColumnDef="label">
                                <td mat-cell *matCellDef="let element">
                                    {{ element.label }}
                                </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: displayedColumns"
                            ></tr>
                        </table>
                    </fieldset>
                </div>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_LastYear_Title' | translate }}">
            <ng-template matTabContent>
                <div class="containerFlex">
                    <fieldset class="contentFlex">
                        <legend>
                            {{ "Summary_LastYear_ByDz" | translate }}
                        </legend>
                        <table mat-table [dataSource]="dsJumpForLastYearByDz">
                            <ng-container matColumnDef="label">
                                <td mat-cell *matCellDef="let element">
                                    {{ element.label }}
                                </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: displayedColumns"
                            ></tr>
                        </table>
                    </fieldset>
                    <fieldset class="contentFlex">
                        <legend>
                            {{ "Summary_LastYear_ByJumpType" | translate }}
                        </legend>
                        <table
                            mat-table
                            [dataSource]="dsJumpForLastYearByJumpType"
                        >
                            <ng-container matColumnDef="label">
                                <td mat-cell *matCellDef="let element">
                                    {{ element.label }}
                                </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: displayedColumns"
                            ></tr>
                        </table>
                    </fieldset>
                </div>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_ByDz_Title' | translate }}">
            <ng-template matTabContent>
                <table mat-table [dataSource]="dsNbJumpByDz">
                    <ng-container matColumnDef="label">
                        <td mat-cell *matCellDef="let element">
                            {{ element.label }}
                        </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: displayedColumns"
                    ></tr>
                </table>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_ByAircraft_Title' | translate }}">
            <ng-template matTabContent>
                <table mat-table [dataSource]="dsNbJumpByAircraft">
                    <ng-container matColumnDef="label">
                        <td mat-cell *matCellDef="let element">
                            {{ element.label }}
                        </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: displayedColumns"
                    ></tr>
                </table>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_ByGear_Title' | translate }}">
            <ng-template matTabContent>
                <table mat-table [dataSource]="dsNbJumpByGear">
                    <ng-container matColumnDef="label">
                        <td mat-cell *matCellDef="let element">
                            {{ element.label }}
                        </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: displayedColumns"
                    ></tr>
                </table>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_ByJumpType_Title' | translate }}">
            <ng-template matTabContent>
                <table mat-table [dataSource]="dsNbJumpByType">
                    <ng-container matColumnDef="label">
                        <td mat-cell *matCellDef="let element">
                            {{ element.label }}
                        </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: displayedColumns"
                    ></tr>
                </table>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_ByYear_Title' | translate }}">
            <ng-template matTabContent>
                <table mat-table [dataSource]="dsNbJumpByYear">
                    <ng-container matColumnDef="label">
                        <td mat-cell *matCellDef="let element">
                            {{ element.label }}
                        </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: displayedColumns"
                    ></tr>
                </table>
            </ng-template>
        </mat-tab>

        <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
            <ng-template matTabContent>
                <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>
</div>