<mat-card>
    <mat-card-header>
        <mat-card-title>{{ title }}</mat-card-title>
        <mat-card-subtitle>{{ subtitle }}</mat-card-subtitle>
        <span class="flex-spacer"></span>
        <button mat-icon-button [matMenuTriggerFor]="menuDropzoneBar" aria-label="Menu Dropzone Bar">
            <mat-icon fontIcon="more_vert"></mat-icon>
        </button>
        <mat-menu #menuDropzoneBar="matMenu">
            <button mat-menu-item *ngFor="let menuitem of menuItems.getMenuPanel()">
                <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                <span>{{ menuitem.name }}</span>
            </button>
        </mat-menu>
    </mat-card-header>
    <hr>
    <mat-card-content>
        <div *ngIf="displayCharts" class="barchart position-relative w-100 my-1">
            <x-chartist [configuration]="barChartDropZones"></x-chartist>
        </div>
    </mat-card-content>
    <hr class="mb-0">
    <mat-accordion>
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>Historique annuel</mat-panel-title>
            </mat-expansion-panel-header>
            <huapp-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColor"></huapp-history-table>
        </mat-expansion-panel>
    </mat-accordion>
</mat-card>
