ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.html

   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
   7          i18n>
   8       <div class="d-inline-flex align-items-center gap-1">
   9         <div *ngIf="!maxValue"
  10              class="blue-box">
  11       </div>
  12         <div *ngIf="label2">{{ label }}:
  13         </div>
  14         {{ currentData || 'N/A' }} {{ currentDataUnits }}
  15         <div *ngIf="maxValue && currentData"> used of
  16           {{ maxConvertedValue }} {{ maxConvertedValueUnits }}
  17         </div>
  18       </div>
  19     </div>
  20     <div *ngIf="label2"
  21          i18n>
  22       <div class="d-inline-flex align-items-center gap-1">
  23         <div class="yellow-box"></div>
  24         <div *ngIf="label2 !== chartTitle" >{{ label2 }}: </div>
  25         <div>{{ currentData2 || 'N/A' }} {{ currentDataUnits2 }}</div>
  26       </div>
  27     </div>
  28   </div>
  29   <div class="col-9 d-flex flex-column">
  30     <div class="chart mt-3">
  31       <canvas baseChart
  32               [datasets]="chartData.dataset"
  33               [options]="options"
  34               [chartType]="'line'"
  35               [plugins]="chartAreaBorderPlugin">
  36       </canvas>
  37     </div>
  38   </div>
  39 </div>