/**

* @name patternfly card

*

* @description

* Card module for patternfly.

*

*/

angular.module('patternfly.card', []);

;/**

* @name patternfly

*

* @description

* Charts module for patternfly. Must Include d3.js and c3.js to use

*

*/

angular.module('patternfly.charts', ['patternfly.utils', 'ui.bootstrap', 'ngSanitize']);

;/**

* @name patternfly card

*

* @description

* Filters module for patternfly.

*

*/

angular.module('patternfly.filters', ['patternfly.select', 'ui.bootstrap']);

;/**

* @name patternfly.form

*

* @description

* Module for formting related functionality, primarily filters.

*/

angular.module('patternfly.form', []);

;/**

* @name patternfly notification

*

* @description

* Notification module for patternfly.

*

*/

angular.module('patternfly.notification', []);

;/**

* @name patternfly

*

* @description

* Base module for patternfly.

*/

angular.module('patternfly', [

'patternfly.autofocus',

'patternfly.card',

'patternfly.filters',

'patternfly.form',

'patternfly.notification',

'patternfly.select',

'patternfly.sort',

'patternfly.toolbars',

'patternfly.utils',

'patternfly.validation',

'patternfly.views'

]);

;/**

* @name patternfly card

*

* @description

* Sort module for patternfly.

*

*/

angular.module('patternfly.sort', ['ui.bootstrap']);

;/**

* @name patternfly toolbars

*

* @description

* Filters module for patternfly.

*

*/

angular.module('patternfly.toolbars', [

'patternfly.utils',

'patternfly.filters',

'patternfly.sort',

'patternfly.views']);

;

angular.module( 'patternfly.utils', [] );

;/**

* @name patternfly

*

* @description

* Views module for patternfly.

*

*/

angular.module('patternfly.views', ['patternfly.utils', 'patternfly.filters', 'patternfly.sort']);

;/**

* @ngdoc directive

* @name patternfly.autofocus:pfFocused

* @restrict A

* @element ANY

* @param {expression=} pfFocused If the expression is true, the element is focused and selected (if possible).

*

* @description

* The focus on element is evaluated from given expression. If the expression provided as an attribute to this directive

* is evaluated as true, the element is selected (and focused).

*

* @example

<example module="patternfly.autofocus">

<file name="index.html">

<div>

<form class="form-horizontal">

<div class="form-group">

<label class="col-sm-2 control-label" for="i1">Focus next input:</label>

<div class="col-sm-10">

<input id="i1" ng-model="isFocus" type="checkbox"></input>

</div>

</div>

<div class="form-group">

<label class="col-sm-2 control-label" for="i2">Focused input:</label>

<div class="col-sm-10">

<input class="form-control" id="i1" ng-model="i2" pf-focused="isFocus" placeholder="This will be selected after checking the box above."></input>

</div>

</div>

</form>

</div>

</file>

</example>

*/

angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", function ($timeout) {

'use strict';

return {

restrict: 'A',

link: function (scope, element, attrs) {

scope.$watch(attrs.pfFocused, function (newValue) {

$timeout(function () {

if (newValue) {

element[0].focus();

if (element[0].select) {

element[0].select();

}

}

});

});

}

};

}]);

