hostbbq-monitoring/ng/src/app/components/server-data-chart/server-data-chart.component.html

<div class="card mb-2">
  <div class="card-header d-flex flex-row">
    <span class="flex-fill">
      <fa-icon [icon]="parent ?? type.type | faType" class="pe-2"></fa-icon>
      <span class="text-uppercase">{{ parent ?? type.type }}</span>
      <ng-container *ngIf="parent"> : {{ type.type }} </ng-container>
    </span>
    <span>
      <span class="badge bd-blue-100">{{ type.start | date: 'YYYY-MM-dd HH:mm:ss' }}</span> -
      <span class="badge bd-blue-100">{{ type.end | date: 'YYYY-MM-dd HH:mm:ss' }}</span>
    </span>
  </div>
  <div class="card-body">
    <canvas baseChart type="line" [data]="type.data" [options]="type.options"></canvas>
  </div>
</div>