29 lines
1.0 KiB
HTML
29 lines
1.0 KiB
HTML
<mat-card class="card">
|
|
<mat-card-header class="header">
|
|
<h3 class="flex-100">
|
|
<fa-icon icon="money-bill"></fa-icon>
|
|
{{ 'labels.inputs.Amount Pending / Disbursed' | translate }}
|
|
<div>
|
|
<mat-form-field id="office" class="flex-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="disbursement-pie" width="800" height="600"></canvas>
|
|
</div>
|
|
<div *ngIf="showFallback" class="fallback align-center-center">
|
|
<p>{{ 'labels.text.No Data' | translate }}</p>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|