From cf4c16c2a0feede78b205dbf533b2172413087dd Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Thu, 27 Jul 2017 17:34:47 -0400
Subject: [PATCH] feat(chart): Utilization Donut Chart Component

Enhancement for utilization donut chart component
---
 src/charts/donut/donut-pct-chart-component.js |  11 +-
 src/charts/donut/donut-pct-chart.html         |  25 +++-
 src/charts/donut/examples/donut-pct-chart.js  | 138 ++++++++++++++++--
 test/charts/donut/donut-pct.spec.js           |  16 +-
 4 files changed, 170 insertions(+), 20 deletions(-)

diff --git a/src/charts/donut/donut-pct-chart-component.js b/src/charts/donut/donut-pct-chart-component.js
index a9a54eb4d..3b7aff881 100644
--- a/src/charts/donut/donut-pct-chart-component.js
+++ b/src/charts/donut/donut-pct-chart-component.js
@@ -7,12 +7,14 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
     onThresholdChange: '&'
   },
   templateUrl: 'charts/donut/donut-pct-chart.html',
-  controller: function (pfUtils, $element, $timeout) {
+  controller: 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;
       }
@@ -24,6 +26,10 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
       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;
@@ -127,6 +133,7 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
 
       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();
diff --git a/src/charts/donut/donut-pct-chart.html b/src/charts/donut/donut-pct-chart.html
index 7c1aef3f3..c3da22e02 100644
--- a/src/charts/donut/donut-pct-chart.html
+++ b/src/charts/donut/donut-pct-chart.html
@@ -1,5 +1,22 @@
-<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 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>
+
diff --git a/src/charts/donut/examples/donut-pct-chart.js b/src/charts/donut/examples/donut-pct-chart.js
index 9f0df7f84..7deb0876d 100644
--- a/src/charts/donut/examples/donut-pct-chart.js
+++ b/src/charts/donut/examples/donut-pct-chart.js
@@ -26,11 +26,21 @@
  * <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>
@@ -62,19 +72,23 @@
          <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>
@@ -88,20 +102,45 @@
 
          <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>
 
@@ -120,7 +159,7 @@
          </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>
@@ -144,6 +183,7 @@
 
    <file name="script.js">
      angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope, $interval ) {
+       // start demo 1st row
        $scope.configErr = {
          'chartId': 'chartErr',
          'units': 'GB',
@@ -200,7 +240,7 @@
 
        $scope.configNoThresh = {
          'chartId': 'chartNoThresh',
-         'units': 'GB',
+         'units': 'GB'
        };
 
        $scope.dataNoThresh = {
@@ -208,6 +248,7 @@
          'total': '1000'
        };
 
+       //start demo 2nd row
        $scope.usedConfig = {
          'chartId': 'usedChart',
          'units': 'GB',
@@ -260,6 +301,76 @@
 
        $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',
@@ -289,3 +400,4 @@
    </file>
  </example>
  */
+
diff --git a/test/charts/donut/donut-pct.spec.js b/test/charts/donut/donut-pct.spec.js
index f38489257..961aeff53 100644
--- a/test/charts/donut/donut-pct.spec.js
+++ b/test/charts/donut/donut-pct.spec.js
@@ -16,7 +16,13 @@ describe('Directive: pfDonutPctChart', function() {
   beforeEach(function() {
     $scope.config = {
       'units': 'MHz',
-      'thresholds':{'warning':'75.0','error':'90.00'}
+      'thresholds':{'warning':'75.0','error':'90.00'},
+      'labelConfig': {
+        'orientation': 'right',
+        'title': 'Lorem Ipsum',
+        'label': 'available',
+        'units': 'MHz'
+      }
     };
 
     $scope.data = {
@@ -41,6 +47,13 @@ describe('Directive: pfDonutPctChart', function() {
     element = compileDonut('<pf-donut-pct-chart config="config" data="data" center-label="cntrLabel"></pf-donut-pct-chart>');
   };
 
+  it("should have an external label", function() {
+    compileSimpleDonut();
+    expect(element.find('.pct-donut-chart-pf-right').length).toEqual(1);
+    expect(element.find('.pct-donut-chart-pf-label')[0].innerText).toContain('Lorem Ipsum');
+    expect(element.find('.pct-donut-chart-pf-label > span')[0].innerText).toContain('50 MHz available');
+  });
+
   it("should trigger error threshold", function() {
     compileSimpleDonut();
     expect(ctrl.statusDonutColor().pattern[0]).toBe('#cc0000');  //red
@@ -133,3 +146,4 @@ describe('Directive: pfDonutPctChart', function() {
   });
 
 });
+