Fix setting colors and legend labels. Allow not showing legend.

Changing the default color pattern and labels for a heat map did not
work correctly.
The heat map legend would not allow default color patterns or labels.
The heat map did not allow hiding the legend.

Author: jeff-phillips-18

dist/angular-patternfly.js

@@ -1147,10 +1147,22 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
     return {
       restrict: 'A',
       scope: {
-        legend: '=',
-        legendColors: '='
+        legend: '=?',
+        legendColors: '=?'
       },
       templateUrl: 'charts/heatmap/heatmap-legend.html',
+      controller: ["$scope", function ($scope) {
+        var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
+        var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
+
+        //Allow overriding of defaults
+        if (!$scope.legendColors) {
+          $scope.legendColors = heatmapColorPatternDefaults;
+        }
+        if (!$scope.legend) {
+          $scope.legend = legendLabelDefaults;
+        }
+      }],
       link: function ($scope) {
         var items = [];
         var index;
@@ -1181,15 +1193,33 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
  *
  * @param {string=} height height of the chart (no units) - default: "200"
  * @param {string=} chartTitle title of the chart
+ * @param {boolean=} showLegend flag to show the legend, defaults to true
  * @param {array=} legendLabels the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']
  * @param {array=} thresholds the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]
  * @param {array=} heatmapColorPattern the colors that correspond to the various threshold values (lowest to hightest value ex: <70& to >90%) - defaults: ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000']
  * @param {function=} clickAction function(block) function to call when a block is clicked on
  * @example
  <example module="patternfly.charts">
+   <file name="index.html">
+     <div ng-controller="ChartCtrl" class="row">
+       <div class="col-md-5">
+         <div pf-heatmap id="id" chart-title="title" data="data" show-legend="showLegends"></div>
+       </div>
+       <div class="col-md-5">
+         <div pf-heatmap id="id" chart-title="titleAlt" data="data" show-legend="showLegends" legend-labels="legendLabels" heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds" click-action="clickAction"></div>
+       </div>
+       <div class="col-md-12">
+         <form role="form">
+           <div class="form-group">
+             <label class="radio-inline">
+               <input type="checkbox" ng-model="showLegends">Show Legends</input>
+             </label>
+           </div>
+         </form>
+       </div>
+   </file>
    <file name="script.js">
      angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope) {
-       $scope.title = 'Utilization - Using Defaults';
        $scope.data = [
        {'id': 9,'value': 0.96,'tooltip': 'Node 8 : My OpenShift Provider<br\>96% : 96 Used of 100 Total<br\>4 Available'},
        {'id': 44, 'value': 0.94, 'tooltip': 'Node 19 : My Kubernetes Provider<br\>94% : 94 Used of 100 Total<br\>6 Available'},
@@ -1244,27 +1274,20 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
        {'id': 51, 'value': 0.22, 'tooltip': 'Node 26 : My Kubernetes Provider<br\>22% : 22 Used of 100 Total<br\>78 Available'},
        {'id': 14, 'value': 0.2, 'tooltip': 'Node 14 : My OpenShift Provider<br\>20% : 20 Used of 100 Total<br\>80 Available'}];
 
+       $scope.title = 'Utilization - Using Defaults';
        $scope.titleAlt = 'Utilization - Overriding Defaults';
+
        $scope.legendLabels = ['< 60%','70%', '70-80%' ,'80-90%', '> 90%'];
        $scope.thresholds = [0.6, 0.7, 0.8, 0.9];
        $scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000', '#f00'];
 
+       $scope.showLegends = true;
        var clickAction = function (block) {
           console.log(block);
        };
        $scope.clickAction = clickAction;
      });
    </file>
-   <file name="index.html">
-     <div ng-controller="ChartCtrl" class="row">
-       <div class="col-md-4">
-         <div pf-heatmap id="id" chart-title="title" data="data"></div>
-       </div>
-       <div class="col-md-4">
-         <div pf-heatmap id="id" chart-title="titleAlt" data="data" legend-labels="legendLabels" heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds" click-action="clickAction"></div>
-       </div>
-     </div>
-   </file>
  </example>
  */
 angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function ($compile) {
@@ -1275,20 +1298,37 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
       data: '=',
       height: '=',
       chartTitle: '=?',
+      showLegend: '=?',
       legendLabels: '=?',
       thresholds: '=?',
       heatmapColorPattern: '=?',
       clickAction: '=?'
     },
     templateUrl: 'charts/heatmap/heatmap.html',
