33 lines
1.3 KiB
HTML
33 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>
|