;/**

* @ngdoc directive

* @name patternfly.card.directive:pfAggregateStatusCard

* @restrict A

* @element ANY

* @param {object} status Status configuration information<br/>

* <ul style='list-style-type: none'>

* <li>.title - the main title of the aggregate status card

* <li>.count - the number count of the main statuses

* <li>.href - the href to navigate to if one clicks on the title or count

* <li>.iconClass - an icon to display to the left of the count

* <li>.notifications - an array of status icons & counts

* <ul style='list-style-type: none'>

* <li>.iconClass - an icon to display to the right of the notification count

* <li>.count - the number count of the notification status

* <li>.href - href to navigate to if one clicks on the notification status icon or count

* </ul>

* </ul>

* When layout='mini', only one notification can be specified:<br>

* <ul style='list-style-type: none'>

* <li>...

* <li><strong>.notification</strong> - an <em>object</em> of containing a single notification icon & count

* <ul style='list-style-type: none'>

* <li>.iconClass - an icon to display to the right of the notification count

* <li>.count - the number count of the notification status

* <li>.href - href to navigate to if one clicks on the notification status icon or count

* </ul>

* </ul>

* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border

* @param {string=} layout Various alternative layouts the aggregate status card may have:<br/>

* <ul style='list-style-type: none'>

* <li>'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object

* <li>'tall' displays a tall aggregate status card. This equals the depreciated 'alt-layout' param.</li>

* </ul>

* @deprecated {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout

*

* @description

* Directive for easily displaying status information

*

* @example

<example module="patternfly.card">

<file name="index.html">

<div ng-controller="CardDemoCtrl" style="display:inline-block;">

<div class="col-md-10">

<label>With Top Border</label>

<div pf-aggregate-status-card status="status" show-top-border="true"></div>

<br/>

<label>No Top Border</label>

<div pf-aggregate-status-card status="status"></div>

<br/>

<label>layout = "mini"</label>

<div pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></div>

<div pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></div>

<br/>

<label>layout = "tall"</label>

<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></div>

<br/>

<label>Alternate Layout</label>

<i>(depreciated, use layout = 'tall' instead)</i>

</br></br>

<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></div>

</div>

</div>

</file>

<file name="script.js">

angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope ) {

$scope.status = {

"title":"Nodes",

"count":793,

"href":"#",

"iconClass": "fa fa-shield",

"notifications":[

{

"iconClass":"pficon pficon-error-circle-o",

"count":4,

"href":"#"

},

{

"iconClass":"pficon pficon-warning-triangle-o",

"count":1

}

]

};

$scope.aggStatusAlt = {

"title":"Providers",

"count":3,

"notifications":[

{

"iconClass":"pficon pficon-openshift",

"count":1,

"href":"#"

},

{

"iconClass":"pficon pficon-kubernetes",

"count":2,

"href":"#"

}

]

};

$scope.miniAggStatus = {

"iconClass":"pficon pficon-container-node",

"title":"Nodes",

"count":52,

"href":"#",

"notification": {

"iconClass":"pficon pficon-error-circle-o",

"count":3

}

};

$scope.miniAggStatus2 = {

"iconClass":"pficon pficon-cluster",

"title":"Adipiscing",

"count":9,

"href":"#",

"notification":{

"iconClass":"pficon pficon-ok"

}

};

});

</file>

</example>

*/

angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function () {

'use strict';

return {

restrict: 'A',

scope: {

status: '=',

showTopBorder: '@?',

altLayout: '@?',

layout: '@?'

},

templateUrl: 'card/aggregate-status/aggregate-status-card.html',

link: function (scope) {

scope.shouldShowTopBorder = (scope.showTopBorder === 'true');

scope.isAltLayout = (scope.altLayout === 'true' || scope.layout === 'tall');

scope.isMiniLayout = (scope.layout === 'mini');

}

};

});

