git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 <div class="row mt-2">
   2   <div class="col-3 d-flex flex-column align-self-center">
   3     <br>
   4     <b class="chartTitle pb-2"
   5        i18n>{{ chartTitle }}</b>
   6     <div *ngFor="let data of currentChartData.dataset"
   7          i18n>
   8       <div *ngIf="data.data.length !== 0"
   9            class="d-inline-flex align-items-center gap-1">
  10         <div class="box"
  11              [style.background-color]="data.pointBackgroundColor">
  12         </div>
  13         <ng-container *ngIf="!chartTitle.includes(data.label)">
  14           <span [ngClass]="{'d-inline-block text-truncate': truncateLabel}"
  15                 [ngStyle]="{'width': truncateLabel ? '10rem' : 'auto'}"
  16                 [title]="data.label">{{ data.label }}</span>:
  17         </ng-container>
  18         <span>{{ data?.currentData || 'N/A' }} {{ data?.currentDataUnits }}</span>
  19         <div *ngIf="maxValue && data.currentData">
  20           used of {{ maxConvertedValue }} {{ maxConvertedValueUnits }}
  21         </div>
  22       </div>
  23     </div>
  24   </div>
  25
  26   <div class="col-9 d-flex flex-column">
  27     <div class="chart mt-3">
  28       <canvas baseChart
  29               [datasets]="chartData.dataset"
  30               [options]="options"
  31               [type]="'line'"
  32               [plugins]="chartAreaBorderPlugin">
  33       </canvas>
  34     </div>
  35   </div>
  36 </div>