patternfly/angular-patternfly

<span ng-switch on="$ctrl.config.layout" ng-class="{'data-unavailable-pf': $ctrl.chartData.dataAvailable === false}">
  <div ng-switch-default ng-class="{'trend-card-large-pf': $ctrl.showLargeCardLayout,'trend-card-small-pf': $ctrl.showSmallCardLayout}">

    <span class="trend-header-pf" ng-if="$ctrl.config.title">{{$ctrl.config.title}}</span>

    <span ng-if="$ctrl.showActualValue">
      <span class="trend-title-big-pf">{{$ctrl.getLatestValue()}}</span>
      <span class="trend-title-small-pf">{{$ctrl.config.units}}</span>
    </span>
    <span ng-if="$ctrl.showPercentageValue">
      <span class="trend-title-big-pf">{{$ctrl.getPercentageValue() + '%'}}</span>
      <span class="trend-title-small-pf">of {{$ctrl.chartData.total + ' ' + $ctrl.config.units}}</span>
    </span>

    <pf-sparkline-chart ng-if="$ctrl.chartData.dataAvailable !== false" config="$ctrl.config" chart-data="$ctrl.chartData" chart-height="$ctrl.getChartHeight()"
         show-x-axis="$ctrl.showXAxis" show-y-axis="$ctrl.showYAxis"></pf-sparkline-chart>
    <pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="$ctrl.getChartHeight()"></pf-empty-chart>
    <span class="trend-footer-pf" ng-if="$ctrl.config.timeFrame">{{$ctrl.config.timeFrame}}</span>
  </div>
  <div ng-switch-when="compact" class="trend-card-compact-pf">
    <div class="row trend-row">
      <div class="col-sm-2" ng-class="{'col-sm-push-10': $ctrl.config.compactLabelPosition === 'right'}">
        <div class="trend-compact-details">
          <span ng-if="$ctrl.showActualValue">
            <span class="trend-title-compact-big-pf">{{$ctrl.getLatestValue()}}</span>
            <span class="trend-title-compact-small-pf">{{$ctrl.config.units}}</span>
          </span>
          <span ng-if="$ctrl.showPercentageValue">
            <span class="trend-title-compact-big-pf">{{$ctrl.getPercentageValue() + '%'}}</span>
            <span class="trend-title-compact-small-pf">of {{$ctrl.chartData.total + ' ' + $ctrl.config.units}}</span>
          </span>
          <span class="trend-header-compact-pf" ng-if="$ctrl.config.title">{{$ctrl.config.title}}</span>
        </div>
      </div>
      <div class="col-sm-10" ng-class="{'col-sm-pull-2': $ctrl.config.compactLabelPosition === 'right'}">
        <pf-sparkline-chart ng-if="$ctrl.chartData.dataAvailable !== false" config="$ctrl.config" chart-data="$ctrl.chartData" chart-height="$ctrl.getChartHeight()"
             show-x-axis="$ctrl.showXAxis" show-y-axis="$ctrl.showYAxis"></pf-sparkline-chart>
        <pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="$ctrl.getChartHeight()"></pf-empty-chart>
      </div>
    </div>
  </div>
  <div ng-switch-when="inline" class="trend-card-inline-pf">
    <div class="row trend-row">
      <div class="col-sm-8 trend-flat-col">
        <pf-sparkline-chart ng-if="$ctrl.chartData.dataAvailable !== false" config="$ctrl.config" chart-data="$ctrl.chartData" chart-height="$ctrl.getChartHeight()"
             show-x-axis="$ctrl.showXAxis" show-y-axis="$ctrl.showYAxis"></pf-sparkline-chart>
        <pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="$ctrl.getChartHeight()"></pf-empty-chart>
      </div>
      <div class="col-sm-4 trend-flat-col">
        <div class="trend-flat-details">
          <div class="trend-flat-details-cell">
            <span class="trend-title-flat-big-pf">{{$ctrl.getPercentageValue() + '%'}}</span>
          </div>
          <div class="trend-flat-details-cell">
            <span class="trend-label-flat-strong-pf">{{$ctrl.config.trendLabel}}</span>
            <span class="trend-label-flat-pf">{{$ctrl.getLatestValue()}} of {{$ctrl.chartData.total + ' ' + $ctrl.config.units}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</span>