;/**

* @ngdoc directive

* @name patternfly.card.directive:pfCard

* @restrict A

* @element ANY

* @param {string} headTitle Title for the card

* @param {string=} subTitle Sub-Title for the card

* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border

* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.

* True (default) shows the line, false hides the line

* @param {object=} footer footer configuration properties:<br/>

* <ul style='list-style-type: none'>

* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel

* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon

* <li>.href - (optional) the href link to navigate to when the footer href is clicked

* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked

* </ul>

* *Note: If a href link and a callBackFn are specified, the href link will be called

* @param {object=} filter filter configuration properties:<br/>

* <ul style='list-style-type: none'>

* <li>.filters - drop down items for the filter.

*<pre class=''>

* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},

* {label:'Last 15 Days', value:'15'},

* {label:'Today', value:'today'}]</pre>

* <li>.defaultFilter - integer, 0 based index into the filters array

* <li>.callBackFn - user defined function to call when a filter is selected

* </ul>

* @description

* Directive for easily displaying a card with html content

*

* @example

<example module="demo">

<file name="index.html">

<div ng-controller="ChartCtrl">

<label class="label-title">Timeframe filter in header</label>

<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">

Card Contents

</div>

<label class="label-title">Footer with Link & Timeframe filter</label>

<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"

footer="footerConfig" filter="filterConfig" style="width: 50%">

Card Contents

</div>

<label class="label-title">Card With Single Trend Chart</label>

<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">

<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>

</div>

<label class="label-title">Card With Multiple Trends</label>

<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"

show-titles-separator="false" style="width: 65%" footer="actionBarConfig">

<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>

<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>

<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>

</div>

<label class="label-title">Card With Multiple Utilization Bars</label>

<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">

<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>

<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>

<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>

<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>

</div>

</div>

</file>

<file name="script.js">

angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {

$scope.footerConfig = {

'iconClass' : 'fa fa-flag',

'text' : 'View All Events',

'callBackFn': function () {

alert("Footer Callback Fn Called");

}

}

$scope.filterConfigHeader = {

'filters' : [{label:'Last 30 Days', value:'30'},

{label:'Last 15 Days', value:'15'},

{label:'Today', value:'today'}],

'callBackFn': function (f) {

alert("Header Filter Callback Fn Called for '" + f.label + "' value = " + f.value);

},

'position' : 'header'

}

$scope.filterConfig = {

'filters' : [{label:'Last 30 Days', value:'30'},

{label:'Last 15 Days', value:'15'},

{label:'Today', value:'today'}],

'callBackFn': function (f) {

alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);

},

'defaultFilter' : '1'

}

var today = new Date();

var dates = ['dates'];

for (var d = 20 - 1; d >= 0; d--) {

dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));

}

$scope.configSingle = {

'chartId' : 'example2TrendsChart',

'title' : 'Storage Capacity',

'layout' : 'compact',

'valueType' : 'actual',

'units' : 'TB',

'tooltipType' : 'percentage'

};

$scope.dataSingle = {

'total': '250',

'xData': dates,

'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']

};

$scope.configVirtual = {

'chartId' : 'virtualTrendsChart',

'layout' : 'inline',

'trendLabel' : 'Virtual Disk I/O',

'units' : 'GB',

'tooltipType' : 'percentage'

};

$scope.dataVirtual = {

'total': '250',

'xData': dates,

'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']

};

$scope.configPhysical = {

'chartId' : 'physicalTrendsChart',

'layout' : 'inline',

'trendLabel' : 'Physical Disk I/O',

'units' : 'MHz',

'tooltipType' : 'percentage'

};

$scope.dataPhysical = {

'total': '250',

'xData': dates,

'yData': ['used', '20', '20', '35', '20', '20', '87', '14', '20', '25', '28', '44', '56', '78', '56', '67', '88', '76', '65', '87', '16']

};

$scope.configMemory = {

'chartId' : 'memoryTrendsChart',

'layout' : 'inline',

'trendLabel' : 'Memory Utilization',

'units' : 'GB',

'tooltipType' : 'percentage'

};

$scope.dataMemory = {

'total': '250',

'xData': dates,

'yData': ['used', '20', '20', '35', '70', '20', '87', '14', '95', '25', '28', '44', '56', '66', '16', '67', '88', '76', '65', '87', '56']

};

$scope.actionBarConfig = {

'iconClass' : 'fa fa-plus-circle',

'text' : 'Add New Cluster',

'callBackFn': function () {

alert("Footer Callback Fn Called");

}

}

$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',

};

$scope.layoutInline = {

'type': 'inline'

};

});

</file>

</example>

*/

