<div
  class="p-relative fit-h chart-container"
  [attr.data-cy]="
    config?.realtime ? 'c8y-charts--realtime-active' : 'c8y-charts--realtime-inactive'
  "
>
  <div
    class="fit-w fit-h"
    #chart
    echarts
    [options]="chartOption$ | async"
    (chartInit)="onChartInit($event)"
  ></div>

  <c8y-chart-alerts [alerts]="alerts"></c8y-chart-alerts>

  @if (showLoadMore) {
    <div class="chart-load-more">
      <button
        class="btn btn-primary btn-block"
        [disabled]="isFetching"
        (click)="loadMoreData()"
      >
        <i c8yIcon="restore"></i>
        {{ 'Load more' | translate }}
      </button>
    </div>
  }

  @if (
    activeDatapoints.length > 1 &&
    config?.showSlider &&
    chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW
  ) {
    <div class="e-charts--aggregated-datapoint">
      <c8y-select-aggregated-datapoint
        [value]="config?.aggregatedDatapoint || activeDatapoints[0]"
        (valueChange)="updateAggregatedSliderDatapoint.emit($event)"
        [activeDatapoints]="activeDatapoints"
      ></c8y-select-aggregated-datapoint>
    </div>
  }
</div>