-    link: function (scope, element, attrs) {
-      var thisComponent = element[0].querySelector('.pf-heatmap-svg');
-      var containerWidth, containerHeight, blockSize, numberOfRows;
+    controller: ["$scope", function ($scope) {
       var thresholdDefaults = [0.7, 0.8, 0.9];
       var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
       var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
       var heightDefault = 200;
 
+      //Allow overriding of defaults
+      if (!$scope.thresholds) {
+        $scope.thresholds = thresholdDefaults;
+      }
+      if (!$scope.heatmapColorPattern) {
+        $scope.heatmapColorPattern = heatmapColorPatternDefaults;
+      }
+      if (!$scope.legendLabels) {
+        $scope.legendLabels = legendLabelDefaults;
+      }
+      $scope.height = $scope.height || heightDefault;
+      $scope.showLegend = $scope.showLegend || ($scope.showLegend === undefined);
+      $scope.loadingDone = false;
+    }],
+    link: function (scope, element, attrs) {
+      var thisComponent = element[0].querySelector('.pf-heatmap-svg');
+      var containerWidth, containerHeight, blockSize, numberOfRows;
+
       var setSizes = function () {
         var parentContainer = element[0].querySelector('.heatmap-container');
         containerWidth = parentContainer.clientWidth;
@@ -1323,7 +1363,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
         var data = scope.data;
         var blockPadding = 1;
         var color = d3.scale.threshold().domain(scope.thresholds).range(scope.heatmapColorPattern);
-        var component = thisComponent;
         var blocks;
         var highlightBlock = function (block, active) {
           block.style('fill-opacity', active ? 1 : 0.4);
@@ -1368,15 +1407,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
         });
       };
 
-      //Allow overriding of defaults
-      scope.thresholds = angular.extend([], thresholdDefaults, scope.thresholds);
-      scope.heatmapColorPattern = angular.extend([], heatmapColorPatternDefaults, scope.heatmapColorPattern);
-      scope.legendLabels = angular.extend([], legendLabelDefaults, scope.legendLabels);
-      scope.height = scope.height || heightDefault;
-
-      //Shows loading indicator
-      scope.loadingDone = false;
-
       scope.$watch('data', function (newVal, oldVal) {
         if (typeof(newVal) !== 'undefined') {
           scope.loadingDone = true;
@@ -5228,7 +5258,7 @@ angular.module('patternfly.views').directive('pfDataToolbar', function () {
 
 
   $templateCache.put('charts/heatmap/heatmap.html',
-    "<div class=pf-heatmap-container><h3>{{chartTitle}}</h3><div class=heatmap-container style=\"height: {{height}}px\"><svg class=pf-heatmap-svg></svg></div><div ng-if=!loadingDone class=\"spinner spinner-lg loading\"></div><div pf-heatmap-legend legend=legendLabels legend-colors=heatmapColorPattern></div></div>"
+    "<div class=pf-heatmap-container><h3>{{chartTitle}}</h3><div class=heatmap-container style=\"height: {{height}}px\"><svg class=pf-heatmap-svg></svg></div><div ng-if=!loadingDone class=\"spinner spinner-lg loading\"></div><div ng-if=showLegend pf-heatmap-legend legend=legendLabels legend-colors=heatmapColorPattern></div></div>"
   );
 
 

dist/angular-patternfly.min.js

@@ -4,10 +4,22 @@ angular.module('patternfly.charts').directive('pfHeatmapLegend',
     return {
       restrict: 'A',
       scope: {
-        legend: '=',
-        legendColors: '='
+        legend: '=?',
+        legendColors: '=?'
       },
       templateUrl: 'charts/heatmap/heatmap-legend.html',
+      controller: function ($scope) {
+        var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
+        var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
+
+        //Allow overriding of defaults
+        if (!$scope.legendColors) {
+          $scope.legendColors = heatmapColorPatternDefaults;
+        }
+        if (!$scope.legend) {
+          $scope.legend = legendLabelDefaults;
+        }
+      },
       link: function ($scope) {
         var items = [];
         var index;

src/charts/heatmap/heatmap-legend.directive.js

@@ -14,15 +14,33 @@
  *
  * @param {string=} height height of the chart (no units) - default: "200"
  * @param {string=} chartTitle title of the chart
+ * @param {boolean=} showLegend flag to show the legend, defaults to true
  * @param {array=} legendLabels the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']
  * @param {array=} thresholds the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]
  * @param {array=} heatmapColorPattern the colors that correspond to the various threshold values (lowest to hightest value ex: <70& to >90%) - defaults: ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000']
  * @param {function=} clickAction function(block) function to call when a block is clicked on
  * @example
  <example module="patternfly.charts">
+   <file name="index.html">
+     <div ng-controller="ChartCtrl" class="row">
+       <div class="col-md-5">
+         <div pf-heatmap id="id" chart-title="title" data="data" show-legend="showLegends"></div>
+       </div>
+       <div class="col-md-5">
+         <div pf-heatmap id="id" chart-title="titleAlt" data="data" show-legend="showLegends" legend-labels="legendLabels" heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds" click-action="clickAction"></div>
+       </div>
+       <div class="col-md-12">
+         <form role="form">
+           <div class="form-group">
+             <label class="radio-inline">
+               <input type="checkbox" ng-model="showLegends">Show Legends</input>
+             </label>
+           </div>
+         </form>
+       </div>
+   </file>
    <file name="script.js">
      angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope) {
-       $scope.title = 'Utilization - Using Defaults';
        $scope.data = [
        {'id': 9,'value': 0.96,'tooltip': 'Node 8 : My OpenShift Provider<br\>96% : 96 Used of 100 Total<br\>4 Available'},
        {'id': 44, 'value': 0.94, 'tooltip': 'Node 19 : My Kubernetes Provider<br\>94% : 94 Used of 100 Total<br\>6 Available'},
@@ -77,27 +95,20 @@
        {'id': 51, 'value': 0.22, 'tooltip': 'Node 26 : My Kubernetes Provider<br\>22% : 22 Used of 100 Total<br\>78 Available'},
        {'id': 14, 'value': 0.2, 'tooltip': 'Node 14 : My OpenShift Provider<br\>20% : 20 Used of 100 Total<br\>80 Available'}];
 
+       $scope.title = 'Utilization - Using Defaults';
        $scope.titleAlt = 'Utilization - Overriding Defaults';
+
        $scope.legendLabels = ['< 60%','70%', '70-80%' ,'80-90%', '> 90%'];
        $scope.thresholds = [0.6, 0.7, 0.8, 0.9];
        $scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000', '#f00'];
 
+       $scope.showLegends = true;
        var clickAction = function (block) {
           console.log(block);
        };
        $scope.clickAction = clickAction;
      });
    </file>
-   <file name="index.html">
-     <div ng-controller="ChartCtrl" class="row">
-       <div class="col-md-4">
-         <div pf-heatmap id="id" chart-title="title" data="data"></div>
-       </div>
-       <div class="col-md-4">
-         <div pf-heatmap id="id" chart-title="titleAlt" data="data" legend-labels="legendLabels" heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds" click-action="clickAction"></div>
-       </div>
-     </div>
-   </file>
  </example>
  */
 angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
@@ -108,20 +119,37 @@ angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
       data: '=',
       height: '=',
       chartTitle: '=?',
+      showLegend: '=?',
       legendLabels: '=?',
       thresholds: '=?',
       heatmapColorPattern: '=?',
       clickAction: '=?'
     },
     templateUrl: 'charts/heatmap/heatmap.html',
-    link: function (scope, element, attrs) {
-      var thisComponent = element[0].querySelector('.pf-heatmap-svg');
-      var containerWidth, containerHeight, blockSize, numberOfRows;
+    controller: function ($scope) {
       var thresholdDefaults = [0.7, 0.8, 0.9];
       var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
       var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
       var heightDefault = 200;
 
+      //Allow overriding of defaults
+      if (!$scope.thresholds) {
+        $scope.thresholds = thresholdDefaults;
+      }
+      if (!$scope.heatmapColorPattern) {
+        $scope.heatmapColorPattern = heatmapColorPatternDefaults;
+      }
+      if (!$scope.legendLabels) {
+        $scope.legendLabels = legendLabelDefaults;
+      }
+      $scope.height = $scope.height || heightDefault;
+      $scope.showLegend = $scope.showLegend || ($scope.showLegend === undefined);
+      $scope.loadingDone = false;
+    },
+    link: function (scope, element, attrs) {
+      var thisComponent = element[0].querySelector('.pf-heatmap-svg');
+      var containerWidth, containerHeight, blockSize, numberOfRows;
+
       var setSizes = function () {
         var parentContainer = element[0].querySelector('.heatmap-container');
         containerWidth = parentContainer.clientWidth;
@@ -156,7 +184,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
         var data = scope.data;
         var blockPadding = 1;
         var color = d3.scale.threshold().domain(scope.thresholds).range(scope.heatmapColorPattern);
-        var component = thisComponent;
         var blocks;
         var highlightBlock = function (block, active) {
           block.style('fill-opacity', active ? 1 : 0.4);
@@ -201,15 +228,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
         });
       };
 
-      //Allow overriding of defaults
-      scope.thresholds = angular.extend([], thresholdDefaults, scope.thresholds);
-      scope.heatmapColorPattern = angular.extend([], heatmapColorPatternDefaults, scope.heatmapColorPattern);
-      scope.legendLabels = angular.extend([], legendLabelDefaults, scope.legendLabels);
-      scope.height = scope.height || heightDefault;
-
-      //Shows loading indicator
-      scope.loadingDone = false;
-
       scope.$watch('data', function (newVal, oldVal) {
         if (typeof(newVal) !== 'undefined') {
           scope.loadingDone = true;

src/charts/heatmap/heatmap.directive.js

@@ -4,5 +4,5 @@ <h3>{{chartTitle}}</h3>
     <svg class="pf-heatmap-svg"></svg>
   </div>
   <div ng-if="!loadingDone" class="spinner spinner-lg loading"></div>
-  <div pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>
+  <div ng-if="showLegend" pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>
 </div>

src/charts/heatmap/heatmap.html

@@ -18,14 +18,10 @@ describe('Directive: pfHeatmapLegend', function() {
   };
 
   beforeEach(function() {
-    $scope.legendLabels = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
-    $scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
-
-    element = compileChart('<div pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>',$scope);
   });
 
-
-  it("should set the legend text and colors", function() {
+  it("should use the default legend text and colors", function() {
+    element = compileChart('<div pf-heatmap-legend ></div>',$scope);
     expect(angular.element(element).find('li').size()).toBe(4);
 
     legendItem = angular.element(element).find('li')[0];
@@ -34,4 +30,18 @@ describe('Directive: pfHeatmapLegend', function() {
     expect(legendText.innerHTML).toBe("&gt; 90%");
   });
 
+  it("should set the legend text and colors", function() {
+    $scope.legendLabels = ['<= 70%', '> 70%'];
+    $scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A'];
+
+    element = compileChart('<div pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>',$scope);
+    expect(angular.element(element).find('li').size()).toBe(2);
+
+    legendItem = angular.element(element).find('li')[0];
+    legendText = legendItem.querySelector('.pf-legend-text');
+
+    expect(legendText.innerHTML).toBe("&gt; 70%");
+  });
+
+
 });

test/charts/heatmap/heatmap-legend.spec.js

@@ -80,4 +80,17 @@ describe('Directive: pfHeatmap', function() {
     expect(color.trim()).toBe('fill: #ce0000;');
   });
 
+  it("should show a legend by default", function() {
+    element = compileChart('<div pf-heatmap chart-title="title" data="data"></div>',$scope);
+    var legend = element.find('.pf-heatmap-legend-container');
+    expect(legend.length).toBe(1);
+  });
+
+  it("should not show a legend when set not to", function() {
+    $scope.showLegend = false;
+    element = compileChart('<div pf-heatmap chart-title="title" data="data" show-legend="showLegend"></div>',$scope);
+    var legend = element.find('.pf-heatmap-legend-container');
+    expect(legend.length).toBe(0);
+  });
+
 });