_utilization-trend-chart.html.haml

#div{'ng-controller' => "utilizationTrendChartController as vm"}
  .card-pf.card-pf-utilization
    .card-pf-heading
      %h2.card-pf-title
        {{vm.title}}
    .card-pf-body
      .row
        .col-xs-12.col-sm-12.col-md-12.col-lg-6.example-trend-container{"ng-repeat" => "(key, data_hash) in vm.data"}
          %pf-utilization-trend-chart{'ng-if' => "vm.loadingDone", 'ng-attr-id' => "{{data_hash.id}}" , 'config' => "data_hash.config",
            'chart-data' => "data_hash.data", 'center-label' => "vm.centerLabel",
            'donut-config' => "data_hash.donutConfig", 'sparkline-config' => "data_hash.sparklineConfig",
            'sparkline-chart-height' => "vm.custChartHeight",
            'show-sparkline-x-axis' => "vm.custShowXAxis",
            'show-sparkline-y-axis' => "vm.custShowYAxis"}
          %span.trend-footer-pf{{"ng-class" => "{ 'chart-transparent-text': data_hash.data.dataAvailable === false }"}}
            {{vm.timeframeLabel}}