<div fxLayout="column" fxFlexFill>
    <div class="chart-container" fxFlex>
        <plotly-plot *ngIf="plotData.length != 0;else noPlot" fxFlexFill divId='info-plot'
            [data]="plotData" [layout]="plotLayout" [config]="plotlyConfig"
            [useResizeHandler]="useResizeHandler" [style]="plotStyle"
            [updateOnlyWithRevision]=true [revision]="revision">
        </plotly-plot>
    </div>

    <div class='plot-tools' fxFlex="4.1em">
        <span>Value: </span>
        <mat-form-field>
            <mat-select [(value)]="value" disableRipple (selectionChange)="refreshGraph($event)">
                <mat-option *ngFor="let val of source.modelInfo.values" [value]="val.name">{{ val.title || val.name }}</mat-option>
            </mat-select>
        </mat-form-field>

        <span> </span>

        <span>Resample: </span>
        <mat-form-field>
            <mat-select [(value)]="resampling" disableRipple (selectionChange)="refreshGraph($event)">
                <mat-option value="0" default>No resampling</mat-option>
                <mat-option value="H">Hourly</mat-option>
                <mat-option value="D">Daily</mat-option>
                <mat-option value="W">Weekly</mat-option>
                <mat-option value="M">Monthly</mat-option>
                <mat-option value="A">Yearly</mat-option>
            </mat-select>
        </mat-form-field>

        <button mat-icon-button (click)="download()" matTooltip="Download as CSV">
            <mat-icon>save</mat-icon>
        </button>
        <mat-slide-toggle
            (change)='adjustYRange()'
            matTooltip='Extend vertical scale of the plot to visualize all the elements'
        >
            Extended range
        </mat-slide-toggle>

        <span>{{ comment }}</span>
    </div>
</div>

<ng-template #noPlot>
    <div class="noData">No data to plot</div>
</ng-template>