

<!-- <pre *ngIf="true">{{ this.widget?.seriesList | json }}</pre> 
<div class="card" *ngIf="widget && !loadingData">
    <pre>{{widget | json }}</pre>  -->
    
    <div class="card" >
        <h5>{{widget?.name}}</h5>
        <canvas baseChart #myChart id="myChart"
        [data] = "data"
        [options] = "options"      
		>
        </canvas>
    </div>
<!-- </div> -->
<div class="card" >
   
<!-- <pre>{{ responses | json }}</pre> 
 <pre>{{ options | json }}</pre> -->
        <div class= "div-table" *ngIf="!loadingData && updatable" >
            <div class="div-table-row" >
                <ng-container  *ngFor="let serie of series">
                    <!-- <pre>{{serie | json}}</pre> -->
                    <div class="div-table-cell" style="padding-right: 10px; width: 200px;">
                        <!-- Update serie: {{data.datasets[0].label | json}} {{serie.styles[0].color| json}} -->
                        <span>Update serie: <svg 
                            xmlns="http://www.w3.org/2000/svg" version="1.1"
                            style="position:absolute; padding-left: 10px;">
                        <rect width="30" height="15" style="fill: {{ serie.styles[0].color }}; stroke-width:3; stroke:rgb(0,0,0)" />
                        </svg>
                        </span>
                    </div>
                    <ng-container  *ngFor="let parameter of serie!.datasourceConfiguration!.parameters">
                        <div class="div-table-cell" style="padding-right: 10px;" *ngIf="parameter.type === 'any_date_choosen_by_user'">
                        {{"PARAMETERS." + parameter.name | translate}}
                        </div>
                        <div class="div-table-cell" style="padding-right: 10px;" *ngIf="parameter.type === 'any_date_choosen_by_user'">
                        <p-calendar
                            [showTime]="true"
                            placeholder="{{ 'DATASOURCE_CONFIGURATION.SELECT_A_DATE_VALUE' | translate }}"
                            (ngModelChange)="parameter!.value = $event.toJSON()"
                            [ngModel]="parameter?.value | toDate"
                        ></p-calendar>
                    
                        </div>
                        <div class="div-table-cell" style="padding-right: 10px;" *ngIf="parameter.type === 'any_interval_choosen_by_user'">
                            {{"PARAMETERS." + parameter.name | translate}}
                        </div>
                        <div class="div-table-cell" style="padding-right: 10px;" *ngIf="parameter.type === 'any_interval_choosen_by_user'">
                            <p-dropdown
                            filterBy="description"
                            optionLabel="description"
                            optionValue="value"
                            placeholder="{{ 'DATASOURCE_CONFIGURATION_PARAMETER.SELECT_AN_INTERVAL' | translate }}"
                            [options]="intervals"
                            [filter]="true"
                            [showClear]="false"
                            [(ngModel)]="parameter!.value">
                            </p-dropdown>
                        </div>
                    </ng-container>
                </ng-container>
                <div class="div-table-cell" *ngIf="updatable">
                    <button mat-menu-item iconPos="left"  pTooltip="{{ 'Update' | translate }}" 
                        (click)="updateData()"><mat-icon>update</mat-icon>
                    </button>
                </div>
            </div>
        </div>
   </div>
<div *ngIf="loadingData" style="max-width: 180px; margin: 0 auto;">
    <div class="flex">
        <div class="flex-1 flex align-items-end justify-content-center">
            <p-skeleton width="1rem" height="1rem" styleClass=""></p-skeleton>
        </div>

        <div class="flex-1 flex align-items-end justify-content-center">
            <p-skeleton width="1rem" height="2rem" styleClass="mx-3"></p-skeleton>
        </div>

        <div class="flex-1 flex align-items-end justify-content-center">
            <p-skeleton width="1rem" height="4rem" styleClass=""></p-skeleton>
        </div>

        <div class="flex-1 flex align-items-end justify-content-center">
            <p-skeleton width="1rem" height="3rem" styleClass="mx-3"></p-skeleton>
        </div>

        <div class="flex-1 flex align-items-end justify-content-center">
            <p-skeleton width="1rem" height="7rem" styleClass=""></p-skeleton>
        </div>

        <div class="flex-1 flex align-items-end justify-content-center">
            <p-skeleton width="1rem" height="8rem" styleClass="mx-3"></p-skeleton>
        </div>
    </div>
</div>


<div *ngIf="!loadingData && !data.datasets" class="p-grid">
    <div class="col-12 text-center"><i class="pi pi-exclamation-triangle"  style="font-size: 2rem"></i></div>
    <div class="col-12 text-center">{{'CHART_WIDGET.NO_DATA' | translate}}</div>
</div>