angular.module('patternfly.card').directive('pfCard', function () {

'use strict';

return {

restrict: 'A',

transclude: true,

templateUrl: 'card/basic/card.html',

scope: {

headTitle: '@',

subTitle: '@?',

showTopBorder: '@?',

showTitlesSeparator: '@?',

footer: '=?',

filter: '=?'

},

controller: ["$scope", function ($scope) {

if ($scope.filter && !$scope.currentFilter) {

if ($scope.filter.defaultFilter) {

$scope.currentFilter = $scope.filter.filters[$scope.filter.defaultFilter];

} else {

$scope.currentFilter = $scope.filter.filters[0];

}

}

$scope.footerCallBackFn = function () {

$scope.footerCallBackResult = $scope.footer.callBackFn();

};

$scope.filterCallBackFn = function (f) {

$scope.currentFilter = f;

if ($scope.filter.callBackFn) {

$scope.filterCallBackResult = $scope.filter.callBackFn(f);

}

};

$scope.showHeader = function () {

return ($scope.headTitle || $scope.showFilterInHeader());

};

$scope.showFilterInHeader = function () {

return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');

};

$scope.showFilterInFooter = function () {

return ($scope.filter && $scope.filter.filters && (!$scope.filter.position || $scope.filter.position === 'footer'));

};

}],

link: function (scope) {

scope.shouldShowTitlesSeparator = (!scope.showTitlesSeparator || scope.showTitlesSeparator === 'true');

}

};

});

;(function () {

'use strict';

var patternflyDefaults = $().c3ChartDefaults();

angular.module('patternfly.charts').constant('c3ChartDefaults', {

getDefaultColors: patternflyDefaults.getDefaultColors,

getDefaultDonut: patternflyDefaults.getDefaultDonut,

getDefaultDonutSize: patternflyDefaults.getDefaultDonutSize,

getDefaultDonutColor: patternflyDefaults.getDefaultDonutColors,

getDefaultDonutLegend: patternflyDefaults.getDefaultDonutLegend,

getDefaultDonutConfig: patternflyDefaults.getDefaultDonutConfig,

getDefaultSparklineArea: patternflyDefaults.getDefaultSparklineArea,

getDefaultSparklineSize: patternflyDefaults.getDefaultSparklineSize,

getDefaultSparklineAxis: patternflyDefaults.getDefaultSparklineAxis,

getDefaultSparklineColor: patternflyDefaults.getDefaultColors,

getDefaultSparklineLegend: patternflyDefaults.getDefaultSparklineLegend,

getDefaultSparklinePoint: patternflyDefaults.getDefaultSparklinePoint,

getDefaultSparklineTooltip: patternflyDefaults.getDefaultSparklineTooltip,

getDefaultSparklineConfig: patternflyDefaults.getDefaultSparklineConfig

});

})();

;/**

* @ngdoc directive

* @name patternfly.charts.directive:pfC3Chart

*

* @description

* Directive for wrapping c3 library

*

* Note: The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.

* In order to use patternfly charts you must add 'patternfly.charts' as a dependency in your application.

*

*

* @param {string} id the ID of the container that the chart should bind to

* @param {expression} config the c3 configuration options for the chart

* @param {function (chart))=} getChartCallback the callback user function to be called once the chart is generated, containing the c3 chart object

*

* @example

<example module="patternfly.charts">

<file name="index.html">

<div ng-controller="ChartCtrl">

<div pf-c3-chart id="chartId" config="chartConfig" get-chart-callback="getChart"></div>

<form role="form" style="width:300px">

Total = {{total}}, Used = {{used}}, Available = {{available}}

<div class="form-group">

<label>Used</label>

<input type="text" class="form-control" ng-model="newUsed">

</div>

<input type="button" ng-click="submitform(newUsed)" value="Set Used" />

<input type="button" ng-click="focusUsed()" value="Focus Used" />

</form>

</div>

</file>

<file name="script.js">

angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {

$scope.used = 950;

$scope.total = 1000;

$scope.available = $scope.total - $scope.used;

$scope.chartConfig = $().c3ChartDefaults().getDefaultDonutConfig('MHz Used');

$scope.chartConfig.data = {

type: "donut",

columns: [

["Used", $scope.used],

["Available", $scope.total - $scope.used]

],

groups: [

["used", "available"]

],

order: null

};

$scope.getChart = function (chart) {

$scope.chart = chart;

}

$scope.focusUsed = function () {

$scope.chart.focus("Used");

}

$scope.updateAvailable = function (val) {

$scope.available = $scope.total - $scope.used;

}

$scope.submitform = function (val) {

$scope.used = val;

$scope.updateAvailable();

$scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]];

};

});

</file>

</example>

*/

