Skip to content

Commit 567bbe7

Browse files
cdcabreracdcabrera
committed
feat(chart): Utilization Donut Chart Component
Enhancement for utilization donut chart component
1 parent ca84a9a commit 567bbe7

File tree

4 files changed

+181
-23
lines changed

4 files changed

+181
-23
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: 136 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@
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 (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/>
@@ -62,19 +71,23 @@
6271
<div class="row">
6372
<div class="col-md-3 text-center">
6473
<label>Error Threshold</label>
65-
<pf-donut-pct-chart config="configErr" data="dataErr" chart="chartErr"></pf-donut-pct-chart>
74+
<p class="text-right">
75+
<pf-donut-pct-chart config="configErr" data="dataErr" chart="chartErr"></pf-donut-pct-chart>
76+
</p>
6677
</div>
67-
<div class="col-md-3 text-center"">
78+
<div class="col-md-3 text-center">
6879
<label>Warning Threshold</label>
6980
<pf-donut-pct-chart config="configWarn" data="dataWarn"></pf-donut-pct-chart>
7081
</div>
71-
<div class="col-md-3 text-center"">
82+
<div class="col-md-3 text-center">
7283
<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>
84+
<p class="text-left">
85+
<pf-donut-pct-chart config="configDynamic" data="dataDynamic" center-label="labelDynamic"
86+
on-threshold-change="thresholdChanged(threshold)">
87+
</pf-donut-pct-chart>
88+
</p>
7689
</div>
77-
<div class="col-md-3 text-center"">
90+
<div class="col-md-3 text-center">
7891
<label>No Threshold</label>
7992
<pf-donut-pct-chart config="configNoThresh" data="dataNoThresh"></pf-donut-pct-chart>
8093
</div>
@@ -88,20 +101,45 @@
88101
89102
<div class="row">
90103
<div class="col-md-3 text-center">
91-
<pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></pf-donut-pct-chart>
92104
<label>center-label = 'used'</label>
105+
<pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></pf-donut-pct-chart>
93106
</div>
94107
<div class="col-md-3 text-center">
95-
<pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></pf-donut-pct-chart>
96108
<label>center-label = 'available'</label>
109+
<pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></pf-donut-pct-chart>
97110
</div>
98111
<div class="col-md-3 text-center">
99-
<pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
100112
<label>center-label = 'percent'</label>
113+
<pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
101114
</div>
102115
<div class="col-md-3 text-center">
116+
<label>center-label = 'none'</label>
103117
<pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
104-
<label>center-label = ' none'</label>
118+
</div>
119+
</div>
120+
121+
<div class="row">
122+
<div class="col-md-12">
123+
<hr>
124+
</div>
125+
</div>
126+
127+
<div class="row">
128+
<div class="col-md-4 text-center">
129+
<label>Sized with orientation left 'configLabel'</label>
130+
<p class="text-right">
131+
<pf-donut-pct-chart config="configOrientationLeft" data="dataOrientationLeft"></pf-donut-pct-chart>
132+
</p>
133+
</div>
134+
<div class="col-md-4 text-center">
135+
<label>Sized with 'configLabel'</label>
136+
<pf-donut-pct-chart config="configOrientationCenter" data="dataOrientationCenter"></pf-donut-pct-chart>
137+
</div>
138+
<div class="col-md-4 text-center">
139+
<label>Sized with orientation right 'configLabel'</label>
140+
<p class="text-left">
141+
<pf-donut-pct-chart config="configOrientationRight" data="dataOrientationRight"></pf-donut-pct-chart>
142+
</p>
105143
</div>
106144
</div>
107145
@@ -120,7 +158,7 @@
120158
</div>
121159
<div class="row">
122160
<div class="col-md-3">
123-
<form role="form"">
161+
<form role="form">
124162
<div class="form-group">
125163
<label class="checkbox-inline">
126164
<input type="checkbox" ng-model="custData.dataAvailable">Data Available</input>
@@ -144,10 +182,14 @@
144182
145183
<file name="script.js">
146184
angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope, $interval ) {
185+
// start demo 1st row
147186
$scope.configErr = {
148187
'chartId': 'chartErr',
149188
'units': 'GB',
150-
'thresholds':{'warning':'60','error':'90'}
189+
'thresholds':{'warning':'60','error':'90'},
190+
'centerLabelFn': function () {
191+
return $scope.dataErr.used + "GB";
192+
}
151193
};
152194
153195
$scope.dataErr = {
@@ -160,7 +202,10 @@
160202
$scope.configWarn = {
161203
'chartId': 'chartWarn',
162204
'units': 'GB',
163-
'thresholds':{'warning':'60','error':'90'}
205+
'thresholds':{'warning':'60','error':'90'},
206+
'centerLabelFn': function () {
207+
return $scope.dataWarn.used + "GB";
208+
}
164209
};
165210
166211
$scope.dataWarn = {
@@ -171,7 +216,10 @@
171216
$scope.configDynamic = {
172217
'chartId': 'chartOk',
173218
'units': 'GB',
174-
'thresholds':{'warning':'60','error':'90'}
219+
'thresholds':{'warning':'60','error':'90'},
220+
'centerLabelFn': function () {
221+
return $scope.dataDynamic.percent + "%";
222+
}
175223
};
176224
177225
$scope.dataDynamic = {
@@ -200,14 +248,15 @@
200248
201249
$scope.configNoThresh = {
202250
'chartId': 'chartNoThresh',
203-
'units': 'GB',
251+
'units': 'GB'
204252
};
205253
206254
$scope.dataNoThresh = {
207255
'used': '750',
208256
'total': '1000'
209257
};
210258
259+
//start demo 2nd row
211260
$scope.usedConfig = {
212261
'chartId': 'usedChart',
213262
'units': 'GB',
@@ -260,6 +309,76 @@
260309
261310
$scope.noLabel = "none";
262311
312+
//start demo 3rd row
313+
$scope.configOrientationLeft = {
314+
'units': 'GB',
315+
'thresholds':{'warning':'60','error':'90'},
316+
'labelConfig': {
317+
'orientation': 'left',
318+
'labelFn': function () {
319+
return "<strong>Lorem ipsum</strong><br/>" + $scope.dataOrientationLeft.used + " GB used";
320+
}
321+
},
322+
'size': {
323+
'height': 85,
324+
'width': 85
325+
},
326+
'centerLabelFn': function () {
327+
return $scope.dataOrientationLeft.used + "GB";
328+
}
329+
};
330+
331+
$scope.dataOrientationLeft = {
332+
'used': '350',
333+
'total': '1000'
334+
};
335+
336+
$scope.configOrientationCenter = {
337+
'units': 'GB',
338+
'thresholds':{'warning':'60','error':'90'},
339+
'labelConfig': {
340+
'label': 'available',
341+
'units': 'GB',
342+
'title': 'Lorem ipsum,'
343+
},
344+
'size': {
345+
'height': 115,
346+
'width': 115
347+
},
348+
'centerLabelFn': function () {
349+
return $scope.dataOrientationCenter.used + "GB";
350+
}
351+
};
352+
353+
$scope.dataOrientationCenter = {
354+
'used': '350',
355+
'total': '1000'
356+
};
357+
358+
$scope.configOrientationRight = {
359+
'units': 'GB',
360+
'thresholds':{'warning':'60','error':'90'},
361+
'labelConfig': {
362+
'orientation': 'right',
363+
'labelFn': function () {
364+
return "<strong>Lorem ipsum</strong><br/>" + $scope.dataOrientationRight.percent + "% used";
365+
}
366+
},
367+
'size': {
368+
'height': 85,
369+
'width': 85
370+
},
371+
'centerLabelFn': function () {
372+
return $scope.dataOrientationRight.percent + "%";
373+
}
374+
};
375+
376+
$scope.dataOrientationRight = {
377+
'used': '350',
378+
'total': '1000'
379+
};
380+
381+
//start demo 4th row
263382
$scope.custConfig = {
264383
'chartId': 'custChart',
265384
'units': 'MHz',
@@ -289,3 +408,4 @@
289408
</file>
290409
</example>
291410
*/
411+

‎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)