src/charts/utilization-bar/utilization-bar-chart.component.js
/**
* @ngdoc directive
* @name patternfly.charts.directive:pfUtilizationBarChart
* @restrict E
*
* @description
* Component for rendering a utilization bar chart
* There are three possible fill colors for Used Percentage, dependent on whether or not there are thresholds:<br/>
* <ul>
* <li>When no thresholds exist, or if the used percentage has not surpassed any thresholds, the indicator is blue.
* <li>When the used percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange.
* <li>When the used percentage has surpassed the error threshold, the indicator is is red.
* </ul>
*
* @param {object} chartData the data to be shown in the utilization bar chart<br/>
* <ul style='list-style-type: none'>
* <li>.used - number representing the amount used
* <li>.total - number representing the total amount
* <li>.dataAvailable - Flag if there is data available - default: true
* </ul>
*
* @param {object=} chart-title The title displayed on the left-hand side of the chart
* @param {object=} chart-footer The label displayed on the right-hand side of the chart. If chart-footer is not
* specified, the automatic footer-label-format will be used.
* @param {object=} layout Various alternative layouts the utilization bar chart may have:<br/>
* <ul style='list-style-type: none'>
* <li>.type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout,
* and 'inline' displays a smaller, inline layout.</li>
* <li>.titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
* <li>.footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
* </ul>
* @param {string=} footer-label-format The auto-format of the label on the right side of the bar chart when chart-footer
* has not been specified. Values may be:<br/>
* <ul style='list-style-type: none'>
* <li>'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
* <li>'percent' - displays a percentage label of '(n)% Used'.</li>
* </ul>
* @param {object=} units to be displayed on the chart. Examples: "GB", "MHz", "I/Ops", etc...
* @param {string=} threshold-error The percentage used, when reached, denotes an error. Valid values are 1-100. When the error threshold
* has been reached, the used donut arc will be red.
* @param {string=} threshold-warning The percentage usage, when reached, denotes a warning. Valid values are 1-100. When the warning threshold
* has been reached, the used donut arc will be orange.
* @param {function(items)} avaliableTooltipFunction A passed in tooltip function which can be used to overwrite the default available tooltip behavior
* @param {function(items)} usedTooltipFunction A passed in tooltip function which can be used to overwrite the default usedtooltip behavior
*
* @example
<example module="patternfly.example">
<file name="index.html">
<div ng-controller="ChartCtrl">
<label class="label-title">Default Layout, no Thresholds</label>
<pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></pf-utilization-bar-chart>
<br>
<label class="label-title">Inline layout, Custom tooltips'</label>
<pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1
available-tooltip-function="availableTooltip(title1, data1)"
used-tooltip-function="usedTooltip(title1, data1)"></pf-utilization-bar-chart>
<br>
<label class="label-title">Inline Layouts with Error, Warning, and Ok Thresholds</label>
<pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60">../utilization-trend/utilization-trend-chart-directive.js</pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<br>
<label class="label-title">Inline layout, Footer label percent, and Custom chart footer labels</label>
<pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<div class="row">
<div class="col-md-6">
<form role="form"">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" ng-model="data1.dataAvailable">Data Available</input>
</label>
</div>
</form>
</div>
</div>
</div>
</file>
<file name="script.js">
angular.module( 'patternfly.example', ['patternfly.charts', 'patternfly.card']);
angular.module( 'patternfly.example' ).controller( 'ChartCtrl', function( $scope, $interval ) {
$scope.title1 = 'RAM Usage';
$scope.units1 = 'MB';
$scope.data1 = {
'dataAvailable': true,
'used': '8',
'total': '24'
};
$scope.title2 = 'Memory';
$scope.units2 = 'GB';
$scope.data2 = {
'used': '25',
'total': '100'
};
$scope.title3 = 'CPU Usage';
$scope.units3 = 'MHz';
$scope.data3 = {
'used': '420',
'total': '500'
};
$scope.title4 = 'Disk Usage';
$scope.units4 = 'TB';
$scope.data4 = {
'used': '350',
'total': '500'
};
$scope.title5 = 'Disk I/O';
$scope.units5 = 'I/Ops';
$scope.data5 = {
'used': '450',
'total': '500'
};
$interval(function () {
$scope.data5.used = Number($scope.data5.used) + 40;
if ($scope.data5.used > 500) {
$scope.data5.used = 10;
}
}, 1000);
$scope.layoutInline = {
'type': 'inline'
};
$scope.footer1 = '<strong>500 TB</strong> Total';
$scope.footer2 = '<strong>450 of 500</strong> Total';
$scope.availableTooltip = function (title, data){
return '<div>Title: ' + title + '</div><div>Available: ' + data.total + '</div>';
};
$scope.usedTooltip = function (title, data){
return '<div>Title: ' + title + '</div><div>Usage: ' + data.used + 'MB</div>';
};
});
</file>
</example>
*/
angular.module('patternfly.charts').component('pfUtilizationBarChart', {
bindings: {
chartData: '=',
chartTitle: '=',
chartFooter: '=',
units: '=',
thresholdError: '=?',
thresholdWarning: '=?',
footerLabelFormat: '@?',
layout: '=?',
usedTooltipFunction: '&?',
availableTooltipFunction: '&?'
},
templateUrl: 'charts/utilization-bar/utilization-bar-chart.html',
controller: function ($timeout) {
'use strict';
var ctrl = this, prevChartData, prevLayout;
ctrl.updateAll = function () {
// Need to deep watch changes
prevChartData = angular.copy(ctrl.chartData);
prevLayout = angular.copy(ctrl.layout);
if (!ctrl.chartData) {
return;
}
//Calculate the percentage used
if (!isNaN(ctrl.chartData.used) && !isNaN(ctrl.chartData.total) && (ctrl.chartData.total > 0)) {
ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
} else {
ctrl.chartData.percentageUsed = 0;
}
if (ctrl.thresholdError || ctrl.thresholdWarning) {
ctrl.isError = (ctrl.chartData.percentageUsed >= ctrl.thresholdError);
ctrl.isWarn = (ctrl.chartData.percentageUsed >= ctrl.thresholdWarning &&
ctrl.chartData.percentageUsed < ctrl.thresholdError);
ctrl.isOk = (ctrl.chartData.percentageUsed < ctrl.thresholdWarning);
}
//Animate in the chart load.
ctrl.animate = true;
$timeout(function () {
ctrl.animate = false;
}, 0);
};
ctrl.$onChanges = function (changesObj) {
ctrl.updateAll();
};
ctrl.$doCheck = function () {
// do a deep compare on chartData and layout
if (!angular.equals(ctrl.chartData, prevChartData) || !angular.equals(ctrl.layout, prevLayout)) {
ctrl.updateAll();
}
};
ctrl.usedTooltipMessage = function () {
return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : _.get(ctrl.chartData, 'percentageUsed', 'N/A') + '% Used';
};
ctrl.availableTooltipMessage = function () {
return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - _.get(ctrl.chartData, 'percentageUsed', 0)) + '% Available';
};
}
});