Merge pull request #705 from TheRealJon/donut-pct-tooltip

fix(donut-pct-chart): Add tooltip attribute

Author: jeff-phillips-18

src/charts/donut/donut-pct-chart-component.js

@@ -2,6 +2,7 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
   bindings: {
     config: '<',
     data: '<',
+    tooltip: '<',
     chartHeight: '<?',
     centerLabel: '<?',
     onThresholdChange: '&'
@@ -67,19 +68,31 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
     ctrl.donutTooltip = function () {
       return {
         contents: function (d) {
-          var tooltipHtml;
-
+          // Default to percent format
+          var tooltipContent =
+            '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+              Math.round(d[0].ratio * 100) + '% ' + d[0].name +
+            '</span>';
           if (ctrl.config.tooltipFn) {
-            tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-                              ctrl.config.tooltipFn(d) +
-                         '</span>';
-          } else {
-            tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-                      Math.round(d[0].ratio * 100) + '%' + ' ' + ctrl.config.units + ' ' + d[0].name +
-                   '</span>';
+            tooltipContent =
+              '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                ctrl.config.tooltipFn(d) +
+              '</span>';
+          } else if (ctrl.tooltip === "amount") {
+            tooltipContent =
+              '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                d[0].value + ' ' + ctrl.config.units + ' ' + d[0].name +
+              '</span>';
+          } else if (ctrl.tooltip === "both") {
+            tooltipContent =
+              '<table class="c3-tooltip"><tbody><tr>' +
+                '<td>' +
+                  d[0].value + ' ' + ctrl.config.units + ' ' + d[0].name +
+                '</td><td>' +
+                  Math.round(d[0].ratio * 100) + '%' +
+              '</td></tr></tbody></table>';
           }
-
-          return tooltipHtml;
+          return tooltipContent;
         }
       };
     };

src/charts/donut/examples/donut-pct-chart.js

@@ -54,6 +54,14 @@
  * <li> 'none'      - does not display the center label
  * </ul>
  *
+ * @param {string=} tooltip specifies the value to show in the tooltip when hovering Used or Available chart segments
+ * <strong>Values:</strong>
+ * <ul style='list-style-type: none'>
+ * <li> 'percent' - displays the Used or Available percentage of the Total in the tooltop (default)
+ * <li> 'amount'  - displays the Used or Available amount and units in the tooltip
+ * <li> 'both'    - displays both the percentage and amount in the tooltip
+ * </ul>
+ *
  * @param {int=} chartHeight height of the donut chart
  * @param {function (threshold)} on-threshold-change user defined function to handle when thresolds change <br/>
  * <strong>'threshold' Values:</strong>
@@ -114,9 +122,30 @@
              <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>
+            <label>center-label = 'none'</label>
+            <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
+           </div>
+         </div>
+
+         <div class="row">
+           <div class="col-md-12">
+             <hr>
+           </div>
+         </div>
+
+         <div class="row">
+           <div class="col-md-4 text-center">
+             <label>tooltip = 'percent'</label>
              <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
            </div>
+           <div class="col-md-4 text-center">
+             <label>tooltip = 'amount'</label>
+             <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel" tooltip="tooltipAmount"></pf-donut-pct-chart>
+           </div>
+           <div class="col-md-4 text-center">
+             <label>tooltip = 'both'</label>
+             <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel" tooltip="tooltipBoth"></pf-donut-pct-chart>
+           </div>
          </div>
 
          <div class="row">
@@ -302,6 +331,10 @@
        $scope.noLabel = "none";
 
        //start demo 3rd row
+       $scope.tooltipAmount = "amount";
+       $scope.tooltipBoth = "both";
+
+       //start demo 4th row
        $scope.configOrientationLeft = {
          'units': 'GB',
          'thresholds':{'warning':'60','error':'90'},
@@ -370,7 +403,7 @@
          'total': '1000'
        };
 
-       //start demo 4th row
+       //start demo 5th row
        $scope.custConfig = {
          'chartId': 'custChart',
          'units': 'MHz',

test/charts/donut/donut-pct.spec.js

@@ -51,6 +51,10 @@ describe('Directive: pfDonutPctChart', function () {
     element = compileDonut('<pf-donut-pct-chart config="config" data="data" center-label="cntrLabel"></pf-donut-pct-chart>');
   };
 
+  var compileTooltipDonut = function () {
+    element = compileDonut('<pf-donut-pct-chart config="config" data="data" tooltip="tooltip"></pf-donut-pct-chart>');
+  };
+
   it("should have an external label", function () {
     compileSimpleDonut();
     expect(element.find('.pct-donut-chart-pf-right').length).toEqual(1);
@@ -119,7 +123,6 @@ describe('Directive: pfDonutPctChart', function () {
     expect(ctrl.getCenterLabelText().smText).toContain('Used');
   });
 
-
   it("should use center label funtion", function () {
     compileDonutCenterLabel();
 
@@ -149,5 +152,52 @@ describe('Directive: pfDonutPctChart', function () {
     expect(emptyChart.length).toBe(1);
   });
 
+  it('should have percentage in the tooltip content', function() {
+    var d = [{
+      name: "Used",
+      ratio: .35,
+      value: 350
+    }];
+    compileSimpleDonut();
+    expect(ctrl.donutTooltip().contents(d)).toContain('35% Used');
+  });
+
+  it('should have value and units in tooltip content', function() {
+    var d = [{
+      name: "Used",
+      ratio: .35,
+      value: 350
+    }];
+    compileTooltipDonut();
+    $scope.tooltip = "amount";
+    $scope.$digest();
+    expect(ctrl.donutTooltip().contents(d)).toContain('350 MHz Used');
+  });
+
+  it('should have value, units, and percentage in tooltip content', function() {
+    var d = [{
+      name: "Used",
+      ratio: .35,
+      value: 350
+    }];
+    compileTooltipDonut();
+    $scope.tooltip = "both";
+    $scope.$digest();
+    expect(ctrl.donutTooltip().contents(d)).toContain('350 MHz Used');
+    expect(ctrl.donutTooltip().contents(d)).toContain('35%');
+  });
+
+  it('should have use config.tooltipFn for tooltip content', function() {
+    var d = [{
+      name: "Used",
+      ratio: .35,
+      value: 350
+    }];
+    $scope.config.tooltipFn = function(d) {
+      return "This is the tooltip content.";
+    };
+    compileSimpleDonut();
+    expect(ctrl.donutTooltip().contents(d)).toContain('This is the tooltip content.');
+  });
 });