Skip to content

Commit 5ea2dcc

Browse files
dtaylor113dtaylor113
committed
Merge pull request #159 from jeff-phillips-18/master
Fix setting colors and legend labels. Allow not showing legend.
2 parents 0713a6e + 06c5da1 commit 5ea2dcc

File tree

7 files changed

+145
-62
lines changed

7 files changed

+145
-62
lines changed

‎dist/angular-patternfly.js‎

Lines changed: 57 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1147,10 +1147,22 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
11471147
return {
11481148
restrict: 'A',
11491149
scope: {
1150-
legend: '=',
1151-
legendColors: '='
1150+
legend: '=?',
1151+
legendColors: '=?'
11521152
},
11531153
templateUrl: 'charts/heatmap/heatmap-legend.html',
1154+
controller: ["$scope", function ($scope) {
1155+
var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
1156+
var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
1157+
1158+
//Allow overriding of defaults
1159+
if (!$scope.legendColors) {
1160+
$scope.legendColors = heatmapColorPatternDefaults;
1161+
}
1162+
if (!$scope.legend) {
1163+
$scope.legend = legendLabelDefaults;
1164+
}
1165+
}],
11541166
link: function ($scope) {
11551167
var items = [];
11561168
var index;
@@ -1181,15 +1193,33 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
11811193
*
11821194
* @param {string=} height height of the chart (no units) - default: "200"
11831195
* @param {string=} chartTitle title of the chart
1196+
* @param {boolean=} showLegend flag to show the legend, defaults to true
11841197
* @param {array=} legendLabels the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']
11851198
* @param {array=} thresholds the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]
11861199
* @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']
11871200
* @param {function=} clickAction function(block) function to call when a block is clicked on
11881201
* @example
11891202
<example module="patternfly.charts">
1203+
<file name="index.html">
1204+
<div ng-controller="ChartCtrl" class="row">
1205+
<div class="col-md-5">
1206+
<div pf-heatmap id="id" chart-title="title" data="data" show-legend="showLegends"></div>
1207+
</div>
1208+
<div class="col-md-5">
1209+
<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>
1210+
</div>
1211+
<div class="col-md-12">
1212+
<form role="form">
1213+
<div class="form-group">
1214+
<label class="radio-inline">
1215+
<input type="checkbox" ng-model="showLegends">Show Legends</input>
1216+
</label>
1217+
</div>
1218+
</form>
1219+
</div>
1220+
</file>
11901221
<file name="script.js">
11911222
angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope) {
1192-
$scope.title = 'Utilization - Using Defaults';
11931223
$scope.data = [
11941224
{'id': 9,'value': 0.96,'tooltip': 'Node 8 : My OpenShift Provider<br\>96% : 96 Used of 100 Total<br\>4 Available'},
11951225
{'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
12441274
{'id': 51, 'value': 0.22, 'tooltip': 'Node 26 : My Kubernetes Provider<br\>22% : 22 Used of 100 Total<br\>78 Available'},
12451275
{'id': 14, 'value': 0.2, 'tooltip': 'Node 14 : My OpenShift Provider<br\>20% : 20 Used of 100 Total<br\>80 Available'}];
12461276
1277+
$scope.title = 'Utilization - Using Defaults';
12471278
$scope.titleAlt = 'Utilization - Overriding Defaults';
1279+
12481280
$scope.legendLabels = ['< 60%','70%', '70-80%' ,'80-90%', '> 90%'];
12491281
$scope.thresholds = [0.6, 0.7, 0.8, 0.9];
12501282
$scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000', '#f00'];
12511283
1284+
$scope.showLegends = true;
12521285
var clickAction = function (block) {
12531286
console.log(block);
12541287
};
12551288
$scope.clickAction = clickAction;
12561289
});
12571290
</file>
1258-
<file name="index.html">
1259-
<div ng-controller="ChartCtrl" class="row">
1260-
<div class="col-md-4">
1261-
<div pf-heatmap id="id" chart-title="title" data="data"></div>
1262-
</div>
1263-
<div class="col-md-4">
1264-
<div pf-heatmap id="id" chart-title="titleAlt" data="data" legend-labels="legendLabels" heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds" click-action="clickAction"></div>
1265-
</div>
1266-
</div>
1267-
</file>
12681291
</example>
12691292
*/
12701293
angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function ($compile) {
@@ -1275,20 +1298,37 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
12751298
data: '=',
12761299
height: '=',
12771300
chartTitle: '=?',
1301+
showLegend: '=?',
12781302
legendLabels: '=?',
12791303
thresholds: '=?',
12801304
heatmapColorPattern: '=?',
12811305
clickAction: '=?'
12821306
},
12831307
templateUrl: 'charts/heatmap/heatmap.html',
1284-
link: function (scope, element, attrs) {
1285-
var thisComponent = element[0].querySelector('.pf-heatmap-svg');
1286-
var containerWidth, containerHeight, blockSize, numberOfRows;
1308+
controller: ["$scope", function ($scope) {
12871309
var thresholdDefaults = [0.7, 0.8, 0.9];
12881310
var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
12891311
var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
12901312
var heightDefault = 200;
12911313

1314+
//Allow overriding of defaults
1315+
if (!$scope.thresholds) {
1316+
$scope.thresholds = thresholdDefaults;
1317+
}
1318+
if (!$scope.heatmapColorPattern) {
1319+
$scope.heatmapColorPattern = heatmapColorPatternDefaults;
1320+
}
1321+
if (!$scope.legendLabels) {
1322+
$scope.legendLabels = legendLabelDefaults;
1323+
}
1324+
$scope.height = $scope.height || heightDefault;
1325+
$scope.showLegend = $scope.showLegend || ($scope.showLegend === undefined);
1326+
$scope.loadingDone = false;
1327+
}],
1328+
link: function (scope, element, attrs) {
1329+
var thisComponent = element[0].querySelector('.pf-heatmap-svg');
1330+
var containerWidth, containerHeight, blockSize, numberOfRows;
1331+
12921332
var setSizes = function () {
12931333
var parentContainer = element[0].querySelector('.heatmap-container');
12941334
containerWidth = parentContainer.clientWidth;
@@ -1323,7 +1363,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
13231363
var data = scope.data;
13241364
var blockPadding = 1;
13251365
var color = d3.scale.threshold().domain(scope.thresholds).range(scope.heatmapColorPattern);
1326-
var component = thisComponent;
13271366
var blocks;
13281367
var highlightBlock = function (block, active) {
13291368
block.style('fill-opacity', active ? 1 : 0.4);
@@ -1368,15 +1407,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
13681407
});
13691408
};
13701409

1371-
//Allow overriding of defaults
1372-
scope.thresholds = angular.extend([], thresholdDefaults, scope.thresholds);
1373-
scope.heatmapColorPattern = angular.extend([], heatmapColorPatternDefaults, scope.heatmapColorPattern);
1374-
scope.legendLabels = angular.extend([], legendLabelDefaults, scope.legendLabels);
1375-
scope.height = scope.height || heightDefault;
1376-
1377-
//Shows loading indicator
1378-
scope.loadingDone = false;
1379-
13801410
scope.$watch('data', function (newVal, oldVal) {
13811411
if (typeof(newVal) !== 'undefined') {
13821412
scope.loadingDone = true;
@@ -5228,7 +5258,7 @@ angular.module('patternfly.views').directive('pfDataToolbar', function () {
52285258

52295259

52305260
$templateCache.put('charts/heatmap/heatmap.html',
5231-
"<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>"
5261+
"<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>"
52325262
);
52335263

52345264

‎dist/angular-patternfly.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,22 @@ angular.module('patternfly.charts').directive('pfHeatmapLegend',
44
return {
55
restrict: 'A',
66
scope: {
7-
legend: '=',
8-
legendColors: '='
7+
legend: '=?',
8+
legendColors: '=?'
99
},
1010
templateUrl: 'charts/heatmap/heatmap-legend.html',
11+
controller: function ($scope) {
12+
var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
13+
var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
14+
15+
//Allow overriding of defaults
16+
if (!$scope.legendColors) {
17+
$scope.legendColors = heatmapColorPatternDefaults;
18+
}
19+
if (!$scope.legend) {
20+
$scope.legend = legendLabelDefaults;
21+
}
22+
},
1123
link: function ($scope) {
1224
var items = [];
1325
var index;

‎src/charts/heatmap/heatmap.directive.js‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,33 @@
1414
*
1515
* @param {string=} height height of the chart (no units) - default: "200"
1616
* @param {string=} chartTitle title of the chart
17+
* @param {boolean=} showLegend flag to show the legend, defaults to true
1718
* @param {array=} legendLabels the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']
1819
* @param {array=} thresholds the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]
1920
* @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']
2021
* @param {function=} clickAction function(block) function to call when a block is clicked on
2122
* @example
2223
<example module="patternfly.charts">
24+
<file name="index.html">
25+
<div ng-controller="ChartCtrl" class="row">
26+
<div class="col-md-5">
27+
<div pf-heatmap id="id" chart-title="title" data="data" show-legend="showLegends"></div>
28+
</div>
29+
<div class="col-md-5">
30+
<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>
31+
</div>
32+
<div class="col-md-12">
33+
<form role="form">
34+
<div class="form-group">
35+
<label class="radio-inline">
36+
<input type="checkbox" ng-model="showLegends">Show Legends</input>
37+
</label>
38+
</div>
39+
</form>
40+
</div>
41+
</file>
2342
<file name="script.js">
2443
angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope) {
25-
$scope.title = 'Utilization - Using Defaults';
2644
$scope.data = [
2745
{'id': 9,'value': 0.96,'tooltip': 'Node 8 : My OpenShift Provider<br\>96% : 96 Used of 100 Total<br\>4 Available'},
2846
{'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 @@
7795
{'id': 51, 'value': 0.22, 'tooltip': 'Node 26 : My Kubernetes Provider<br\>22% : 22 Used of 100 Total<br\>78 Available'},
7896
{'id': 14, 'value': 0.2, 'tooltip': 'Node 14 : My OpenShift Provider<br\>20% : 20 Used of 100 Total<br\>80 Available'}];
7997
98+
$scope.title = 'Utilization - Using Defaults';
8099
$scope.titleAlt = 'Utilization - Overriding Defaults';
100+
81101
$scope.legendLabels = ['< 60%','70%', '70-80%' ,'80-90%', '> 90%'];
82102
$scope.thresholds = [0.6, 0.7, 0.8, 0.9];
83103
$scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000', '#f00'];
84104
105+
$scope.showLegends = true;
85106
var clickAction = function (block) {
86107
console.log(block);
87108
};
88109
$scope.clickAction = clickAction;
89110
});
90111
</file>
91-
<file name="index.html">
92-
<div ng-controller="ChartCtrl" class="row">
93-
<div class="col-md-4">
94-
<div pf-heatmap id="id" chart-title="title" data="data"></div>
95-
</div>
96-
<div class="col-md-4">
97-
<div pf-heatmap id="id" chart-title="titleAlt" data="data" legend-labels="legendLabels" heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds" click-action="clickAction"></div>
98-
</div>
99-
</div>
100-
</file>
101112
</example>
102113
*/
103114
angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
@@ -108,20 +119,37 @@ angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
108119
data: '=',
109120
height: '=',
110121
chartTitle: '=?',
122+
showLegend: '=?',
111123
legendLabels: '=?',
112124
thresholds: '=?',
113125
heatmapColorPattern: '=?',
114126
clickAction: '=?'
115127
},
116128
templateUrl: 'charts/heatmap/heatmap.html',
117-
link: function (scope, element, attrs) {
118-
var thisComponent = element[0].querySelector('.pf-heatmap-svg');
119-
var containerWidth, containerHeight, blockSize, numberOfRows;
129+
controller: function ($scope) {
120130
var thresholdDefaults = [0.7, 0.8, 0.9];
121131
var heatmapColorPatternDefaults = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
122132
var legendLabelDefaults = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
123133
var heightDefault = 200;
124134

135+
//Allow overriding of defaults
136+
if (!$scope.thresholds) {
137+
$scope.thresholds = thresholdDefaults;
138+
}
139+
if (!$scope.heatmapColorPattern) {
140+
$scope.heatmapColorPattern = heatmapColorPatternDefaults;
141+
}
142+
if (!$scope.legendLabels) {
143+
$scope.legendLabels = legendLabelDefaults;
144+
}
145+
$scope.height = $scope.height || heightDefault;
146+
$scope.showLegend = $scope.showLegend || ($scope.showLegend === undefined);
147+
$scope.loadingDone = false;
148+
},
149+
link: function (scope, element, attrs) {
150+
var thisComponent = element[0].querySelector('.pf-heatmap-svg');
151+
var containerWidth, containerHeight, blockSize, numberOfRows;
152+
125153
var setSizes = function () {
126154
var parentContainer = element[0].querySelector('.heatmap-container');
127155
containerWidth = parentContainer.clientWidth;
@@ -156,7 +184,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
156184
var data = scope.data;
157185
var blockPadding = 1;
158186
var color = d3.scale.threshold().domain(scope.thresholds).range(scope.heatmapColorPattern);
159-
var component = thisComponent;
160187
var blocks;
161188
var highlightBlock = function (block, active) {
162189
block.style('fill-opacity', active ? 1 : 0.4);
@@ -201,15 +228,6 @@ angular.module('patternfly.charts').directive('pfHeatmap', function ($compile) {
201228
});
202229
};
203230

204-
//Allow overriding of defaults
205-
scope.thresholds = angular.extend([], thresholdDefaults, scope.thresholds);
206-
scope.heatmapColorPattern = angular.extend([], heatmapColorPatternDefaults, scope.heatmapColorPattern);
207-
scope.legendLabels = angular.extend([], legendLabelDefaults, scope.legendLabels);
208-
scope.height = scope.height || heightDefault;
209-
210-
//Shows loading indicator
211-
scope.loadingDone = false;
212-
213231
scope.$watch('data', function (newVal, oldVal) {
214232
if (typeof(newVal) !== 'undefined') {
215233
scope.loadingDone = true;

‎src/charts/heatmap/heatmap.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ <h3>{{chartTitle}}</h3>
44
<svg class="pf-heatmap-svg"></svg>
55
</div>
66
<div ng-if="!loadingDone" class="spinner spinner-lg loading"></div>
7-
<div pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>
7+
<div ng-if="showLegend" pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>
88
</div>

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,10 @@ describe('Directive: pfHeatmapLegend', function() {
1818
};
1919

2020
beforeEach(function() {
21-
$scope.legendLabels = ['< 70%', '70-80%' ,'80-90%', '> 90%'];
22-
$scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000'];
23-
24-
element = compileChart('<div pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>',$scope);
2521
});
2622

27-
28-
it("should set the legend text and colors", function() {
23+
it("should use the default legend text and colors", function() {
24+
element = compileChart('<div pf-heatmap-legend ></div>',$scope);
2925
expect(angular.element(element).find('li').size()).toBe(4);
3026

3127
legendItem = angular.element(element).find('li')[0];
@@ -34,4 +30,18 @@ describe('Directive: pfHeatmapLegend', function() {
3430
expect(legendText.innerHTML).toBe("&gt; 90%");
3531
});
3632

33+
it("should set the legend text and colors", function() {
34+
$scope.legendLabels = ['<= 70%', '> 70%'];
35+
$scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A'];
36+
37+
element = compileChart('<div pf-heatmap-legend legend="legendLabels" legend-colors="heatmapColorPattern"></div>',$scope);
38+
expect(angular.element(element).find('li').size()).toBe(2);
39+
40+
legendItem = angular.element(element).find('li')[0];
41+
legendText = legendItem.querySelector('.pf-legend-text');
42+
43+
expect(legendText.innerHTML).toBe("&gt; 70%");
44+
});
45+
46+
3747
});

‎test/charts/heatmap/heatmap.spec.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,17 @@ describe('Directive: pfHeatmap', function() {
8080
expect(color.trim()).toBe('fill: #ce0000;');
8181
});
8282

83+
it("should show a legend by default", function() {
84+
element = compileChart('<div pf-heatmap chart-title="title" data="data"></div>',$scope);
85+
var legend = element.find('.pf-heatmap-legend-container');
86+
expect(legend.length).toBe(1);
87+
});
88+
89+
it("should not show a legend when set not to", function() {
90+
$scope.showLegend = false;
91+
element = compileChart('<div pf-heatmap chart-title="title" data="data" show-legend="showLegend"></div>',$scope);
92+
var legend = element.find('.pf-heatmap-legend-container');
93+
expect(legend.length).toBe(0);
94+
});
95+
8396
});

0 commit comments

Comments
 (0)