Skip to content

Commit 02f0e4e

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

File tree

5 files changed

+137
-16
lines changed

5 files changed

+137
-16
lines changed

‎src/charts/charts.less

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,32 @@ pf-c3-chart {
1111
width: 100%;
1212
}
1313
}
14+
.pct-donut-chart-pf {
15+
16+
.pct-donut-chart-pf-block {
17+
.pct-donut-chart-pf-label {
18+
display: block;
19+
}
20+
}
21+
22+
.pct-donut-chart-pf-left,
23+
.pct-donut-chart-pf-right {
24+
25+
pf-c3-chart {
26+
display: inline-block;
27+
}
28+
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: center;
32+
align-items: center;
33+
}
34+
35+
.pct-donut-chart-pf-left {
36+
flex-direction: row-reverse;
37+
}
38+
}
39+
1440
.utilization-trend-chart-pf {
1541
.donut-chart-pf {
1642
float: left;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
2424
ctrl.data.available = ctrl.data.total - ctrl.data.used;
2525
};
2626

27+
ctrl.updatePercentage = function () {
28+
ctrl.data.percent = Math.round(ctrl.data.used / ctrl.data.total * 100.0);
29+
};
30+
2731
ctrl.getStatusColor = function (used, thresholds) {
2832
var threshold = "none";
2933
var color = pfUtils.colorPalette.blue;
@@ -127,6 +131,7 @@ angular.module('patternfly.charts').component('pfDonutPctChart', {
127131

128132
ctrl.config = pfUtils.merge(patternfly.c3ChartDefaults().getDefaultDonutConfig(), ctrl.config);
129133
ctrl.updateAvailable();
134+
ctrl.updatePercentage();
130135
ctrl.config.data = pfUtils.merge(ctrl.config.data, ctrl.getDonutData());
131136
ctrl.config.color = ctrl.statusDonutColor(ctrl);
132137
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-block': $ctrl.config.labelConfig.orientation !== 'left' && $ctrl.config.labelConfig.orientation !== 'right', '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: 70 additions & 11 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>
@@ -120,7 +133,7 @@
120133
</div>
121134
<div class="row">
122135
<div class="col-md-3">
123-
<form role="form"">
136+
<form role="form">
124137
<div class="form-group">
125138
<label class="checkbox-inline">
126139
<input type="checkbox" ng-model="custData.dataAvailable">Data Available</input>
@@ -147,7 +160,20 @@
147160
$scope.configErr = {
148161
'chartId': 'chartErr',
149162
'units': 'GB',
150-
'thresholds':{'warning':'60','error':'90'}
163+
'thresholds':{'warning':'60','error':'90'},
164+
'labelConfig': {
165+
'orientation': 'left',
166+
'title': 'Example',
167+
'label': 'used',
168+
'units': 'GB'
169+
},
170+
'size': {
171+
'height': 85,
172+
'width': 85
173+
},
174+
'centerLabelFn': function () {
175+
return $scope.dataErr.used + "GB";
176+
}
151177
};
152178
153179
$scope.dataErr = {
@@ -160,7 +186,18 @@
160186
$scope.configWarn = {
161187
'chartId': 'chartWarn',
162188
'units': 'GB',
163-
'thresholds':{'warning':'60','error':'90'}
189+
'thresholds':{'warning':'60','error':'90'},
190+
'labelConfig': {
191+
'label': 'used',
192+
'units': 'GB'
193+
},
194+
'size': {
195+
'height': 115,
196+
'width': 115
197+
},
198+
'centerLabelFn': function () {
199+
return $scope.dataWarn.used + "GB";
200+
}
164201
};
165202
166203
$scope.dataWarn = {
@@ -171,7 +208,20 @@
171208
$scope.configDynamic = {
172209
'chartId': 'chartOk',
173210
'units': 'GB',
174-
'thresholds':{'warning':'60','error':'90'}
211+
'thresholds':{'warning':'60','error':'90'},
212+
'labelConfig': {
213+
'orientation': 'right',
214+
'labelFn': function () {
215+
return "<strong>Custom</strong><br/>" + $scope.dataDynamic.used + " GB used";
216+
}
217+
},
218+
'size': {
219+
'height': 85,
220+
'width': 85
221+
},
222+
'centerLabelFn': function () {
223+
return $scope.dataDynamic.percent + "%";
224+
}
175225
};
176226
177227
$scope.dataDynamic = {
@@ -201,6 +251,14 @@
201251
$scope.configNoThresh = {
202252
'chartId': 'chartNoThresh',
203253
'units': 'GB',
254+
'labelConfig': {
255+
'label': 'available',
256+
'units': 'GB'
257+
},
258+
'size': {
259+
'height': 115,
260+
'width': 115
261+
}
204262
};
205263
206264
$scope.dataNoThresh = {
@@ -289,3 +347,4 @@
289347
</file>
290348
</example>
291349
*/
350+

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