headup_app/src/app/components/jumps/jumps.component.html

<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{title}}</h1>
            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
                Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
            </span>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2">
            <button mat-icon-button [matMenuTriggerFor]="menuJumps" aria-label="Menu sauts">
                <mat-icon fontIcon="more_vert"></mat-icon>
            </button>
            <mat-menu #menuJumps="matMenu">
                @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
                <button mat-menu-item>
                    <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                    <span>{{ menuitem.name }}</span>
                </button>
                }
            </mat-menu>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{ subtitle }}</mat-card-title>
        </mat-card-header>
        <mat-card-content class="mt-2">
            @if(displayCharts) {
            <div class="row">
                <div class="col-xxl-6 col-xs-12">
                    <app-linearea-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor"></app-linearea-chart>
                </div>
                <div class="col-xxl-6 col-xs-12">
                    <app-bars-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor" [legend]="true"></app-bars-chart>
                </div>
            </div>
            }
            <div class="row">
                <div class="col-xs-12">
                    <mat-divider class="mt-3 mb-0"></mat-divider>
                    <table class="table table-striped table-dark table-hover">
                        <thead>
                            <tr>
                                <th></th>
                                <th *ngFor='let name of seriesHeader; let i=index' class="text-end"> {{ name }} </th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor='let values of seriesRow; let i=index'>
                                <th class="{{seriesColorClass[i]}} text-end"> ● {{ seriesName[i] }} </th>
                                <td *ngFor='let value of values; let i=index' class="font-monospace text-end">
                                    <span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
                                    <ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
                                </td>
                                <th class="{{seriesColorClass[i]}} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th class="text-end">Total</th>
                                <th *ngFor='let value of seriesColTotal; let i=index' class="font-monospace text-end">
                                    <span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
                                    <ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
                                </th>
                                <th class="font-monospace text-end">{{ grandTotal }}</th>
                            </tr>
                            <tr>
                                <th class="text-end">Moyenne</th>
                                <th *ngFor='let value of seriesRowAvg; let i=index' class="font-monospace text-end">
                                    <span *ngIf="value; else elseBlock" class="pr-1">{{ value | number : '1.0-1' }}</span>
                                    <ng-template #elseBlock><span class="text-empty pr-1">{{ value | number : '1.0-1' }}</span></ng-template>
                                </th>
                                <th class="font-monospace text-end">{{ grandAvg | number : '1.0-1' }}</th>
                            </tr>
                            <tr>
                                <th class="text-end">Moyenne <small>3 dernières années</small></th>
                                <th *ngFor='let value of seriesRowAvgLastYears; let i=index' class="font-monospace text-end">
                                    <span *ngIf="value; else elseBlock" class="pr-1">{{ value | number : '1.0-1' }}</span>
                                    <ng-template #elseBlock><span class="text-empty pr-1">{{ value | number : '1.0-1' }}</span></ng-template>
                                </th>
                                <th class="font-monospace text-end">{{ grandAvgLastYears | number : '1.0-1' }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </mat-card-content>
    </mat-card>
    <mat-card class="mt-3">
        <mat-card-header>
            <mat-card-title>Types de sauts</mat-card-title>
        </mat-card-header>
        <mat-card-content class="mt-2">
            @if(displayCharts) {
            <div class="row">
                <div class="col-xs-12">
                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRowCumulated" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
                </div>
            </div>
            <mat-divider class="mt-2 mb-3"></mat-divider>
            <div class="row">
                @for (item of getCategories(); track $index) {
                    <div class="col-lg-2 col-sm-4 col-xs-6">
                        <app-circle-chart [headers]="seriesHeader" [names]="seriesName" [values]="[item.count, (lastJump.numero-item.count)]" [color]="$index" [label]="item.categorie"></app-circle-chart>
                    </div>
                }
                @for (item of getModules(); track $index) {
                    <div class="col-lg-2 col-sm-4 col-xs-6">
                        <app-circle-chart [headers]="seriesHeader" [names]="seriesName" [values]="[item.count, (lastJump.numero-item.count)]" [color]="getModuleColor($index)" [label]="item.module"></app-circle-chart>
                    </div>
                }
            </div>
            <mat-divider class="my-3"></mat-divider>
            <!--
            <div class="row">
                <div class="col-xxl-6 col-xs-12">
                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRow" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
                </div>
                <div class="col-xxl-6 col-xs-12">
                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRowCumulated" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
                </div>
            </div>
            -->
            }
        </mat-card-content>
    </mat-card>
</div>