@if (edge && config) {
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title translate>{{ component.alias }}</ion-title>
      <ion-buttons slot="end">
        <ion-button routerLink="/device/{{edge.id}}/history/">
          <ion-icon name="close-outline" style="color: var(--ion-title-color);"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-toolbar color="primary">
      <ion-buttons class="ion-justify-content-center">
        <pickdate></pickdate>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card-content>
      <chpsocchart [componentId]="component.id" [period]="service.historyPeriod.value">
      </chpsocchart>
    </ion-card-content>
  </ion-content>
}