patternfly/angular-patternfly

<div class="utilization-bar-chart-pf"  ng-class="{'data-unavailable-pf': $ctrl.chartData.dataAvailable === false}">
  <span ng-if="!$ctrl.layout || $ctrl.layout.type === 'regular'">
    <div ng-if="$ctrl.chartTitle" class="progress-description">{{$ctrl.chartTitle}}</div>
    <div class="progress progress-label-top-right" ng-if="$ctrl.chartData.dataAvailable !== false">
      <div class="progress-bar" aria-valuenow="{{$ctrl.chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100" ng-class="{'animate': animate,
           'progress-bar-success': $ctrl.isOk, 'progress-bar-danger': $ctrl.isError, 'progress-bar-warning': $ctrl.isWarn}"
           ng-style="{width:$ctrl.chartData.percentageUsed + '%'}" uib-tooltip-html="'{{$ctrl.usedTooltipMessage()}}'" >
        <span ng-if="$ctrl.chartFooter" ng-bind-html="$ctrl.chartFooter"></span>
        <span ng-if="!$ctrl.chartFooter && (!$ctrl.footerLabelFormat || $ctrl.footerLabelFormat === 'actual')"><strong>{{$ctrl.chartData.used}} of {{$ctrl.chartData.total}} {{$ctrl.units}}</strong> Used</span>
        <span ng-if="!$ctrl.chartFooter && $ctrl.footerLabelFormat === 'percent'"><strong>{{$ctrl.chartData.percentageUsed}}%</strong> Used</span>
      </div>
      <div class="progress-bar progress-bar-remaining"
           ng-style="{width:(100 - $ctrl.chartData.percentageUsed) + '%'}" uib-tooltip-html="'{{$ctrl.availableTooltipMessage()}}'">
      </div>
    </div>
  </span>
  <span ng-if="$ctrl.layout && $ctrl.layout.type === 'inline'">
    <div class="progress-container progress-description-left progress-label-right"
         ng-style="{'padding-left':$ctrl.layout.titleLabelWidth, 'padding-right':$ctrl.layout.footerLabelWidth}">
      <div ng-if="$ctrl.chartTitle" class="progress-description"  ng-style="{'max-width':$ctrl.layout.titleLabelWidth}">{{$ctrl.chartTitle}}</div>
      <div class="progress" ng-if="$ctrl.chartData.dataAvailable !== false">
        <div class="progress-bar" aria-valuenow="{{$ctrl.chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
             ng-class="{'animate': $ctrl.animate, 'progress-bar-success': $ctrl.isOk, 'progress-bar-danger': $ctrl.isError, 'progress-bar-warning': $ctrl.isWarn}"
             ng-style="{width:$ctrl.chartData.percentageUsed + '%'}" uib-tooltip-html="'{{$ctrl.usedTooltipMessage()}}'">
          <span ng-if="$ctrl.chartFooter" ng-bind-html="$ctrl.chartFooter"></span>
          <span ng-if="(!$ctrl.chartFooter) && (!$ctrl.footerLabelFormat || $ctrl.footerLabelFormat === 'actual')" ng-style="{'max-width':$ctrl.layout.footerLabelWidth}"><strong>{{$ctrl.chartData.used}} {{$ctrl.units}}</strong> Used</span>
          <span ng-if="(!$ctrl.chartFooter) && $ctrl.footerLabelFormat === 'percent'" ng-style="{'max-width':$ctrl.layout.footerLabelWidth}"><strong>{{$ctrl.chartData.percentageUsed}}%</strong> Used</span>
        </div>
        <div class="progress-bar progress-bar-remaining"
             ng-style="{width:(100 - $ctrl.chartData.percentageUsed) + '%'}" uib-tooltip-html="'{{$ctrl.availableTooltipMessage()}}'">
        </div>
      </div>
    </div>
  </span>
  <pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="45"></pf-empty-chart>
</div>