1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 | 1 14 14 23 23 23 1 22 22 22 3 3 3 22 22 14 14 14 59 9 14 56 14 56 | /** * @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 Eif (!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'; }; } }); |