Skip to content

Commit 7d25833

Browse files
cdcabreracdcabrera
committed
DEV Merged Pct & Utilization Donuts
Merged the utilization donut into the configuration options for pct-donut
1 parent 033d877 commit 7d25833

File tree

7 files changed

+113
-506
lines changed

7 files changed

+113
-506
lines changed

‎src/charts/charts.less

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,28 @@ pf-c3-chart {
1111
width: 100%;
1212
}
1313
}
14-
.utilization-donut-chart-pf {
14+
.pct-donut-chart-pf {
1515

16-
display: inline-block;
17-
18-
pf-c3-chart {
19-
display: inline-block;
20-
}
21-
22-
.utilization-donut-chart-pf-block {
23-
.utilization-donut-chart-pf-label {
16+
.pct-donut-chart-pf-block {
17+
.pct-donut-chart-pf-label {
2418
display: block;
2519
}
2620
}
2721

28-
.utilization-donut-chart-pf-left,
29-
.utilization-donut-chart-pf-right {
22+
.pct-donut-chart-pf-left,
23+
.pct-donut-chart-pf-right {
24+
25+
pf-c3-chart {
26+
display: inline-block;
27+
}
28+
3029
display: flex;
3130
flex-direction: row;
3231
justify-content: center;
3332
align-items: center;
3433
}
3534

36-
.utilization-donut-chart-pf-left {
35+
.pct-donut-chart-pf-left {
3736
flex-direction: row-reverse;
3837
}
3938
}

‎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.label.orientation !== 'left' && $ctrl.config.label.orientation !== 'right', 'pct-donut-chart-pf-left': $ctrl.config.label.orientation === 'left', 'pct-donut-chart-pf-right': $ctrl.config.label.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.label && !$ctrl.config.label.labelFn()" class="pct-donut-chart-pf-label">
9+
{{$ctrl.config.label.title}}
10+
<span ng-if="$ctrl.data" ng-switch="$ctrl.config.label.label">
11+
<span ng-switch-when="none"></span>
12+
<span ng-switch-when="available">{{$ctrl.data.available}} {{$ctrl.config.label.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.label.units}} of {{$ctrl.data.total}} {{$ctrl.config.label.units}} used</span>
15+
</span>
16+
</span>
17+
<span ng-if="$ctrl.data.dataAvailable !== false && $ctrl.config.label && $ctrl.config.label.labelFn()" class="pct-donut-chart-pf-label"
18+
ng-bind-html="$ctrl.config.label.labelFn()">
19+
</span>
20+
</span>
521
</span>
22+

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

Lines changed: 66 additions & 7 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>.label - object containing properties for external label (optional)
30+
* <ul>
31+
* <li>.orientation - string with possible values: 'left', 'right' (optional)
32+
* <li>.title - string representing a prefix or title (optional)
33+
* <li>.label - similar in to the center-label parameter, which specifies the contents of the donut's external label, values: 'used', 'available', 'percent', 'none' (optional)
34+
* <li>.units - unit label for values, ex: 'MHz','GB', etc.. (optional)
35+
* <li>.labelFn - function to customize the text of the external label (optional)
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,17 +71,21 @@
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>
6778
<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>
7182
<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>
7790
<div class="col-md-3 text-center"">
7891
<label>No Threshold</label>
@@ -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+
'label': {
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+
'label': {
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+
'label': {
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+
'label': {
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+

0 commit comments

Comments
 (0)