Merge branch 'master-local' into master-dist

Author: patternfly-build

dist/angular-patternfly.js

@@ -3726,12 +3726,14 @@ angular.module('patternfly.card').component('pfCard', {
     onThresholdChange: '&'
   },
   templateUrl: 'charts/donut/donut-pct-chart.html',
-  controller: ["pfUtils", "$element", "$timeout", function (pfUtils, $element, $timeout) {
+  controller: ["pfUtils", "$scope", function (pfUtils, $scope) {
     'use strict';
     var ctrl = this, prevData;
+    ctrl.$id = $scope.$id;
 
     ctrl.$onInit = function () {
-      ctrl.donutChartId = 'donutPctChart';
+      ctrl.donutChartId = 'donutPctChart' + ctrl.$id;
+
       if (ctrl.config.chartId) {
         ctrl.donutChartId = ctrl.config.chartId + ctrl.donutChartId;
       }
@@ -3743,6 +3745,10 @@ angular.module('patternfly.card').component('pfCard', {
       ctrl.data.available = ctrl.data.total - ctrl.data.used;
     };
 
+    ctrl.updatePercentage = function () {
+      ctrl.data.percent = Math.round(ctrl.data.used / ctrl.data.total * 100.0);
+    };
+
     ctrl.getStatusColor = function (used, thresholds) {
       var threshold = "none";
       var color = pfUtils.colorPalette.blue;
@@ -3846,6 +3852,7 @@ angular.module('patternfly.card').component('pfCard', {
 
       ctrl.config = pfUtils.merge(patternfly.c3ChartDefaults().getDefaultDonutConfig(), ctrl.config);
       ctrl.updateAvailable();
+      ctrl.updatePercentage();
       ctrl.config.data = pfUtils.merge(ctrl.config.data, ctrl.getDonutData());
       ctrl.config.color = ctrl.statusDonutColor(ctrl);
       ctrl.config.tooltip = ctrl.donutTooltip();
@@ -4022,11 +4029,21 @@ angular.module('patternfly.card').component('pfCard', {
  * <li>.tooltipFn(d)   - user defined function to customize the tool tip (optional)
  * <li>.centerLabelFn  - user defined function to customize the text of the center label (optional)
  * <li>.onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.
+ * <li>.labelConfig    - object containing properties for external label (optional) - default: undefined
+ *   <ul>
+ *       <li>.orientation - string with possible values: 'left', 'right' (optional) - default: 'center'
+ *       <li>.title       - string representing a prefix or title (optional) - default: empty string
+ *       <li>.label       - the wording format to display, possible values: 'used', 'available', 'percent', 'none' (optional) - default: 'used'
+ *       <li>.units       - unit label for values, ex: 'MHz','GB', etc.. (optional) - default: empty string
+ *       <li>.labelFn     - function to customize the text of the external label. This callback returns no data. Updated display data can be accessed through the passed and updated parameter 'data'. (optional) - default: undefined
+ *   </ul>
+ * </li>
  * </ul>
  *
  * @param {object} data the Total and Used values for the donut chart.  Available is calculated as Total - Used.<br/>
  * <ul style='list-style-type: none'>
  * <li>.used          - number representing the amount used
+ * <li>.percent       - number representing the percentage used
  * <li>.total         - number representing the total amount
  * <li>.dataAvailable - Flag if there is data available - default: true
  * </ul>
@@ -4058,19 +4075,23 @@ angular.module('patternfly.card').component('pfCard', {
          <div class="row">
            <div class="col-md-3 text-center">
              <label>Error Threshold</label>
-             <pf-donut-pct-chart config="configErr" data="dataErr" chart="chartErr"></pf-donut-pct-chart>
+             <p class="text-right">
+               <pf-donut-pct-chart config="configErr" data="dataErr" chart="chartErr"></pf-donut-pct-chart>
+             </p>
            </div>
-           <div class="col-md-3 text-center"">
+           <div class="col-md-3 text-center">
              <label>Warning Threshold</label>
              <pf-donut-pct-chart config="configWarn" data="dataWarn"></pf-donut-pct-chart>
            </div>
-           <div class="col-md-3 text-center"">
+           <div class="col-md-3 text-center">
              <label class="camelcase">{{threshLabel}} Threshold</label>
-             <pf-donut-pct-chart config="configDynamic" data="dataDynamic" center-label="labelDynamic"
-                                 on-threshold-change="thresholdChanged(threshold)">
-             </pf-donut-pct-chart>
+             <p class="text-left">
+               <pf-donut-pct-chart config="configDynamic" data="dataDynamic" center-label="labelDynamic"
+                                   on-threshold-change="thresholdChanged(threshold)">
+               </pf-donut-pct-chart>
+             </p>
            </div>
-           <div class="col-md-3 text-center"">
+           <div class="col-md-3 text-center">
              <label>No Threshold</label>
              <pf-donut-pct-chart config="configNoThresh" data="dataNoThresh"></pf-donut-pct-chart>
            </div>
@@ -4084,20 +4105,45 @@ angular.module('patternfly.card').component('pfCard', {
 
          <div class="row">
            <div class="col-md-3 text-center">
-             <pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></pf-donut-pct-chart>
              <label>center-label = 'used'</label>
+             <pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></pf-donut-pct-chart>
            </div>
            <div class="col-md-3 text-center">
-             <pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></pf-donut-pct-chart>
              <label>center-label = 'available'</label>
+             <pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></pf-donut-pct-chart>
            </div>
            <div class="col-md-3 text-center">
-             <pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
              <label>center-label = 'percent'</label>
+             <pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
            </div>
            <div class="col-md-3 text-center">
+             <label>center-label = 'none'</label>
              <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
-             <label>center-label = ' none'</label>
+           </div>
+         </div>
+
+         <div class="row">
+           <div class="col-md-12">
+             <hr>
+           </div>
+         </div>
+
+         <div class="row">
+           <div class="col-md-4 text-center">
+             <label>Sized with orientation left 'configLabel'</label>
+             <p class="text-right">
+               <pf-donut-pct-chart config="configOrientationLeft" data="dataOrientationLeft"></pf-donut-pct-chart>
+             </p>
+           </div>
+           <div class="col-md-4 text-center">
+             <label>Sized with 'configLabel'</label>
+             <pf-donut-pct-chart config="configOrientationCenter" data="dataOrientationCenter"></pf-donut-pct-chart>
+           </div>
+           <div class="col-md-4 text-center">
+             <label>Sized with orientation right 'configLabel'</label>
+             <p class="text-left">
+               <pf-donut-pct-chart config="configOrientationRight" data="dataOrientationRight"></pf-donut-pct-chart>
+             </p>
            </div>
          </div>
 
@@ -4116,7 +4162,7 @@ angular.module('patternfly.card').component('pfCard', {
          </div>
          <div class="row">
            <div class="col-md-3">
-             <form role="form"">
+             <form role="form">
                <div class="form-group">
                  <label class="checkbox-inline">
                    <input type="checkbox" ng-model="custData.dataAvailable">Data Available</input>
@@ -4140,6 +4186,7 @@ angular.module('patternfly.card').component('pfCard', {
 
    <file name="script.js">
      angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope, $interval ) {
+       // start demo 1st row
        $scope.configErr = {
          'chartId': 'chartErr',
          'units': 'GB',
@@ -4196,14 +4243,15 @@ angular.module('patternfly.card').component('pfCard', {
 
        $scope.configNoThresh = {
          'chartId': 'chartNoThresh',
-         'units': 'GB',
+         'units': 'GB'
        };
 
        $scope.dataNoThresh = {
          'used': '750',
          'total': '1000'
        };
 
+       //start demo 2nd row
        $scope.usedConfig = {
          'chartId': 'usedChart',
          'units': 'GB',
@@ -4256,6 +4304,76 @@ angular.module('patternfly.card').component('pfCard', {
 
        $scope.noLabel = "none";
 
+       //start demo 3rd row
+       $scope.configOrientationLeft = {
+         'units': 'GB',
+         'thresholds':{'warning':'60','error':'90'},
+         'labelConfig': {
+           'orientation': 'left',
+           'labelFn': function () {
+             return "<strong>Lorem ipsum</strong><br/>" + $scope.dataOrientationLeft.used + " GB used";
+           }
+         },
+         'size': {
+           'height': 85,
+           'width': 85
+         },
+         'centerLabelFn': function () {
+           return $scope.dataOrientationLeft.used + "GB";
+         }
+       };
+
+       $scope.dataOrientationLeft = {
+         'used': '350',
+         'total': '1000'
+       };
+
+       $scope.configOrientationCenter = {
+         'units': 'GB',
+         'thresholds':{'warning':'60','error':'90'},
+         'labelConfig': {
+           'label': 'available',
+           'units': 'GB',
+           'title': 'Lorem ipsum,'
+         },
+         'size': {
+           'height': 115,
+           'width': 115
+         },
+         'centerLabelFn': function () {
+           return $scope.dataOrientationCenter.used + "GB";
+         }
+       };
+
+       $scope.dataOrientationCenter = {
+          'used': '350',
+          'total': '1000'
+        };
+
+       $scope.configOrientationRight = {
+         'units': 'GB',
+         'thresholds':{'warning':'60','error':'90'},
+         'labelConfig': {
+           'orientation': 'right',
+           'labelFn': function () {
+             return "<strong>Lorem ipsum</strong><br/>" + $scope.dataOrientationRight.percent + "% used";
+           }
+         },
+         'size': {
+           'height': 85,
+           'width': 85
+         },
+         'centerLabelFn': function () {
+           return $scope.dataOrientationRight.percent + "%";
+         }
+       };
+
+       $scope.dataOrientationRight = {
+         'used': '350',
+         'total': '1000'
+       };
+
+       //start demo 4th row
        $scope.custConfig = {
          'chartId': 'custChart',
          'units': 'MHz',
@@ -4285,6 +4403,7 @@ angular.module('patternfly.card').component('pfCard', {
    </file>
  </example>
  */
+
 ;/**
  *
  * @description
@@ -17875,7 +17994,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
 
 
   $templateCache.put('charts/donut/donut-pct-chart.html',
-    "<span><pf-c3-chart ng-if=\"$ctrl.data.dataAvailable !== false\" id={{$ctrl.donutChartId}} config=$ctrl.config get-chart-callback=$ctrl.setChart></pf-c3-chart><pf-empty-chart ng-if=\"$ctrl.data.dataAvailable === false\" chart-height=$ctrl.chartHeight></pf-empty-chart></span>"
+    "<span class=pct-donut-chart-pf><span ng-class=\"{'pct-donut-chart-pf-left': $ctrl.config.labelConfig.orientation === 'left', 'pct-donut-chart-pf-right': $ctrl.config.labelConfig.orientation === 'right'}\"><span class=pct-donut-chart-pf-chart><pf-c3-chart ng-if=\"$ctrl.data.dataAvailable !== false\" id={{$ctrl.donutChartId}} config=$ctrl.config get-chart-callback=$ctrl.setChart></pf-c3-chart><pf-empty-chart ng-if=\"$ctrl.data.dataAvailable === false\" chart-height=$ctrl.chartHeight></pf-empty-chart></span> <span ng-if=\"$ctrl.data.dataAvailable !== false && $ctrl.config.labelConfig && !$ctrl.config.labelConfig.labelFn()\" class=pct-donut-chart-pf-label>{{$ctrl.config.labelConfig.title}} <span ng-if=$ctrl.data ng-switch=$ctrl.config.labelConfig.label><span ng-switch-when=none></span> <span ng-switch-when=available>{{$ctrl.data.available}} {{$ctrl.config.labelConfig.units}} available</span> <span ng-switch-when=percent>{{$ctrl.data.percent}}&#37; used</span> <span ng-switch-default=\"\">{{$ctrl.data.used}} {{$ctrl.config.labelConfig.units}} of {{$ctrl.data.total}} {{$ctrl.config.labelConfig.units}} used</span></span></span> <span ng-if=\"$ctrl.data.dataAvailable !== false && $ctrl.config.labelConfig && $ctrl.config.labelConfig.labelFn()\" class=pct-donut-chart-pf-label ng-bind-html=$ctrl.config.labelConfig.labelFn()></span></span></span>"
   );