@if (isSmartphoneResolution) {
  @if (isInitialized) {
    <oe-flat-widget [title]="'EDGE.INDEX.ENERGYMONITOR.TITLE' | translate" [icon]="{ name: 'laptop-outline', color: 'normal', size: 'large' }" [style.height.vh]="chartHeight" class="no-all-edges-shadow">
      <oe-flat-button button (click)="exportToXlxs()" slot="end">
        <ion-icon name="download-outline"></ion-icon>
      </oe-flat-button>
      <energychart [isOnlyChart]="true"> </energychart>
    </oe-flat-widget>
  }
} @else {
  @if (isInitialized) {
    <ngx-spinner [name]="spinnerId">{{ "EDGE.HISTORY.EXPORT_LOADING" | translate }}</ngx-spinner>
    <oe-flat-widget [title]="'EDGE.INDEX.ENERGYMONITOR.TITLE' | translate" [icon]="{ name: 'laptop-outline', color: 'normal' }" [style.height.vh]="chartHeight" class="no-all-edges-shadow">
      <oe-flat-button button slot="end" class="ion-float-right" (click)="exportToXlxs()">
        <ion-icon slot="start" [name]="'download-outline'"> </ion-icon>
        {{ "GENERAL.REPORT" | translate | uppercase }}
      </oe-flat-button>
      <energychart [isOnlyChart]="true"> </energychart>
    </oe-flat-widget>
  }
}