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