HomeMonitor/Display/src/app/components/weather/charts/weather-charts.component.html

<!-- <div [hidden]="!loading" class="page-spinner">
    <span class="spinner"></span>
</div> -->
<div class="chart-content">
    <header class="chart-header">
        <mat-form-field>
            <mat-select [(value)]="selectedTimeSpan">
                <mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
            </mat-select>
        </mat-form-field>
        <span class="chart-button-spacer"></span>
        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)">
            <mat-icon>arrow_back</mat-icon>
        </button>
        <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
            <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" disabled [max]="maxDate">
            <mat-datepicker-toggle matSuffix [for]="picker">
                <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
            </mat-datepicker-toggle>
            <mat-datepicker #picker disabled="false"></mat-datepicker>
        </mat-form-field>
        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)">
            <mat-icon>arrow_forward</mat-icon>
        </button>
        <span class="chart-button-spacer"></span>
        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()">
            Today
        </button>
    </header>
    <div id="chart" [chart]="chart"></div>
</div>