(function () {

'use strict';

angular.module('patternfly.charts').directive('pfC3Chart', ["$timeout", function ($timeout) {

return {

restrict: 'A',

scope: {

config: '=',

getChartCallback: '='

},

template: '<div id=""></div>',

replace: true,

link: function (scope, element, attrs) {

scope.$watch('config', function () {

$timeout(function () {

// store the chart object

var chart;

//generate c3 chart data

var chartData = scope.config;

chartData.bindto = '#' + attrs.id;

chart = c3.generate(chartData);

if (scope.getChartCallback) {

scope.getChartCallback(chart);

}

});

}, true);

}

};

}]);

}());

;/**

* @ngdoc directive

* @name patternfly.charts.directive:pfDonutPctChart

*

* @description

* Directive for rendering a percentage used donut/radial chart. The Used Percentage fill starts at 12 o’clock and

* moves clockwise. Whatever portion of the donut not Used, will be represented as Available, and rendered as a

* gray fill.

* 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>

* The directive will calculate the Available Percentage (Total - Used), and display it as a grey radial fill.

*

* <br><br>

* See http://c3js.org/reference.html for a full list of C3 chart options.

*

* @param {object} config configuration properties for the donut chart:<br/>

* <ul style='list-style-type: none'>

* <li>.chartId - the unique id of the donut chart

* <li>.units - unit label for values, ex: 'MHz','GB', etc..

* <li>.thresholds - warning and error percentage thresholds used to determine the Usage Percentage fill color (optional)

* <li>.tooltipFn(d) - user defined function to customize the tool tip (optional)

* <li>.centerLabelFn - user defined function to customize the text of the center label (optional)

* <li>.onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.

* </ul>

*

* @param {object} data the Total and Used values for the donut chart. Available is calculated as Total - Used.<br/>

* <ul style='list-style-type: none'>

* <li>.used - number representing the amount used

* <li>.total - number representing the total amount

* </ul>

*

* @param {string=} center-label specifies the contents of the donut's center label.<br/>

* <strong>Values:</strong>

* <ul style='list-style-type: none'>

* <li> 'used' - displays the Used amount in the center label (default)

* <li> 'available' - displays the Available amount in the center label

* <li> 'percent' - displays the Usage Percent of the Total amount in the center label

* <li> 'none' - does not display the center label

* </ul>

* @example

<example module="patternfly.charts">

<file name="index.html">

<div ng-controller="ChartCtrl">

<div class="container-fluid">

<div class="row">

<div class="col-md-3 text-center">

<label>Error Threshold</label>

<div pf-donut-pct-chart config="configErr" data="dataErr"></div>

</div>

<div class="col-md-3 text-center"">

<label>Warning Threshold</label>

<div pf-donut-pct-chart config="configWarn" data="dataWarn"></div>

</div>

<div class="col-md-3 text-center"">

<label>Ok</label>

<div pf-donut-pct-chart config="configOk" data="dataOk"></div>

</div>

<div class="col-md-3 text-center"">

<label>No Threshold</label>

<div pf-donut-pct-chart config="configNoThresh" data="dataNoThresh"></div>

</div>

</div>

<div class="row">

<div class="col-md-12">

<hr>

</div>

</div>

<div class="row">

<div class="col-md-3 text-center">

<div pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></div>

<label>center-label = 'used'</label>

</div>

<div class="col-md-3 text-center">

<div pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></div>

<label>center-label = 'available'</label>

</div>

<div class="col-md-3 text-center">

<div pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></div>

<label>center-label = 'percent'</label>

</div>

<div class="col-md-3 text-center">

<div pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></div>

<label>center-label = ' none'</label>

</div>

</div>

<div class="row">

<div class="col-md-12">

<hr>

</div>

</div>

<div class="row">

<div class="col-md-12 text-center">

<label>Custom Tooltip, Legend, Click handling, and Center Label</label><br>

<label><strong>Click on Donut Arc!</strong></label>

<div pf-donut-pct-chart config="custConfig" data="custData"></div>

</div>

</div>

</div>

</div>

</file>

<file name="script.js">

angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {

$scope.configErr = {

'chartId': 'chartErr',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.dataErr = {

'used': '950',

'total': '1000'

};

$scope.configWarn = {

'chartId': 'chartWarn',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.dataWarn = {

'used': '650',

'total': '1000'

};

$scope.configOk = {

'chartId': 'chartOk',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.dataOk = {

'used': '550',

'total': '1000'

};

$scope.configNoThresh = {

'chartId': 'chartNoThresh',

'units': 'GB',

};

$scope.dataNoThresh = {

'used': '750',

'total': '1000'

};

$scope.usedConfig = {

'chartId': 'usedChart',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.usedData = {

'used': '350',

'total': '1000'

};

$scope.usedLabel = "used";

$scope.availConfig = {

'chartId': 'availChart',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.availData = {

'used': '350',

'total': '1000'

};

$scope.availLabel = "available";

$scope.pctConfig = {

'chartId': 'pctChart',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.pctData = {

'used': '350',

'total': '1000'

};

$scope.pctLabel = "percent";

$scope.noneConfig = {

'chartId': 'noneChart',

'units': 'GB',

'thresholds':{'warning':'60','error':'90'}

};

$scope.noneData = {

'used': '350',

'total': '1000'

};

$scope.noLabel = "none";

$scope.custConfig = {

'chartId': 'custChart',

'units': 'MHz',

'thresholds':{'warning':'60','error':'90'},

"legend":{"show":true},

'tooltipFn': function (d) {

return '<span class="donut-tooltip-pf"style="white-space: nowrap;">' +

d[0].value + ' ' + d[0].name +

'</span>';

},

'centerLabelFn': function () {

return $scope.custData.available + " GB";

},

'onClickFn': function (d, i) {

alert("You Clicked On The Donut!");

}

};

$scope.custData = {

'used': '670',

'total': '1000'

};

});

</file>

</example>

*/

