Merge pull request #2 from jeff-phillips-18/amarie401-card-loading-state

Fixes for maintaining card sizing

Author: amarie401

src/card/basic/card.component.js

@@ -36,7 +36,7 @@
  <file name="index.html">
    <div ng-controller="ChartCtrl">
      <label class="label-title">Card With Multiple Utilization Bars</label>
-     <pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
+     <pf-card head-title="System Resources" show-spinner="dataLoading" show-top-border="true">
        <pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
        <pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
        <pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
@@ -45,37 +45,44 @@
    </div>
  </file>
  <file name="script.js">
- angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+ angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
+
+       $scope.dataLoading = true;
 
        $scope.title2 = 'Memory';
        $scope.units2 = 'GB';
 
-       $scope.data2 = {
-         'used': '25',
-         'total': '100'
-       };
-
        $scope.title3 = 'CPU Usage';
        $scope.units3 = 'MHz';
 
-       $scope.data3 = {
-         'used': '420',
-         'total': '500'
-       };
-
        $scope.title4 = 'Disk Usage';
        $scope.units4 = 'TB';
-       $scope.data4 = {
-         'used': '350',
-         'total': '500'
-       };
 
        $scope.title5 = 'Disk I/O';
-       $scope.units5 = 'I/Ops';
-       $scope.data5 = {
-         'used': '450',
-         'total': '500'
-       };
+         $scope.units5 = 'I/Ops';
+
+       $timeout(function () {
+         $scope.dataLoading = false;
+
+         $scope.data2 = {
+           'used': '25',
+           'total': '100'
+         };
+
+         $scope.data3 = {
+           'used': '420',
+           'total': '500'
+         };
+
+         $scope.data4 = {
+           'used': '350',
+           'total': '500'
+         };
+         $scope.data5 = {
+           'used': '450',
+           'total': '500'
+         };
+      }, 3000 );
 
        $scope.layoutInline = {
          'type': 'inline'

src/card/basic/card.html

@@ -5,9 +5,9 @@ <h2 class="card-pf-title">{{$ctrl.headTitle}}</h2>
   </div>
   <span ng-if="$ctrl.subTitle && !$ctrl.showSpinner" class="card-pf-subtitle">{{$ctrl.subTitle}}</span>
 
-  <div class="card-pf-body">
+  <div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
     <div ng-if="$ctrl.showSpinner" class="spinner spinner-lg"></div>
-    <div ng-show="!$ctrl.showSpinner" ng-transclude></div>
+    <div ng-class="{'hide-body': $ctrl.showSpinner}" ng-transclude></div>
   </div>
   <div ng-if="$ctrl.footer && !$ctrl.showSpinner" class="card-pf-footer">
     <div ng-if="$ctrl.showFilterInFooter()" ng-include="'card/basic/card-filter.html'"></div>

src/card/card.less

@@ -1,3 +1,19 @@
+.card-pf-body {
+  &.show-spinner {
+    position: relative;
+  }
+  .spinner.spinner-lg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -15px; /* -1 * image width / 2 */
+    margin-top: -35px;  /* -1 * image height / 2  - body margin */
+  }
+  .hide-body {
+    opacity: 0;
+  }
+}
+
 .card-pf-aggregate-status-alt {
   .card-pf-body {
     padding-bottom: 20px;

src/charts/utilization-bar/utilization-bar-chart.component.js

@@ -172,8 +172,16 @@ angular.module('patternfly.charts').component('pfUtilizationBarChart', {
       prevChartData = angular.copy(ctrl.chartData);
       prevLayout = angular.copy(ctrl.layout);
 
+      if (!ctrl.chartData) {
+        return;
+      }
+
       //Calculate the percentage used
-      ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
+      if (!isNaN(ctrl.chartData.used) && !isNaN(ctrl.chartData.total) && (ctrl.chartData.total > 0)) {
+        ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
+      } else {
+        ctrl.chartData.percentageUsed = 0;
+      }
 
       if (ctrl.thresholdError || ctrl.thresholdWarning) {
         ctrl.isError = (ctrl.chartData.percentageUsed >= ctrl.thresholdError);
@@ -201,11 +209,11 @@ angular.module('patternfly.charts').component('pfUtilizationBarChart', {
     };
 
     ctrl.usedTooltipMessage = function () {
-      return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : ctrl.chartData.percentageUsed + '% Used';
+      return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : _.get(ctrl.chartData, 'percentageUsed', 'N/A') + '% Used';
     };
 
     ctrl.availableTooltipMessage = function () {
-      return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - ctrl.chartData.percentageUsed) + '% Available';
+      return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - _.get(ctrl.chartData, 'percentageUsed', 0)) + '% Available';
     };
   }
 });