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

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