<div
  class="dashboard-old-minheight fit-h"
  ng-controller="DataPointWidgetCtrl"
  ng-init="disableLocalStorage = true"
>
  <c8y-global-context-connector
    ng-style="{ 'z-index': 11 }"
    ng-if="child.config.datapoints.length > 0 && child.config.displayMode === 'dashboard'"
    [controls]="widgetControlsPreset"
    [config]="child.config"
    [is-loading]="isLoading"
    [dashboard-child]="dashboardChild"
    [emit-refresh]="false"
    (config-change)="onConfigChange($event)"
    (refresh)="onRefresh()"
    (linked-change)="onLinkedChange($event)"
  ></c8y-global-context-connector>
  <c8y-local-controls
    ng-if="child.config.datapoints.length > 0 && (child.config.displayMode === 'config' || child.config.displayMode === 'view_and_config')"
    [controls]="widgetControlsPreset"
    [display-mode]="child.config.displayMode"
    [config]="child.config"
    [is-loading]="isLoading"
    (config-change)="onConfigChange($event)"
    (refresh)="onRefresh()"
  ></c8y-local-controls>
  <c8y-realtime-button
    ng-show="false"
    channel="{{ channel }}"
    state="child.config.realtime"
    on-data="onData($data)"
  ></c8y-realtime-button>
  <c8y-realtime-button
    ng-show="false"
    channel="{{ alarmsChannel }}"
    state="child.config.realtime"
    on-data="onAlarm($data)"
    on-data-update="onAlarm($data)"
  ></c8y-realtime-button>
  <c8y-realtime-button
    ng-show="false"
    channel="{{ eventsChannel }}"
    state="child.config.realtime"
    on-data="onEvent($data)"
  ></c8y-realtime-button>
  <c8y-aggregation
    ng-show="false"
    date-from="child.config.dateFrom"
    date-to="child.config.dateTo"
    aggregation="child.config.aggregation"
    realtime="child.config.realtime"
  ></c8y-aggregation>
  <div
    class="p-relative"
    ng-style="{ height: dataPointsGraphHeight }"
  >
    <c8y-chart
      show-icon-bar="false"
      datapoints="child.config.datapoints"
      datapoints-initial-display-limit="child.config.datapointsInitialDisplayLimit"
      date-from="child.config.dateFrom"
      date-to="child.config.dateTo"
      realtime="viewRealtime"
      aggregation="child.config.aggregation"
      show-time="false"
      on-data="(onData)"
      on-loading="onLoading($loading)"
      on-update-dates="onUpdateDates($dateFrom, $dateTo, $updateTrigger)"
      on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
      on-realtime-toggle="onRealtimeToggle()"
      on-box-changed="onBoxChanged(box)"
      selectable="child.config.selectable"
      selected="child.config.selected"
    ></c8y-chart>
  </div>
  <c8y-alarms-events-timelines-chart
    ng-if="child.config.alarmsEventsConfigs.length"
    alarms-events-configs="child.config.alarmsEventsConfigs"
    date-from="alarmsEventsTimeline.displayedDateFrom"
    date-to="alarmsEventsTimeline.displayedDateTo"
    on-update-dates="onUpdateDates($dateFrom, $dateTo)"
    realtime="child.config.realtime"
    on-realtime-alarm-fn="onRealtimeAlarmFn(onRealtimeAlarm)"
    on-realtime-event-fn="onRealtimeEventFn(onRealtimeEvent)"
    chart-box="chartBox"
    on-size-changed="onTimelinesChartSizeChanged($size)"
  ></c8y-alarms-events-timelines-chart>
</div>
