<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]="menuCanopySize" aria-label="Menu Canopy Size">
            <mat-icon fontIcon="more_vert"></mat-icon>
        </button>
        <mat-menu #menuCanopySize="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="piechart position-relative w-100 my-1">
            <canvas baseChart class="mx-auto"
                [labels]="chartConfig.doughnutChartLabels"
                [datasets]="chartConfig.doughnutChartDatasets"
                [options]="chartConfig.doughnutChartOptions"
                [legend]="chartConfig.doughnutChartLegend"
                [type]="'doughnut'">
            </canvas>
        </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>
            <!--<div fxLayout="row wrap">
                <div fxLayout="row wrap">
                    <h4 class="{{seriesColor[i]}} m-0" *ngFor='let name of seriesName; let i=index' fxFlex.gt-lg="25" fxFlex.gt-md="50" fxFlex.gt-sm="50" fxFlex.gt-xs="25" fxFlex="100">
                        <i class="mdi mdi-checkbox-blank-circle font-10 m-r-10 "></i>{{name}} ft² : {{seriesValue[i]}}
                    </h4>
                </div>
            </div>-->
        </mat-expansion-panel>
    </mat-accordion>
</mat-card>
