Skip to content

Commit feb83c0

Browse files
author
Eleni Rundle
committed
Merge pull request #133 from dtaylor113/utilzChartUpdates
Utilization Bar Chart Updates
2 parents 6195ed7 + ad93e76 commit feb83c0

File tree

8 files changed

+69
-49
lines changed

8 files changed

+69
-49
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ module.exports = function (grunt) {
125125
'lib/patternfly/components/c3/c3.js',
126126
'lib/patternfly/components/d3/d3.js',
127127
'lib/angular/angular.js',
128+
'lib/angular-sanitize/angular-sanitize.js',
128129
'lib/angular-animate/angular-animate.js',
129130
'lib/angular-bootstrap/ui-bootstrap-tpls.js',
130131
'misc/angular-bootstrap-prettify.js',

‎dist/angular-patternfly.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ angular.module('patternfly.card', []);
1313
* Charts module for patternfly. Must Include d3.js and c3.js to use
1414
*
1515
*/
16-
angular.module('patternfly.charts', ['patternfly.utils', 'ui.bootstrap']);
16+
angular.module('patternfly.charts', ['patternfly.utils', 'ui.bootstrap', 'ngSanitize']);
1717

1818
;/**
1919
* @name patternfly card
@@ -1615,14 +1615,17 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
16151615
* </ul>
16161616
*
16171617
* @param {object=} chart-title The title displayed on the left-hand side of the chart
1618+
* @param {object=} chart-footer The label displayed on the right-hand side of the chart. If chart-footer is not
1619+
* specified, the automatic footer-label-format will be used.
16181620
* @param {object=} layout Various alternative layouts the utilization bar chart may have:<br/>
16191621
* <ul style='list-style-type: none'>
16201622
* <li>.type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout,
16211623
* and 'inline' displays a smaller, inline layout.</li>
16221624
* <li>.titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
1623-
* <li>.usedLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
1625+
* <li>.footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
16241626
* </ul>
1625-
* @param {string=} used-label-format The format of the used label on the right side of the bar chart. Values may be:<br/>
1627+
* @param {string=} footer-label-format The auto-format of the label on the right side of the bar chart when chart-footer
1628+
* has not been specified. Values may be:<br/>
16261629
* <ul style='list-style-type: none'>
16271630
* <li>'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
16281631
* <li>'percent' - displays a percentage label of '(n)% Used'.</li>
@@ -1647,19 +1650,19 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
16471650
<hr>
16481651
<label><strong>layout='inline'</strong></label>
16491652
<div pf-card head-title="Utilization Bar Chart">
1650-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
1653+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
16511654
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
16521655
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
16531656
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
16541657
</div>
16551658
16561659
<hr>
1657-
<label><strong>layout='inline', used-label-format='percent', custom widths</strong></label>
1660+
<label><strong>layout='inline', footer-label-format='percent', and custom chart-footer labels</strong></label>
16581661
<div pf-card head-title="Utilization Bar Chart">
1659-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInlineWidths used-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
1660-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInlineWidths used-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
1661-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInlineWidths used-label-format='percent' units=units4 threshold-error="85" threshold-warning="60"></div>
1662-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInlineWidths used-label-format='percent' units=units5 threshold-error="85" threshold-warning="60"></div>
1662+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
1663+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
1664+
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
1665+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
16631666
</div>
16641667
</div>
16651668
</file>
@@ -1677,8 +1680,9 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
16771680
'total': '24'
16781681
};
16791682
1680-
$scope.title2 = 'Memory Utilization';
1681-
$scope.units2 = 'GB';
1683+
$scope.title2 = 'Memory Utilization';
1684+
$scope.title2short = 'Memory';
1685+
$scope.units2 = 'GB';
16821686
16831687
$scope.data2 = {
16841688
'used': '25',
@@ -1711,11 +1715,9 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
17111715
'type': 'inline'
17121716
};
17131717
1714-
$scope.layoutInlineWidths = {
1715-
'type': 'inline',
1716-
'titleLabelWidth': '120px',
1717-
'usedLabelWidth': '60px'
1718-
};
1718+
$scope.footer1 = '<strong>500 TB</strong> Total';
1719+
$scope.footer2 = '<strong>450 of 500</strong> Total';
1720+
17191721
});
17201722
</file>
17211723
</example>
@@ -1728,10 +1730,11 @@ angular.module('patternfly.charts').directive('pfUtilizationBarChart', ["$timeou
17281730
scope: {
17291731
chartData: '=',
17301732
chartTitle: '=',
1733+
chartFooter: '=',
17311734
units: '=',
17321735
thresholdError: '=?',
17331736
thresholdWarning: '=?',
1734-
usedLabelFormat: '@?',
1737+
footerLabelFormat: '@?',
17351738
layout: '=?'
17361739
},
17371740
templateUrl: 'charts/utilization-bar/utilization-bar-chart.html',
@@ -4929,7 +4932,7 @@ angular.module('patternfly.views').directive('pfDataToolbar', function () {
49294932

49304933
$templateCache.put('charts/utilization-bar/utilization-bar-chart.html',
49314934
"<div class=pf-utilization-bar-chart><span ng-if=\"!layout || layout.type === 'regular'\"><div ng-if=chartTitle class=progress-description>{{chartTitle}}</div><div class=\"progress progress-label-top-right\"><div class=progress-bar role=progressbar ng-class=\"{'animate': animate,\n" +
4932-
" 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}\" ng-style=\"{width:chartData.percentageUsed + '%'}\" tooltip=\"{{chartData.percentageUsed}}% Used\"><span ng-if=\"!usedLabelFormat || usedLabelFormat === 'actual'\">{{chartData.used}} of {{chartData.total}} {{units}} Used</span> <span ng-if=\"usedLabelFormat === 'percent'\">{{chartData.percentageUsed}}% Used</span></div><div class=\"progress-bar progress-bar-remaining\" role=progressbar aria-valuenow=5 aria-valuemin=0 aria-valuemax=100 ng-style=\"{width:(100 - chartData.percentageUsed) + '%'}\" tooltip=\"{{100 - chartData.percentageUsed}}% Available\"></div></div></span> <span ng-if=\"layout && layout.type === 'inline'\"><div class=\"progress-container progress-description-left progress-label-right\" ng-style=\"{'padding-left':layout.titleLabelWidth, 'padding-right':layout.usedLabelWidth}\"><div ng-if=chartTitle class=progress-description ng-style=\"{'max-width':layout.titleLabelWidth}\">{{chartTitle}}</div><div class=progress><div class=progress-bar role=progressbar aria-valuenow=25 aria-valuemin=0 aria-valuemax=100 ng-class=\"{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}\" ng-style=\"{width:chartData.percentageUsed + '%'}\" tooltip=\"{{chartData.percentageUsed}}% Used\"><span ng-if=\"!usedLabelFormat || usedLabelFormat === 'actual'\" ng-style=\"{'max-width':layout.usedLabelWidth}\">{{chartData.used}} of {{chartData.total}} {{units}} Used</span> <span ng-if=\"usedLabelFormat === 'percent'\" ng-style=\"{'max-width':layout.usedLabelWidth}\">{{chartData.percentageUsed}}% Used</span></div><div class=\"progress-bar progress-bar-remaining\" role=progressbar aria-valuenow=75 aria-valuemin=0 aria-valuemax=100 ng-style=\"{width:(100 - chartData.percentageUsed) + '%'}\" tooltip=\"{{100 - chartData.percentageUsed}}% Available\"></div></div></div></span></div>"
4935+
" 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}\" ng-style=\"{width:chartData.percentageUsed + '%'}\" tooltip=\"{{chartData.percentageUsed}}% Used\"><span ng-if=chartFooter ng-bind-html=chartFooter></span> <span ng-if=\"!chartFooter && (!footerLabelFormat || footerLabelFormat === 'actual')\"><strong>{{chartData.used}} of {{chartData.total}} {{units}}</strong> Used</span> <span ng-if=\"!chartFooter && footerLabelFormat === 'percent'\"><strong>{{chartData.percentageUsed}}%</strong> Used</span></div><div class=\"progress-bar progress-bar-remaining\" role=progressbar aria-valuenow=5 aria-valuemin=0 aria-valuemax=100 ng-style=\"{width:(100 - chartData.percentageUsed) + '%'}\" tooltip=\"{{100 - chartData.percentageUsed}}% Available\"></div></div></span> <span ng-if=\"layout && layout.type === 'inline'\"><div class=\"progress-container progress-description-left progress-label-right\" ng-style=\"{'padding-left':layout.titleLabelWidth, 'padding-right':layout.footerLabelWidth}\"><div ng-if=chartTitle class=progress-description ng-style=\"{'max-width':layout.titleLabelWidth}\">{{chartTitle}}</div><div class=progress><div class=progress-bar role=progressbar aria-valuenow=25 aria-valuemin=0 aria-valuemax=100 ng-class=\"{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}\" ng-style=\"{width:chartData.percentageUsed + '%'}\" tooltip=\"{{chartData.percentageUsed}}% Used\"><span ng-if=chartFooter ng-bind-html=chartFooter></span> <span ng-if=\"(!chartFooter) && (!footerLabelFormat || footerLabelFormat === 'actual')\" ng-style=\"{'max-width':layout.footerLabelWidth}\"><strong>{{chartData.used}} {{units}}</strong> Used</span> <span ng-if=\"(!chartFooter) && footerLabelFormat === 'percent'\" ng-style=\"{'max-width':layout.footerLabelWidth}\"><strong>{{chartData.percentageUsed}}%</strong> Used</span></div><div class=\"progress-bar progress-bar-remaining\" role=progressbar aria-valuenow=75 aria-valuemin=0 aria-valuemax=100 ng-style=\"{width:(100 - chartData.percentageUsed) + '%'}\" tooltip=\"{{100 - chartData.percentageUsed}}% Available\"></div></div></div></span></div>"
49334936
);
49344937

49354938

‎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/charts.module.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
* Charts module for patternfly. Must Include d3.js and c3.js to use
66
*
77
*/
8-
angular.module('patternfly.charts', ['patternfly.utils', 'ui.bootstrap']);
8+
angular.module('patternfly.charts', ['patternfly.utils', 'ui.bootstrap', 'ngSanitize']);
99

‎src/charts/utilization-bar/utilization-bar-chart.directive.js‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,17 @@
1818
* </ul>
1919
*
2020
* @param {object=} chart-title The title displayed on the left-hand side of the chart
21+
* @param {object=} chart-footer The label displayed on the right-hand side of the chart. If chart-footer is not
22+
* specified, the automatic footer-label-format will be used.
2123
* @param {object=} layout Various alternative layouts the utilization bar chart may have:<br/>
2224
* <ul style='list-style-type: none'>
2325
* <li>.type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout,
2426
* and 'inline' displays a smaller, inline layout.</li>
2527
* <li>.titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
26-
* <li>.usedLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
28+
* <li>.footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
2729
* </ul>
28-
* @param {string=} used-label-format The format of the used label on the right side of the bar chart. Values may be:<br/>
30+
* @param {string=} footer-label-format The auto-format of the label on the right side of the bar chart when chart-footer
31+
* has not been specified. Values may be:<br/>
2932
* <ul style='list-style-type: none'>
3033
* <li>'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
3134
* <li>'percent' - displays a percentage label of '(n)% Used'.</li>
@@ -50,19 +53,19 @@
5053
<hr>
5154
<label><strong>layout='inline'</strong></label>
5255
<div pf-card head-title="Utilization Bar Chart">
53-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
56+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
5457
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
5558
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
5659
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
5760
</div>
5861
5962
<hr>
60-
<label><strong>layout='inline', used-label-format='percent', custom widths</strong></label>
63+
<label><strong>layout='inline', footer-label-format='percent', and custom chart-footer labels</strong></label>
6164
<div pf-card head-title="Utilization Bar Chart">
62-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInlineWidths used-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
63-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInlineWidths used-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
64-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInlineWidths used-label-format='percent' units=units4 threshold-error="85" threshold-warning="60"></div>
65-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInlineWidths used-label-format='percent' units=units5 threshold-error="85" threshold-warning="60"></div>
65+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
66+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
67+
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
68+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
6669
</div>
6770
</div>
6871
</file>
@@ -80,8 +83,9 @@
8083
'total': '24'
8184
};
8285
83-
$scope.title2 = 'Memory Utilization';
84-
$scope.units2 = 'GB';
86+
$scope.title2 = 'Memory Utilization';
87+
$scope.title2short = 'Memory';
88+
$scope.units2 = 'GB';
8589
8690
$scope.data2 = {
8791
'used': '25',
@@ -114,11 +118,9 @@
114118
'type': 'inline'
115119
};
116120
117-
$scope.layoutInlineWidths = {
118-
'type': 'inline',
119-
'titleLabelWidth': '120px',
120-
'usedLabelWidth': '60px'
121-
};
121+
$scope.footer1 = '<strong>500 TB</strong> Total';
122+
$scope.footer2 = '<strong>450 of 500</strong> Total';
123+
122124
});
123125
</file>
124126
</example>
@@ -131,10 +133,11 @@ angular.module('patternfly.charts').directive('pfUtilizationBarChart', function
131133
scope: {
132134
chartData: '=',
133135
chartTitle: '=',
136+
chartFooter: '=',
134137
units: '=',
135138
thresholdError: '=?',
136139
thresholdWarning: '=?',
137-
usedLabelFormat: '@?',
140+
footerLabelFormat: '@?',
138141
layout: '=?'
139142
},
140143
templateUrl: 'charts/utilization-bar/utilization-bar-chart.html',

‎src/charts/utilization-bar/utilization-bar-chart.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
<div class="progress-bar" role="progressbar" ng-class="{'animate': animate,
66
'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
77
ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used">
8-
<span ng-if="!usedLabelFormat || usedLabelFormat === 'actual'">{{chartData.used}} of {{chartData.total}} {{units}} Used</span>
9-
<span ng-if="usedLabelFormat === 'percent'">{{chartData.percentageUsed}}% Used</span>
8+
<span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
9+
<span ng-if="!chartFooter && (!footerLabelFormat || footerLabelFormat === 'actual')"><strong>{{chartData.used}} of {{chartData.total}} {{units}}</strong> Used</span>
10+
<span ng-if="!chartFooter && footerLabelFormat === 'percent'"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
1011
</div>
1112
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"
1213
ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
@@ -15,14 +16,15 @@
1516
</span>
1617
<span ng-if="layout && layout.type === 'inline'">
1718
<div class="progress-container progress-description-left progress-label-right"
18-
ng-style="{'padding-left':layout.titleLabelWidth, 'padding-right':layout.usedLabelWidth}">
19+
ng-style="{'padding-left':layout.titleLabelWidth, 'padding-right':layout.footerLabelWidth}">
1920
<div ng-if="chartTitle" class="progress-description" ng-style="{'max-width':layout.titleLabelWidth}">{{chartTitle}}</div>
2021
<div class="progress">
2122
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
2223
ng-class="{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
2324
ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used">
24-
<span ng-if="!usedLabelFormat || usedLabelFormat === 'actual'" ng-style="{'max-width':layout.usedLabelWidth}">{{chartData.used}} of {{chartData.total}} {{units}} Used</span>
25-
<span ng-if="usedLabelFormat === 'percent'" ng-style="{'max-width':layout.usedLabelWidth}">{{chartData.percentageUsed}}% Used</span>
25+
<span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
26+
<span ng-if="(!chartFooter) && (!footerLabelFormat || footerLabelFormat === 'actual')" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.used}} {{units}}</strong> Used</span>
27+
<span ng-if="(!chartFooter) && footerLabelFormat === 'percent'" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
2628
</div>
2729
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
2830
ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">

0 commit comments

Comments
 (0)