<c8y-breadcrumbs-set ng-if="showOverviewBreadcrumbs">
  <c8y-breadcrumbs-item
    icon="signal"
    label="{{ 'Availability' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="exchange"
    label="{{ 'Devices' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-help
  src="/docs/device-management-application/monitoring-and-controlling-devices/#availability"
></c8y-help>

<div class="card-group">
  <div
    class="availabilityPie col-md-4 col-xs-12"
    ng-repeat="intervalData in intervalsData | orderBy:'order'"
  >
    <div class="card">
      <div class="card-header">
        <div class="card-title">
          <span ng-bind="intervalData.label | translate"></span>
        </div>
      </div>
      <hr />
      <div class="card-block">
        <div class="p-relative">
          <span
            class="percentage"
            ng-class="percentageClass(intervalData.data)"
          >
            {{ percentage(intervalData.data) | number: 0 }}%
          </span>
          <nvd3-pie-chart
            id="interval{{ $index }}"
            height="500"
            data="intervalData.data"
            width="600"
            x="x()"
            y="y()"
            tooltips="true"
            tooltipcontent="tooltip()"
            color="color()"
            donut="true"
            donutRatio=".55"
          >
            <svg></svg>
          </nvd3-pie-chart>
        </div>
      </div>
    </div>
  </div>
  <div class="center-block text-center">
    <small>{{ availabilityTooltip | translate }}</small>
  </div>
</div>

<div ng-if="graphData">
  <div class="card availabilityGraph">
    <div class="card-header">
      <div
        class="card-title"
        translate
      >
        Last 30 days operability
      </div>
    </div>
    <hr />
    <div class="card-block">
      <nvd3-multi-bar-chart
        id="availabilityGraph"
        height="300"
        data="graphData"
        width="1000"
        x="xGraph()"
        y="yGraph()"
        xAxisTickFormat="xTickFormat()"
        color="colorGraph()"
        showXAxis="true"
        showYAxis="false"
        tooltips="true"
        tooltipcontent="tooltipGraph()"
      >
        <svg></svg>
      </nvd3-multi-bar-chart>
      <small>{{ operabilityTooltip | translate }}</small>
    </div>
  </div>
</div>