angular.module('patternfly.charts').directive('pfDonutPctChart', ["pfUtils", "$timeout", function (pfUtils, $timeout) {

'use strict';

return {

restrict: 'A',

scope: {

config: '=',

data: '=',

centerLabel: '=?'

},

replace: true,

templateUrl: 'charts/donut/donut-pct-chart.html',

controller: ['$scope',

function ($scope) {

var donutTooltip;

$scope.donutChartId = 'donutChart';

if ($scope.config.chartId) {

$scope.donutChartId = $scope.config.chartId + $scope.donutChartId;

}

$scope.updateAvailable = function () {

$scope.data.available = $scope.data.total - $scope.data.used;

};

if ($scope.data.available === undefined) {

$scope.updateAvailable();

}

$scope.getStatusColor = function (used, thresholds) {

var color = '#0088CE';

if (thresholds) {

color = '#3f9c35';

if (used >= thresholds.error) {

color = '#CC0000';

} else if (used >= thresholds.warning) {

color = '#EC7A08';

}

}

return color;

};

$scope.statusDonutColor = function (scope) {

var color, percentUsed;

color = { pattern: [] };

percentUsed = scope.data.used / scope.data.total * 100.0;

color.pattern[0] = $scope.getStatusColor(percentUsed, scope.config.thresholds);

color.pattern[1] = '#D1D1D1';

return color;

};

donutTooltip = function (scope) {

return {

contents: function (d) {

var tooltipHtml;

if (scope.config.tooltipFn) {

tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +

scope.config.tooltipFn(d) +

'</span>';

} else {

tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +

Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name +

'</span>';

}

return tooltipHtml;

}

};

};

$scope.getDonutData = function (scope) {

return {

columns: [

['Used', scope.data.used],

['Available', scope.data.available]

],

type: 'donut',

donut: {

label: {

show: false

}

},