Skip to content

Commit 469fe4d

Browse files
dtaylor113dtaylor113
authored
Merge pull request #570 from cdcabrera/feature-utilization
Utilization Donut Chart Component
2 parents a07d2c7 + cf4c16c commit 469fe4d

File tree

4 files changed

+170
-20
lines changed

4 files changed

+170
-20
lines changed

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
77
onThresholdChange: '&'
88
},
99
templateUrl: 'charts/donut/donut-pct-chart.html',
10-
controller: function (pfUtils, $element, $timeout) {
10+
controller: function (pfUtils, $scope) {
1111
'use strict';
1212
var ctrl = this, prevData;
13+
ctrl.$id = $scope.$id;
1314

1415
ctrl.$onInit = function () {
15-
ctrl.donutChartId = 'donutPctChart';
16+
ctrl.donutChartId = 'donutPctChart' + ctrl.$id;
17+
1618
if (ctrl.config.chartId) {
1719
ctrl.donutChartId = ctrl.config.chartId + ctrl.donutChartId;
1820
}
@@ -24,6 +26,10 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
2426
ctrl.data.available = ctrl.data.total - ctrl.data.used;
2527
};
2628

29+
ctrl.updatePercentage = function () {
30+
ctrl.data.percent = Math.round(ctrl.data.used / ctrl.data.total * 100.0);
31+
};
32+
2733
ctrl.getStatusColor = function (used, thresholds) {
2834
var threshold = "none";
2935
var color = pfUtils.colorPalette.blue;
@@ -127,6 +133,7 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
127133

128134
ctrl.config = pfUtils.merge(patternfly.c3ChartDefaults().getDefaultDonutConfig(), ctrl.config);
129135
ctrl.updateAvailable();
136+
ctrl.updatePercentage();
130137
ctrl.config.data = pfUtils.merge(ctrl.config.data, ctrl.getDonutData());
131138
ctrl.config.color = ctrl.statusDonutColor(ctrl);
132139
ctrl.config.tooltip = ctrl.donutTooltip();

‎src/charts/donut/donut-pct-chart.html

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
1-
<span>
2-
<pf-c3-chart ng-if="$ctrl.data.dataAvailable !== false" id="{{$ctrl.donutChartId}}" config="$ctrl.config"
3-
get-chart-callback="$ctrl.setChart"></pf-c3-chart>
4-
<pf-empty-chart ng-if="$ctrl.data.dataAvailable === false" chart-height="$ctrl.chartHeight"></pf-empty-chart>
1+
<span class="pct-donut-chart-pf">
2+
<span ng-class="{'pct-donut-chart-pf-left': $ctrl.config.labelConfig.orientation === 'left', 'pct-donut-chart-pf-right': $ctrl.config.labelConfig.orientation === 'right'}">
3+
<span class="pct-donut-chart-pf-chart">
4+
<pf-c3-chart ng-if="$ctrl.data.dataAvailable !== false" id="{{$ctrl.donutChartId}}" config="$ctrl.config"
5+
get-chart-callback="$ctrl.setChart"></pf-c3-chart>
6+
<pf-empty-chart ng-if="$ctrl.data.dataAvailable === false" chart-height="$ctrl.chartHeight"></pf-empty-chart>
7+
</span>
8+
<span ng-if="$ctrl.data.dataAvailable !== false && $ctrl.config.labelConfig && !$ctrl.config.labelConfig.labelFn()" class="pct-donut-chart-pf-label">
9+
{{$ctrl.config.labelConfig.title}}
10+
<span ng-if="$ctrl.data" ng-switch="$ctrl.config.labelConfig.label">
11+
<span ng-switch-when="none"></span>
12+
<span ng-switch-when="available">{{$ctrl.data.available}} {{$ctrl.config.labelConfig.units}} available</span>
13+
<span ng-switch-when="percent">{{$ctrl.data.percent}}&#37; used</span>
14+
<span ng-switch-default="">{{$ctrl.data.used}} {{$ctrl.config.labelConfig.units}} of {{$ctrl.data.total}} {{$ctrl.config.labelConfig.units}} used</span>
15+
</span>
16+
</span>
17+
<span ng-if="$ctrl.data.dataAvailable !== false && $ctrl.config.labelConfig && $ctrl.config.labelConfig.labelFn()" class="pct-donut-chart-pf-label"
18+
ng-bind-html="$ctrl.config.labelConfig.labelFn()">
19+
</span>
20+
</span>
521
</span>
22+

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

Lines changed: 125 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,21 @@
2626
* <li>.tooltipFn(d) - user defined function to customize the tool tip (optional)
2727
* <li>.centerLabelFn - user defined function to customize the text of the center label (optional)
2828
* <li>.onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.
29+
* <li>.labelConfig - object containing properties for external label (optional) - default: undefined
30+
* <ul>
31+
* <li>.orientation - string with possible values: 'left', 'right' (optional) - default: 'center'
32+
* <li>.title - string representing a prefix or title (optional) - default: empty string
33+
* <li>.label - the wording format to display, possible values: 'used', 'available', 'percent', 'none' (optional) - default: 'used'
34+
* <li>.units - unit label for values, ex: 'MHz','GB', etc.. (optional) - default: empty string
35+
* <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
36+
* </ul>
37+
* </li>
2938
* </ul>
3039
*
3140
* @param {object} data the Total and Used values for the donut chart. Available is calculated as Total - Used.<br/>
3241
* <ul style='list-style-type: none'>
3342
* <li>.used - number representing the amount used
43+
* <li>.percent - number representing the percentage used
3444
* <li>.total - number representing the total amount
3545
* <li>.dataAvailable - Flag if there is data available - default: true
3646
* </ul>
@@ -62,19 +72,23 @@
6272
<div class="row">
6373
<div class="col-md-3 text-center">
6474
<label>Error Threshold</label>
65-
<pf-donut-pct-chart config="configErr" data="dataErr" chart="chartErr"></pf-donut-pct-chart>
75+
<p class="text-right">
76+
<pf-donut-pct-chart config="configErr" data="dataErr" chart="chartErr"></pf-donut-pct-chart>
77+
</p>
6678
</div>
67-
<div class="col-md-3 text-center"">
79+
<div class="col-md-3 text-center">
6880
<label>Warning Threshold</label>
6981
<pf-donut-pct-chart config="configWarn" data="dataWarn"></pf-donut-pct-chart>
7082
</div>
71-
<div class="col-md-3 text-center"">
83+
<div class="col-md-3 text-center">
7284
<label class="camelcase">{{threshLabel}} Threshold</label>
73-
<pf-donut-pct-chart config="configDynamic" data="dataDynamic" center-label="labelDynamic"
74-
on-threshold-change="thresholdChanged(threshold)">
75-
</pf-donut-pct-chart>
85+
<p class="text-left">
86+
<pf-donut-pct-chart config="configDynamic" data="dataDynamic" center-label="labelDynamic"
87+
on-threshold-change="thresholdChanged(threshold)">
88+
</pf-donut-pct-chart>
89+
</p>
7690
</div>
77-
<div class="col-md-3 text-center"">
91+
<div class="col-md-3 text-center">
7892
<label>No Threshold</label>
7993
<pf-donut-pct-chart config="configNoThresh" data="dataNoThresh"></pf-donut-pct-chart>
8094
</div>
@@ -88,20 +102,45 @@
88102
89103
<div class="row">
90104
<div class="col-md-3 text-center">
91-
<pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></pf-donut-pct-chart>
92105
<label>center-label = 'used'</label>
106+
<pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></pf-donut-pct-chart>
93107
</div>
94108
<div class="col-md-3 text-center">
95-
<pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></pf-donut-pct-chart>
96109
<label>center-label = 'available'</label>
110+
<pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></pf-donut-pct-chart>
97111
</div>
98112
<div class="col-md-3 text-center">
99-
<pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
100113
<label>center-label = 'percent'</label>
114+
<pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
101115
</div>
102116
<div class="col-md-3 text-center">
117+
<label>center-label = 'none'</label>
103118
<pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
104-
<label>center-label = ' none'</label>
119+
</div>
120+
</div>
121+
122+
<div class="row">
123+
<div class="col-md-12">
124+
<hr>
125+
</div>
126+
</div>
127+
128+
<div class="row">
129+
<div class="col-md-4 text-center">
130+
<label>Sized with orientation left 'configLabel'</label>
131+
<p class="text-right">
132+
<pf-donut-pct-chart config="configOrientationLeft" data="dataOrientationLeft"></pf-donut-pct-chart>
133+
</p>
134+
</div>
135+
<div class="col-md-4 text-center">
136+
<label>Sized with 'configLabel'</label>
137+
<pf-donut-pct-chart config="configOrientationCenter" data="dataOrientationCenter"></pf-donut-pct-chart>
138+
</div>
139+
<div class="col-md-4 text-center">
140+
<label>Sized with orientation right 'configLabel'</label>
141+
<p class="text-left">
142+
<pf-donut-pct-chart config="configOrientationRight" data="dataOrientationRight"></pf-donut-pct-chart>
143+
</p>
105144
</div>
106145
</div>
107146
@@ -120,7 +159,7 @@
120159
</div>
121160
<div class="row">
122161
<div class="col-md-3">
123-
<form role="form"">
162+
<form role="form">
124163
<div class="form-group">
125164
<label class="checkbox-inline">
126165
<input type="checkbox" ng-model="custData.dataAvailable">Data Available</input>
@@ -144,6 +183,7 @@
144183
145184
<file name="script.js">
146185
angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope, $interval ) {
186+
// start demo 1st row
147187
$scope.configErr = {
148188
'chartId': 'chartErr',
149189
'units': 'GB',
@@ -200,14 +240,15 @@
200240
201241
$scope.configNoThresh = {
202242
'chartId': 'chartNoThresh',
203-
'units': 'GB',
243+
'units': 'GB'
204244
};
205245
206246
$scope.dataNoThresh = {
207247
'used': '750',
208248
'total': '1000'
209249
};
210250
251+
//start demo 2nd row
211252
$scope.usedConfig = {
212253
'chartId': 'usedChart',
213254
'units': 'GB',
@@ -260,6 +301,76 @@
260301
261302
$scope.noLabel = "none";
262303
304+
//start demo 3rd row
305+
$scope.configOrientationLeft = {
306+
'units': 'GB',
307+
'thresholds':{'warning':'60','error':'90'},
308+
'labelConfig': {
309+
'orientation': 'left',
310+
'labelFn': function () {
311+
return "<strong>Lorem ipsum</strong><br/>" + $scope.dataOrientationLeft.used + " GB used";
312+
}
313+
},
314+
'size': {
315+
'height': 85,
316+
'width': 85
317+
},
318+
'centerLabelFn': function () {
319+
return $scope.dataOrientationLeft.used + "GB";
320+
}
321+
};
322+
323+
$scope.dataOrientationLeft = {
324+
'used': '350',
325+
'total': '1000'
326+
};
327+
328+
$scope.configOrientationCenter = {
329+
'units': 'GB',
330+
'thresholds':{'warning':'60','error':'90'},
331+
'labelConfig': {
332+
'label': 'available',
333+
'units': 'GB',
334+
'title': 'Lorem ipsum,'
335+
},
336+
'size': {
337+
'height': 115,
338+
'width': 115
339+
},
340+
'centerLabelFn': function () {
341+
return $scope.dataOrientationCenter.used + "GB";
342+
}
343+
};
344+
345+
$scope.dataOrientationCenter = {
346+
'used': '350',
347+
'total': '1000'
348+
};
349+
350+
$scope.configOrientationRight = {
351+
'units': 'GB',
352+
'thresholds':{'warning':'60','error':'90'},
353+
'labelConfig': {
354+
'orientation': 'right',
355+
'labelFn': function () {
356+
return "<strong>Lorem ipsum</strong><br/>" + $scope.dataOrientationRight.percent + "% used";
357+
}
358+
},
359+
'size': {
360+
'height': 85,
361+
'width': 85
362+
},
363+
'centerLabelFn': function () {
364+
return $scope.dataOrientationRight.percent + "%";
365+
}
366+
};
367+
368+
$scope.dataOrientationRight = {
369+
'used': '350',
370+
'total': '1000'
371+
};
372+
373+
//start demo 4th row
263374
$scope.custConfig = {
264375
'chartId': 'custChart',
265376
'units': 'MHz',
@@ -289,3 +400,4 @@
289400
</file>
290401
</example>
291402
*/
403+

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@ describe('Directive: pfDonutPctChart', function() {
1616
beforeEach(function() {
1717
$scope.config = {
1818
'units': 'MHz',
19-
'thresholds':{'warning':'75.0','error':'90.00'}
19+
'thresholds':{'warning':'75.0','error':'90.00'},
20+
'labelConfig': {
21+
'orientation': 'right',
22+
'title': 'Lorem Ipsum',
23+
'label': 'available',
24+
'units': 'MHz'
25+
}
2026
};
2127

2228
$scope.data = {
@@ -41,6 +47,13 @@ describe('Directive: pfDonutPctChart', function() {
4147
element = compileDonut('<pf-donut-pct-chart config="config" data="data" center-label="cntrLabel"></pf-donut-pct-chart>');
4248
};
4349

50+
it("should have an external label", function() {
51+
compileSimpleDonut();
52+
expect(element.find('.pct-donut-chart-pf-right').length).toEqual(1);
53+
expect(element.find('.pct-donut-chart-pf-label')[0].innerText).toContain('Lorem Ipsum');
54+
expect(element.find('.pct-donut-chart-pf-label > span')[0].innerText).toContain('50 MHz available');
55+
});
56+
4457
it("should trigger error threshold", function() {
4558
compileSimpleDonut();
4659
expect(ctrl.statusDonutColor().pattern[0]).toBe('#cc0000'); //red
@@ -133,3 +146,4 @@ describe('Directive: pfDonutPctChart', function() {
133146
});
134147

135148
});
149+

0 commit comments

Comments
 (0)