31 lines
1.3 KiB
HTML
31 lines
1.3 KiB
HTML
<mat-card class="card">
|
|
<mat-card-header class="header">
|
|
<h3 fxFlex="100%">
|
|
<fa-icon icon="chart-line"></fa-icon>
|
|
{{ 'labels.inputs.Client Trends' | translate }}
|
|
<div>
|
|
<mat-form-field id="office" fxFlex="94%">
|
|
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
|
<mat-select [formControl]="officeId">
|
|
<mat-option *ngFor="let office of officeData" [value]="office.id">
|
|
{{ office.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</h3>
|
|
</mat-card-header>
|
|
|
|
<mat-card-content>
|
|
<!-- Structural directives like *ngIf break the canvas -->
|
|
<div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
|
|
<canvas id="client-trends-bar" width="800" height="465" class="fallback"></canvas>
|
|
</div>
|
|
<mat-button-toggle-group [formControl]="timescale" id="timescale" appearance="legacy">
|
|
<mat-button-toggle value="Day">{{ 'labels.buttons.Day' | translate }}</mat-button-toggle>
|
|
<mat-button-toggle value="Week">{{ 'labels.buttons.Week' | translate }}</mat-button-toggle>
|
|
<mat-button-toggle value="Month">{{ 'labels.buttons.Month' | translate }}</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
</mat-card-content>
|
|
</mat-card>
|