diff --git a/Gruntfile.js b/Gruntfile.js index 8f4e46c6d..5453f14b3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -158,6 +158,16 @@ module.exports = function (grunt) { dest: 'templates/charts.js' } }, + // ng-annotate tries to make the code safe for minification automatically + // by using the Angular long form for dependency injection. + ngAnnotate: { + dist: { + files: [{ + src: 'dist/angular-patternfly.js', + dest: 'dist/angular-patternfly.js' + }] + } + }, uglify: { options: { mangle: false @@ -198,7 +208,7 @@ module.exports = function (grunt) { concatSrc = 'src/**/*.js'; } - grunt.task.run(['clean', 'lint', 'test', 'ngtemplates', 'concat', 'uglify:build', 'cssmin', 'copy', 'ngdocs', 'clean:templates']); + grunt.task.run(['clean', 'lint', 'test', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'cssmin', 'copy', 'ngdocs', 'clean:templates']); }); grunt.registerTask('default', ['build']); diff --git a/dist/angular-patternfly.js b/dist/angular-patternfly.js index 05fcc711d..003b0c5fa 100644 --- a/dist/angular-patternfly.js +++ b/dist/angular-patternfly.js @@ -76,7 +76,7 @@ angular.module('patternfly', [ */ -angular.module('patternfly.autofocus', []).directive('pfFocused', function ($timeout) { +angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", function ($timeout) { 'use strict'; return { @@ -94,7 +94,7 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', function ($tim }); } }; -}); +}]); ;/** * @ngdoc directive * @name patternfly.card:pfCard @@ -256,68 +256,66 @@ angular.module('patternfly.card').directive('pfCard', function () { * @param {expression} config the c3 configuration options for the chart * * @example - - -
-
-
- Total = {{total}}, Used = {{used}}, Available = {{available}} -
- - + + +
+
+ + + Total = {{total}}, Used = {{used}}, Available = {{available}} +
+ + +
+ +
- - -
- + - - -angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { - $scope.used = 950; - $scope.total = 1000; - $scope.available = $scope.total - $scope.used; - - $scope.chartConfig = {"donut": - {"title":"MHz Used", - "label":{"show":false}, - "width":10 - }, - "size":{"height":130}, - "legend":{"show":false}, - "color":{"pattern":["#0088CE","#D1D1D1"]}, - "tooltip":{}, - "data":{"columns":[["Used","950"],["Available",50]], - "type":"donut", - "donut":{ - "label":{"show":false} - }, - "groups":[["used","available"]], - "order":null - } - }; - - $scope.updateAvailable = function (val) { - $scope.available = $scope.total - $scope.used; - } + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { + $scope.used = 950; + $scope.total = 1000; + $scope.available = $scope.total - $scope.used; + + $scope.chartConfig = { + "donut": { + "title":"MHz Used", + "label":{"show":false}, + "width":10 + }, + "size": {"height":130}, + "legend": {"show":false}, + "color": {"pattern":["#0088CE","#D1D1D1"]}, + "tooltip": {}, + "data": {"columns":[["Used","950"],["Available",50]], + "type": "donut", + "donut": { + "label": {"show":false} + }, + "groups": [["used","available"]], + "order":null + } + }; - $scope.submitform = function (val) { - $scope.used = val; - $scope.updateAvailable(); - $scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]]; - }; - }]); - + $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]]; + }; + }); + */ (function (c3) { 'use strict'; - angular.module('patternfly.charts') - .directive('pfC3Chart', ['$timeout', function ($timeout) { - + angular.module('patternfly.charts').directive('pfC3Chart', ["$timeout", function ($timeout) { return { restrict: 'A', scope: { @@ -382,330 +380,328 @@ angular.module( 'patternfly.charts' ) * * @example - - -
- -
-
-
+ + +
-
- Total = {{data.total}}, Used = {{data.used}}, Available = {{data.available}}
- Percent Used = {{(data.used / data.total) * 100;}} %
- Thresholds:
-
- Error:
- Warning:
- Ok: -
-
- {{config.thresholds.error}}% Used (red)
- {{config.thresholds.warning}}% Used (orange)
- Not reached a threshold (blue) +
+
-
-
- -
- - - +
+ Total = {{data.total}}, Used = {{data.used}}, Available = {{data.available}}
+ Percent Used = {{(data.used / data.total) * 100;}} %
+ Thresholds:
+
+ Error:
+ Warning:
+ Ok: +
+
+ {{config.thresholds.error}}% Used (red)
+ {{config.thresholds.warning}}% Used (orange)
+ Not reached a threshold (blue)
- -
-
-
-
+
+
+ +
+ + + +
+
+
-
-
- center-label =
'used' -
-
-
- center-label =
'available' -
-
-
- center-label =
'percent' -
-
-
- center-label =
' none' -
+
+
+
-
-
-
+
+
+ center-label =
'used' +
+
+
+ center-label =
'available' +
+
+
+ center-label =
'percent' +
+
+
+ center-label =
' none' +
+ +
+
+
-
- Custom Tooltip and Center Label -
+
+ Custom Tooltip and Center Label +
+
-
- + - -angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { - $scope.config = { - 'chartId': 'chartA', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { + $scope.config = { + 'chartId': 'chartA', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; - $scope.data = { + $scope.data = { 'used': '950', 'total': '1000' - }; + }; - $scope.newUsed = $scope.data.used; + $scope.newUsed = $scope.data.used; - $scope.$watch('newUsed', function (val) { - $scope.data.used = val; - }); + $scope.$watch('newUsed', function (val) { + $scope.data.used = val; + }); - $scope.usedConfig = { - 'chartId': 'usedChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; + $scope.usedConfig = { + 'chartId': 'usedChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; - $scope.usedData = { + $scope.usedData = { 'used': '350', 'total': '1000' - }; - $scope.availConfig = { - 'chartId': 'availChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; + }; - $scope.availData = { - 'used': '350', - 'total': '1000' - }; - $scope.pctConfig = { - 'chartId': 'pctChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; + $scope.availConfig = { + 'chartId': 'availChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + + $scope.availData = { + 'used': '350', + 'total': '1000' + }; + + $scope.pctConfig = { + 'chartId': 'pctChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; - $scope.pctData = { + $scope.pctData = { 'used': '350', 'total': '1000' - }; - $scope.noneConfig = { - 'chartId': 'noneChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; + }; - $scope.noneData = { + $scope.noneConfig = { + 'chartId': 'noneChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + + $scope.noneData = { 'used': '350', 'total': '1000' - }; - - $scope.custConfig = { - 'chartId': 'custChart', - 'units': 'MHz', - 'thresholds':{'warning':'60','error':'90'}, - "legend":{"show":true}, - 'tooltipFn': function (d) { - return '' + - d[0].value + ' ' + d[0].name + - ''; - }, - 'centerLabelFn': function (scope) { - return '' + - scope.data.available + '' + - '' + - 'Free' + - ''; - } - }; + }; - $scope.custData = { + $scope.custConfig = { + 'chartId': 'custChart', + 'units': 'MHz', + 'thresholds':{'warning':'60','error':'90'}, + "legend":{"show":true}, + 'tooltipFn': function (d) { + return '' + + d[0].value + ' ' + d[0].name + + ''; + }, + 'centerLabelFn': function (scope) { + return '' + scope.data.available + '' + + 'Free'; + } + }; + + $scope.custData = { 'used': '670', 'total': '1000' - }; - }]); - + }; + }); + */ -angular.module('patternfly.charts').directive('pfDonutPctChart', ['c3ChartDefaults', '$timeout', - function (c3ChartDefaults, $timeout) { - 'use strict'; +angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaults", "$timeout", function (c3ChartDefaults, $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; + 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.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; + }; - $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 ($scope.data.available === undefined) { - $scope.updateAvailable(); + if (thresholds) { + if (used >= thresholds.error) { + color = '#CC0000'; + } else if (used >= thresholds.warning) { + color = '#EC7A08'; + } } - $scope.getStatusColor = function (used, thresholds) { - var color = '#0088CE'; + return color; + }; - if (thresholds) { - if (used >= thresholds.error) { - color = '#CC0000'; - } else if (used >= thresholds.warning) { - color = '#EC7A08'; - } - } + $scope.statusDonutColor = function (scope) { + var color, percentUsed; - return color; - }; + 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; + }; - $scope.statusDonutColor = function (scope) { - var color, percentUsed; + donutTooltip = function (scope) { + return { + contents: function (d) { + var tooltipHtml; + + if (scope.config.tooltipFn) { + tooltipHtml = '' + + scope.config.tooltipFn(d) + + ''; + } else { + tooltipHtml = '' + + Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name + + ''; + } - 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; + return tooltipHtml; + } }; + }; - donutTooltip = function (scope) { - return { - contents: function (d) { - var tooltipHtml; - - if (scope.config.tooltipFn) { - tooltipHtml = '' + - scope.config.tooltipFn(d) + - ''; - } else { - tooltipHtml = '' + - Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name + - ''; - } - - return tooltipHtml; + $scope.getDonutData = function (scope) { + return { + columns: [ + ['Used', scope.data.used], + ['Available', scope.data.available] + ], + type: 'donut', + donut: { + label: { + show: false } - }; + }, + groups: [ + ['used', 'available'] + ], + order: null }; + }; - $scope.getDonutData = function (scope) { - return { - columns: [ - ['Used', scope.data.used], - ['Available', scope.data.available] - ], - type: 'donut', - donut: { - label: { - show: false - } - }, - groups: [ - ['used', 'available'] - ], - order: null - }; - }; + $scope.updateAll = function (scope) { + $scope.updateAvailable(); + $scope.config.data = $scope.getDonutData($scope); + $scope.config.color = $scope.statusDonutColor($scope); + $scope.config.tooltip = donutTooltip(scope); + }; - $scope.updateAll = function (scope) { - $scope.updateAvailable(); - $scope.config.data = $scope.getDonutData($scope); - $scope.config.color = $scope.statusDonutColor($scope); - $scope.config.tooltip = donutTooltip(scope); - }; + $scope.config = $.extend(true, c3ChartDefaults.getDefaultDonutConfig(), $scope.config); + $scope.updateAll($scope); + } + ], + link: function (scope, element) { + var setupDonutChartTitle = function () { + $timeout(function () { + var donutChartTitle, bigText, smText; - $scope.config = $.extend(true, c3ChartDefaults.getDefaultDonutConfig(), $scope.config); - $scope.updateAll($scope); - } - ], - link: function (scope, element) { - var setupDonutChartTitle = function () { - $timeout(function () { - var donutChartTitle, bigText, smText; - - donutChartTitle = element[0].querySelector('text.c3-chart-arcs-title'); - if (scope.config.centerLabelFn) { - donutChartTitle.innerHTML = scope.config.centerLabelFn(scope); - } else if (scope.centerLabel === 'none') { - donutChartTitle.innerHTML = ''; - } else { - // default to 'used' info. - bigText = scope.data.used; - smText = scope.config.units + ' Used'; - - if (scope.centerLabel === 'available') { - bigText = scope.data.available; - smText = scope.config.units + ' Available'; - } else if (scope.centerLabel === 'percent') { - bigText = Math.round(scope.data.used / scope.data.total * 100.0) + '%'; - smText = 'of ' + scope.data.total + ' ' + scope.config.units; - } - if (donutChartTitle) { - donutChartTitle.innerHTML = - '' + - bigText + - '' + - '' + - smText + - ''; - } + donutChartTitle = element[0].querySelector('text.c3-chart-arcs-title'); + if (scope.config.centerLabelFn) { + donutChartTitle.innerHTML = scope.config.centerLabelFn(scope); + } else if (scope.centerLabel === 'none') { + donutChartTitle.innerHTML = ''; + } else { + // default to 'used' info. + bigText = scope.data.used; + smText = scope.config.units + ' Used'; + + if (scope.centerLabel === 'available') { + bigText = scope.data.available; + smText = scope.config.units + ' Available'; + } else if (scope.centerLabel === 'percent') { + bigText = Math.round(scope.data.used / scope.data.total * 100.0) + '%'; + smText = 'of ' + scope.data.total + ' ' + scope.config.units; } - }, 300); - }; + if (donutChartTitle) { + donutChartTitle.innerHTML = + '' + + bigText + + '' + + '' + + smText + + ''; + } + } + }, 300); + }; - scope.$watch('config', function () { - scope.updateAll(scope); - setupDonutChartTitle(); - }, true); + scope.$watch('config', function () { + scope.updateAll(scope); + setupDonutChartTitle(); + }, true); - scope.$watch('data', function () { - scope.updateAll(scope); - setupDonutChartTitle(); - }, true); + scope.$watch('data', function () { + scope.updateAll(scope); + setupDonutChartTitle(); + }, true); - scope.$watch('centerLabel', function () { - setupDonutChartTitle(); - }); - } - }; - }]); + scope.$watch('centerLabel', function () { + setupDonutChartTitle(); + }); + } + }; +}]); ;/** * @ngdoc directive * @name patternfly.charts.directive:pfSparklineChart @@ -748,291 +744,289 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ['c3ChartDefaul * @example - - -
-
-
-
-
-
-
-
- -
- - - - -
-
-
-
-
-
- -
- - -
-
-
-
-
-
- -
- -
-
-
-
- + + +
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+ +
+ +
+
+
+
+ +
-
- + - - angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { - $scope.config = { - 'chartId': 'exampleSparkline', - 'tooltipType': 'default' - }; + $scope.config = { + 'chartId': 'exampleSparkline', + 'tooltipType': 'default' + }; - 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))); - } + 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.data = { - 'total': '100', - 'xData': dates, - 'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76'] - }; + $scope.data = { + 'total': '100', + 'xData': dates, + 'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76'] + }; - $scope.custShowXAxis = false; - $scope.custShowYAxis = false; - $scope.custChartHeight = 60; + $scope.custShowXAxis = false; + $scope.custShowYAxis = false; + $scope.custChartHeight = 60; - $scope.addDataPoint = function () { - $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000))); - $scope.data.yData.push(Math.round(Math.random() * 100)); - }; - }]); - + $scope.addDataPoint = function () { + $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000))); + $scope.data.yData.push(Math.round(Math.random() * 100)); + }; + }); + */ -angular.module('patternfly.charts').directive('pfSparklineChart', ['c3ChartDefaults', - function (c3ChartDefaults) { - 'use strict'; - return { - restrict: 'A', - scope: { - config: '=', - chartData: '=', - chartHeight: '=?', - showXAxis: '=?', - showYAxis: '=?' - }, - replace: true, - templateUrl: 'charts/sparkline/sparkline-chart.html', - controller: ['$scope', - function ($scope) { - - // Create an ID for the chart based on the chartId in the config if given - $scope.sparklineChartId = 'sparklineChart'; - if ($scope.config.chartId) { - $scope.sparklineChartId = $scope.config.chartId + $scope.sparklineChartId; - } - - /* - * Convert the config data to C3 Data - */ - $scope.getSparklineData = function (chartData) { - return { - x: chartData.xData[0], - columns: [ - chartData.xData, - chartData.yData - ], - type: 'area' - }; - }; - - $scope.getTooltipTableHTML = function (tipRows) { - return '
' + - ' ' + - ' ' + - tipRows + - ' ' + - '
' + - '
'; - }; - - $scope.sparklineTooltip = function () { - return { - contents: function (d) { - var tipRows; - var percentUsed; - - if ($scope.config.tooltipFn) { - tipRows = $scope.config.tooltipFn(d); - } else { - switch ($scope.config.tooltipType) { - case 'usagePerDay': - percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); - tipRows = - '' + - ' ' + d[0].x.toLocaleDateString() + '' + - '' + - '' + - ' ' + percentUsed + '%:' + '' + - ' ' + d[0].value + ' ' + $scope.config.units + ' ' + d[0].name + '' + - ''; - break; - case 'valuePerDay': - tipRows = - '' + - ' ' + d[0].x.toLocaleDateString() + '' + - ' ' + d[0].value + ' ' + d[0].name + '' + - ''; - break; - case 'percentage': - percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); - tipRows = - '' + - ' ' + percentUsed + '%' + '' + - ''; - break; - default: - tipRows = c3ChartDefaults.getDefaultSparklineTooltip().contents(d); - } - } - return $scope.getTooltipTableHTML(tipRows); - }, - position: function (data, width, height, element) { - var center; - var top; - var chartBox; - var graphOffsetX; - var x; - - try { - center = parseInt(element.getAttribute('x')); - top = parseInt(element.getAttribute('y')); - chartBox = document.querySelector('#' + $scope.sparklineChartId).getBoundingClientRect(); - graphOffsetX = document.querySelector('#' + $scope.sparklineChartId + ' g.c3-axis-y').getBoundingClientRect().right; - x = Math.max(0, center + graphOffsetX - chartBox.left - Math.floor(width / 2)); - - return { - top: top - height, - left: Math.min(x, chartBox.width - width) - }; - } catch (e) { - } - } - }; - }; +angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefaults", function (c3ChartDefaults) { + 'use strict'; + return { + restrict: 'A', + scope: { + config: '=', + chartData: '=', + chartHeight: '=?', + showXAxis: '=?', + showYAxis: '=?' + }, + replace: true, + templateUrl: 'charts/sparkline/sparkline-chart.html', + controller: ['$scope', + function ($scope) { + + // Create an ID for the chart based on the chartId in the config if given + $scope.sparklineChartId = 'sparklineChart'; + if ($scope.config.chartId) { + $scope.sparklineChartId = $scope.config.chartId + $scope.sparklineChartId; + } - /* - * Setup Axis options. Default is to not show either axis. This can be overridden in two ways: - * 1) in the config, setting showAxis to true will show both axes - * 2) in the attributes showXAxis and showYAxis will override the config if set - * - * By default only line and the tick marks are shown, no labels. This is a sparkline and should be used - * only to show a brief idea of trending. This can be overridden by setting the config.axis options per C3 - */ - - if ($scope.showXAxis === undefined) { - $scope.showXAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; - } + /* + * Convert the config data to C3 Data + */ + $scope.getSparklineData = function (chartData) { + return { + x: chartData.xData[0], + columns: [ + chartData.xData, + chartData.yData + ], + type: 'area' + }; + }; - if ($scope.showYAxis === undefined) { - $scope.showYAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; - } + $scope.getTooltipTableHTML = function (tipRows) { + return '
' + + ' ' + + ' ' + + tipRows + + ' ' + + '
' + + '
'; + }; - $scope.defaultConfig = c3ChartDefaults.getDefaultSparklineConfig(); - $scope.defaultConfig.axis = { - x: { - show: $scope.showXAxis === true, - type: 'timeseries', - tick: { - format: function () { - return ''; + $scope.sparklineTooltip = function () { + return { + contents: function (d) { + var tipRows; + var percentUsed; + + if ($scope.config.tooltipFn) { + tipRows = $scope.config.tooltipFn(d); + } else { + switch ($scope.config.tooltipType) { + case 'usagePerDay': + percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); + tipRows = + '' + + ' ' + d[0].x.toLocaleDateString() + '' + + '' + + '' + + ' ' + percentUsed + '%:' + '' + + ' ' + d[0].value + ' ' + $scope.config.units + ' ' + d[0].name + '' + + ''; + break; + case 'valuePerDay': + tipRows = + '' + + ' ' + d[0].x.toLocaleDateString() + '' + + ' ' + d[0].value + ' ' + d[0].name + '' + + ''; + break; + case 'percentage': + percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); + tipRows = + '' + + ' ' + percentUsed + '%' + '' + + ''; + break; + default: + tipRows = c3ChartDefaults.getDefaultSparklineTooltip().contents(d); } } + return $scope.getTooltipTableHTML(tipRows); }, - y: { - show: $scope.showYAxis === true, - tick: { - format: function () { - return ''; - } + position: function (data, width, height, element) { + var center; + var top; + var chartBox; + var graphOffsetX; + var x; + + try { + center = parseInt(element.getAttribute('x')); + top = parseInt(element.getAttribute('y')); + chartBox = document.querySelector('#' + $scope.sparklineChartId).getBoundingClientRect(); + graphOffsetX = document.querySelector('#' + $scope.sparklineChartId + ' g.c3-axis-y').getBoundingClientRect().right; + x = Math.max(0, center + graphOffsetX - chartBox.left - Math.floor(width / 2)); + + return { + top: top - height, + left: Math.min(x, chartBox.width - width) + }; + } catch (e) { } } }; + }; - // Setup the default configuration - $scope.defaultConfig.tooltip = $scope.sparklineTooltip(); - if ($scope.chartHeight) { - $scope.defaultConfig.size.height = $scope.chartHeight; - } - $scope.defaultConfig.units = ''; + /* + * Setup Axis options. Default is to not show either axis. This can be overridden in two ways: + * 1) in the config, setting showAxis to true will show both axes + * 2) in the attributes showXAxis and showYAxis will override the config if set + * + * By default only line and the tick marks are shown, no labels. This is a sparkline and should be used + * only to show a brief idea of trending. This can be overridden by setting the config.axis options per C3 + */ + + if ($scope.showXAxis === undefined) { + $scope.showXAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; + } - // Override defaults with callers specifications - $scope.config = $.extend(true, angular.copy($scope.defaultConfig), $scope.config); + if ($scope.showYAxis === undefined) { + $scope.showYAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; + } + + $scope.defaultConfig = c3ChartDefaults.getDefaultSparklineConfig(); + $scope.defaultConfig.axis = { + x: { + show: $scope.showXAxis === true, + type: 'timeseries', + tick: { + format: function () { + return ''; + } + } + }, + y: { + show: $scope.showYAxis === true, + tick: { + format: function () { + return ''; + } + } + } + }; - // Convert the given data to C3 chart format - $scope.config.data = $scope.getSparklineData($scope.chartData); + // Setup the default configuration + $scope.defaultConfig.tooltip = $scope.sparklineTooltip(); + if ($scope.chartHeight) { + $scope.defaultConfig.size.height = $scope.chartHeight; } - ], + $scope.defaultConfig.units = ''; - link: function (scope) { - scope.$watch('config', function () { - scope.config = $.extend(true, angular.copy(scope.defaultConfig), scope.config); - }, true); - scope.$watch('chartHeight', function () { - scope.config.size.height = scope.chartHeight; - }); - scope.$watch('showXAxis', function () { - scope.config.axis.x.show = scope.showXAxis === true; - }); - scope.$watch('showYAxis', function () { - scope.config.axis.y.show = scope.showYAxis === true; - }); - scope.$watch('chartData', function () { - scope.config.data = scope.getSparklineData(scope.chartData); - }, true); + // Override defaults with callers specifications + $scope.config = $.extend(true, angular.copy($scope.defaultConfig), $scope.config); + + // Convert the given data to C3 chart format + $scope.config.data = $scope.getSparklineData($scope.chartData); } - }; - } -]); + ], + + link: function (scope) { + scope.$watch('config', function () { + scope.config = $.extend(true, angular.copy(scope.defaultConfig), scope.config); + }, true); + scope.$watch('chartHeight', function () { + scope.config.size.height = scope.chartHeight; + }); + scope.$watch('showXAxis', function () { + scope.config.axis.x.show = scope.showXAxis === true; + }); + scope.$watch('showYAxis', function () { + scope.config.axis.y.show = scope.showYAxis === true; + }); + scope.$watch('chartData', function () { + scope.config.data = scope.getSparklineData(scope.chartData); + }, true); + } + }; +}] +); ;/** * @ngdoc directive * @name patternfly.charts.directive:pfUtilizationChart @@ -1075,101 +1069,99 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ['c3ChartDefau * @example - - -
-
-
-
-
-
-
-
-
- -
- - - - + + +
+
+
- -
-
- -
+
+
+
+ +
+ +
-
- -
-
-
+
+ +
+
+ +
+ + + + +
+
+
+
+
+
+ +
+ + +
+
+
+
+
- +
- - +
-
-
-
-
- -
-
-
-
-
- +
+ +
-
- - - - angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { + + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { $scope.config = { title: 'Memory', units: 'GB' @@ -1210,8 +1202,8 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ['c3ChartDefau $scope.data.xData.push(newDate); $scope.data.yData.push(newData); }; - }]); - + }); + */ angular.module('patternfly.charts').directive('pfUtilizationChart', @@ -1275,7 +1267,6 @@ angular.module('patternfly.charts').directive('pfUtilizationChart', * * @example -
@@ -1287,19 +1278,17 @@ angular.module('patternfly.charts').directive('pfUtilizationChart', + angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) { + $scope.setToday = function () { + $scope.date = new Date(); + } - angular.module( 'patternfly.form' ) - .controller( 'FormDemoCtrl', ['$scope', function( $scope ) { - $scope.setToday = function () { - $scope.date = new Date(); - } - - $scope.options = { - autoclose: true, - todayBtn: 'linked', - todayHighlight: true - }; - }]); + $scope.options = { + autoclose: true, + todayBtn: 'linked', + todayHighlight: true + }; + }); */ @@ -1372,8 +1361,7 @@ angular.module('patternfly.form').directive('pfDatepicker', function () { - angular.module( 'patternfly.form' ) - .controller( 'FormButtonCtrl', ['$scope', '$timeout', function( $scope, $timeout ) { + angular.module( 'patternfly.form' ).controller( 'FormButtonCtrl', function( $scope, $timeout ) { $scope.status = 'Not yet Saved' $scope.working = false; @@ -1390,7 +1378,7 @@ angular.module('patternfly.form').directive('pfDatepicker', function () { $scope.status = 'cancelled'; $scope.input = null; }; - }]); + }); */ @@ -1465,13 +1453,12 @@ angular.module('patternfly.form').directive('pfFormButtons', function () { - angular.module( 'patternfly.form' ) - .controller( 'FormDemoCtrl', ['$scope', function( $scope ) { - $scope.item = { - name: 'Homer Simpson', - description: 'I like donuts and Duff. Doh!' - }; - }]); + angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) { + $scope.item = { + name: 'Homer Simpson', + description: 'I like donuts and Duff. Doh!' + }; + }); */ @@ -1577,51 +1564,50 @@ angular.module('patternfly.form').directive('pfFormGroup', function () { * @example - -
- + +
+ - -
- -
- + +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
-
- +
+
+ +
-
- -
- + +
+ - - angular.module( 'patternfly.notification' ) - .controller( 'NotificationDemoCtrl', ['$scope', 'Notifications', function( $scope, Notifications ) { + + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) { - var typeMap = { 'Info': Notifications.info, - 'Success': Notifications.success, - 'Warning': Notifications.warn, - 'Danger': Notifications.error }; + var typeMap = { 'Info': Notifications.info, + 'Success': Notifications.success, + 'Warning': Notifications.warn, + 'Danger': Notifications.error }; - $scope.types = Object.keys(typeMap); + $scope.types = Object.keys(typeMap); - $scope.type = $scope.types[0]; - $scope.message = 'Default notification message.'; + $scope.type = $scope.types[0]; + $scope.message = 'Default notification message.'; - $scope.notify = function () { - typeMap[$scope.type]($scope.message); - } - }]); - + $scope.notify = function () { + typeMap[$scope.type]($scope.message); + } + }); + */ @@ -1740,56 +1726,54 @@ angular.module('patternfly.notification', []).provider('Notifications', function * @example - -
+ +
- - + + -
-
- -
- + +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
- -
- - - + +
+ - angular.module( 'patternfly.notification' ) - .controller( 'NotificationDemoCtrl', ['$scope', 'Notifications', function( $scope, Notifications ) { - $scope.types = ['success','info','danger', 'warning']; - $scope.type = $scope.types[0]; - $scope.isPersistent = false; + + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) { + $scope.types = ['success','info','danger', 'warning']; + $scope.type = $scope.types[0]; + $scope.isPersistent = false; - $scope.header = 'Default Header.'; - $scope.message = 'Default Message.'; - }]); - + $scope.header = 'Default Header.'; + $scope.message = 'Default Message.'; + }); + */ @@ -1819,53 +1803,52 @@ angular.module( 'patternfly.notification' ).directive('pfNotification', function * @example - -
+ +
- + -
-
- -
- + +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
-
- +
+
+ +
-
- -
- + +
+ - - angular.module( 'patternfly.notification' ) - .controller( 'NotificationDemoCtrl', ['$scope', 'Notifications', function( $scope, Notifications ) { - $scope.message = 'Default Message.'; + + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) { + $scope.message = 'Default Message.'; - var typeMap = { 'Info': Notifications.info, - 'Success': Notifications.success, - 'Warning': Notifications.warn, - 'Danger': Notifications.error }; + var typeMap = { 'Info': Notifications.info, + 'Success': Notifications.success, + 'Warning': Notifications.warn, + 'Danger': Notifications.error }; - $scope.types = Object.keys(typeMap); + $scope.types = Object.keys(typeMap); - $scope.type = $scope.types[0]; - $scope.message = 'Default notification message.'; + $scope.type = $scope.types[0]; + $scope.message = 'Default notification message.'; - $scope.notify = function () { - typeMap[$scope.type]($scope.message); - } - }]); - + $scope.notify = function () { + typeMap[$scope.type]($scope.message); + } + }); + */ @@ -1893,56 +1876,55 @@ angular.module( 'patternfly.notification' ).directive('pfNotificationList', func * @example - -
+ +
-
-
- -
- -
-
+ +
+ +
+ +
+
-
- -
- -
-
+
+ +
+ +
+
-
- -
- -
-
+
+ +
+ +
+
-
+ -

Your preferred pet is {{pet}}.

+

Your preferred pet is {{pet}}.

-
- +
+ - - angular.module( 'patternfly.select' ) - .controller( 'SelectDemoCtrl', ['$scope', function( $scope ) { - $scope.drinks = ['tea', 'coffee', 'water']; - $scope.pets = ['Dog', 'Cat', 'Chicken']; - $scope.pet = $scope.pets[0]; - }]); - + + angular.module( 'patternfly.select' ).controller( 'SelectDemoCtrl', function( $scope ) { + $scope.drinks = ['tea', 'coffee', 'water']; + $scope.pets = ['Dog', 'Cat', 'Chicken']; + $scope.pet = $scope.pets[0]; + }); + */ -angular.module('patternfly.select', []).directive('pfSelect', function ($timeout) { +angular.module('patternfly.select', []).directive('pfSelect', ["$timeout", function ($timeout) { 'use strict'; return { @@ -1977,7 +1959,7 @@ angular.module('patternfly.select', []).directive('pfSelect', function ($timeout }); } }; -}); +}]); ;/** * @ngdoc directive * @name patternfly.validation:pfValidation @@ -1993,64 +1975,63 @@ angular.module('patternfly.select', []).directive('pfSelect', function ($timeout * @example - -
-
+ +
+ -
- -
- - The value you typed is not a number. +
+ +
+ + The value you typed is not a number. +
-
-
- -
- - The value you typed is not a number. +
+ +
+ + The value you typed is not a number. +
-
-
- -
- - The value you typed is not a number. +
+ +
+ + The value you typed is not a number. +
-
-
- -
- +
+ +
+ +
+
- -
- + - - angular.module( 'patternfly.validation' ) - .controller( 'ValidationDemoCtrl', ['$scope', function( $scope ) { - $scope.myValue = "Change this value to be a number"; - $scope.myValueValid = 42; - $scope.isValidationDisabled = false; + + angular.module( 'patternfly.validation' ).controller( 'ValidationDemoCtrl', function( $scope ) { + $scope.myValue = "Change this value to be a number"; + $scope.myValueValid = 42; + $scope.isValidationDisabled = false; - $scope.isNumber = function (value) { - if (isNaN(value)) { - return false; - } + $scope.isNumber = function (value) { + if (isNaN(value)) { + return false; + } - return true; - } - }]); - + return true; + } + }); + */ -angular.module('patternfly.validation', []).directive('pfValidation', function ($timeout) { +angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout", function ($timeout) { 'use strict'; return { @@ -2145,7 +2126,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function ( } } }; -}); +}]); ;angular.module('patternfly.card').run(['$templateCache', function($templateCache) { 'use strict'; diff --git a/dist/angular-patternfly.min.js b/dist/angular-patternfly.min.js index f097c05c8..cf77e615a 100644 --- a/dist/angular-patternfly.min.js +++ b/dist/angular-patternfly.min.js @@ -1 +1 @@ -angular.module("patternfly.card",[]),angular.module("patternfly.charts",[]),angular.module("patternfly.form",[]),angular.module("patternfly",["patternfly.autofocus","patternfly.card","patternfly.form","patternfly.notification","patternfly.select","patternfly.validation"]),angular.module("patternfly.autofocus",[]).directive("pfFocused",function($timeout){"use strict";return{restrict:"A",link:function(scope,element,attrs){scope.$watch(attrs.pfFocused,function(newValue){$timeout(function(){newValue&&(element[0].focus(),element[0].select&&element[0].select())})})}}}),angular.module("patternfly.card").directive("pfCard",function(){"use strict";return{restrict:"A",transclude:!0,templateUrl:"card/basic/card.html",scope:{headTitle:"@",subTitle:"@?",showTopBorder:"@?"}}}),function(){"use strict";angular.module("patternfly.charts").constant("c3ChartDefaults",{getDefaultDonut:function(title){return{title:title,label:{show:!1},width:10}},getDefaultDonutSize:function(){return{height:130}},getDefaultDonutColor:function(){return{pattern:["#0088CE","#D1D1D1"]}},getDefaultDonutTooltip:function(){return{show:!1}},getDefaultDonutLegend:function(){return{show:!1}},getDefaultDonutConfig:function(title){return{donut:this.getDefaultDonut(title),size:this.getDefaultDonutSize(),legend:this.getDefaultDonutLegend(),color:this.getDefaultDonutColor(),tooltip:this.getDefaultDonutTooltip()}},getDefaultSparklineArea:function(){return{zerobased:!0}},getDefaultSparklineSize:function(){return{height:60}},getDefaultSparklineAxis:function(){return{x:{show:!1},y:{show:!1}}},getDefaultSparklineColor:function(){return{pattern:["#0088ce","#00659c","#3f9c35","#ec7a08","#cc0000"]}},getDefaultSparklineLegend:function(){return{show:!1}},getDefaultSparklinePoint:function(){return{r:1,focus:{expand:{r:4}}}},getDefaultSparklineTooltip:function(){return{contents:function(d){return''+d[0].value+" "+d[0].name+""}}},getDefaultSparklineConfig:function(){return{area:this.getDefaultSparklineArea(),size:this.getDefaultSparklineSize(),axis:this.getDefaultSparklineAxis(),color:this.getDefaultSparklineColor(),legend:this.getDefaultSparklineLegend(),point:this.getDefaultSparklinePoint(),tooltip:this.getDefaultSparklineTooltip()}}})}(),function(c3){"use strict";angular.module("patternfly.charts").directive("pfC3Chart",["$timeout",function($timeout){return{restrict:"A",scope:{config:"="},template:'
',replace:!0,link:function(scope,element,attrs){scope.$watch("config",function(){$timeout(function(){var chartData=scope.config;chartData.bindto="#"+attrs.id,c3.generate(chartData)})},!0)}}}])}(c3),angular.module("patternfly.charts").directive("pfDonutPctChart",["c3ChartDefaults","$timeout",function(c3ChartDefaults,$timeout){"use strict";return{restrict:"A",scope:{config:"=",data:"=",centerLabel:"=?"},replace:!0,templateUrl:"charts/donut/donut-pct-chart.html",controller:["$scope",function($scope){var donutTooltip;$scope.donutChartId="donutChart",$scope.config.chartId&&($scope.donutChartId=$scope.config.chartId+$scope.donutChartId),$scope.updateAvailable=function(){$scope.data.available=$scope.data.total-$scope.data.used},void 0===$scope.data.available&&$scope.updateAvailable(),$scope.getStatusColor=function(used,thresholds){var color="#0088CE";return thresholds&&(used>=thresholds.error?color="#CC0000":used>=thresholds.warning&&(color="#EC7A08")),color},$scope.statusDonutColor=function(scope){var color,percentUsed;return color={pattern:[]},percentUsed=scope.data.used/scope.data.total*100,color.pattern[0]=$scope.getStatusColor(percentUsed,scope.config.thresholds),color.pattern[1]="#D1D1D1",color},donutTooltip=function(scope){return{contents:function(d){var tooltipHtml;return tooltipHtml=scope.config.tooltipFn?''+scope.config.tooltipFn(d)+"":''+Math.round(100*d[0].ratio)+"% "+$scope.config.units+" "+d[0].name+""}}},$scope.getDonutData=function(scope){return{columns:[["Used",scope.data.used],["Available",scope.data.available]],type:"donut",donut:{label:{show:!1}},groups:[["used","available"]],order:null}},$scope.updateAll=function(scope){$scope.updateAvailable(),$scope.config.data=$scope.getDonutData($scope),$scope.config.color=$scope.statusDonutColor($scope),$scope.config.tooltip=donutTooltip(scope)},$scope.config=$.extend(!0,c3ChartDefaults.getDefaultDonutConfig(),$scope.config),$scope.updateAll($scope)}],link:function(scope,element){var setupDonutChartTitle=function(){$timeout(function(){var donutChartTitle,bigText,smText;donutChartTitle=element[0].querySelector("text.c3-chart-arcs-title"),scope.config.centerLabelFn?donutChartTitle.innerHTML=scope.config.centerLabelFn(scope):"none"===scope.centerLabel?donutChartTitle.innerHTML="":(bigText=scope.data.used,smText=scope.config.units+" Used","available"===scope.centerLabel?(bigText=scope.data.available,smText=scope.config.units+" Available"):"percent"===scope.centerLabel&&(bigText=Math.round(scope.data.used/scope.data.total*100)+"%",smText="of "+scope.data.total+" "+scope.config.units),donutChartTitle&&(donutChartTitle.innerHTML=''+bigText+''+smText+""))},300)};scope.$watch("config",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("data",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("centerLabel",function(){setupDonutChartTitle()})}}}]),angular.module("patternfly.charts").directive("pfSparklineChart",["c3ChartDefaults",function(c3ChartDefaults){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/sparkline/sparkline-chart.html",controller:["$scope",function($scope){$scope.sparklineChartId="sparklineChart",$scope.config.chartId&&($scope.sparklineChartId=$scope.config.chartId+$scope.sparklineChartId),$scope.getSparklineData=function(chartData){return{x:chartData.xData[0],columns:[chartData.xData,chartData.yData],type:"area"}},$scope.getTooltipTableHTML=function(tipRows){return'
'+tipRows+"
"},$scope.sparklineTooltip=function(){return{contents:function(d){var tipRows,percentUsed;if($scope.config.tooltipFn)tipRows=$scope.config.tooltipFn(d);else switch($scope.config.tooltipType){case"usagePerDay":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+d[0].x.toLocaleDateString()+' '+percentUsed+'%: '+d[0].value+" "+$scope.config.units+" "+d[0].name+"";break;case"valuePerDay":tipRows=' '+d[0].x.toLocaleDateString()+' '+d[0].value+" "+d[0].name+"";break;case"percentage":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+percentUsed+"%";break;default:tipRows=c3ChartDefaults.getDefaultSparklineTooltip().contents(d)}return $scope.getTooltipTableHTML(tipRows)},position:function(data,width,height,element){var center,top,chartBox,graphOffsetX,x;try{return center=parseInt(element.getAttribute("x")),top=parseInt(element.getAttribute("y")),chartBox=document.querySelector("#"+$scope.sparklineChartId).getBoundingClientRect(),graphOffsetX=document.querySelector("#"+$scope.sparklineChartId+" g.c3-axis-y").getBoundingClientRect().right,x=Math.max(0,center+graphOffsetX-chartBox.left-Math.floor(width/2)),{top:top-height,left:Math.min(x,chartBox.width-width)}}catch(e){}}}},void 0===$scope.showXAxis&&($scope.showXAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),void 0===$scope.showYAxis&&($scope.showYAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),$scope.defaultConfig=c3ChartDefaults.getDefaultSparklineConfig(),$scope.defaultConfig.axis={x:{show:$scope.showXAxis===!0,type:"timeseries",tick:{format:function(){return""}}},y:{show:$scope.showYAxis===!0,tick:{format:function(){return""}}}},$scope.defaultConfig.tooltip=$scope.sparklineTooltip(),$scope.chartHeight&&($scope.defaultConfig.size.height=$scope.chartHeight),$scope.defaultConfig.units="",$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.data=$scope.getSparklineData($scope.chartData)}],link:function(scope){scope.$watch("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config)},!0),scope.$watch("chartHeight",function(){scope.config.size.height=scope.chartHeight}),scope.$watch("showXAxis",function(){scope.config.axis.x.show=scope.showXAxis===!0}),scope.$watch("showYAxis",function(){scope.config.axis.y.show=scope.showYAxis===!0}),scope.$watch("chartData",function(){scope.config.data=scope.getSparklineData(scope.chartData)},!0)}}}]),angular.module("patternfly.charts").directive("pfUtilizationChart",function(){"use strict";return{restrict:"A",scope:{chartData:"=",config:"=",centerLabel:"=?",donutConfig:"=",sparklineConfig:"=",sparklineChartHeight:"=?",showSparklineXAxis:"=?",showSparklineYAxis:"=?"},replace:!0,templateUrl:"charts/utilization/utilization-chart.html",controller:["$scope",function($scope){void 0===$scope.centerLabel&&($scope.centerLabel="used"),void 0===$scope.donutConfig.units&&($scope.donutConfig.units=$scope.config.units),void 0===$scope.chartData.available&&($scope.chartData.available=$scope.chartData.total-$scope.chartData.used),$scope.config.units=$scope.config.units||$scope.units}],link:function(scope,element){var setupCurrentValues=function(){"available"===scope.centerLabel?(scope.currentValue=scope.chartData.used,scope.currentText="Used"):(scope.currentValue=scope.chartData.total-scope.chartData.used,scope.currentText="Available")};scope.$watch("centerLabel",function(){setupCurrentValues()})}}}),angular.module("patternfly.form").directive("pfDatepicker",function(){"use strict";return{replace:!0,restrict:"A",require:"^form",templateUrl:"form/datepicker/datepicker.html",scope:{options:"=",date:"="},link:function($scope,element){element.datepicker($scope.options),element.datepicker("update",$scope.date),element.datepicker($scope.date).on("changeDate",function(elem){$scope.$apply(function(){$scope.date=elem.date})}),$scope.$watch("date",function(newValue,oldValue){oldValue!==newValue&&element.datepicker("update",newValue)})}}}),angular.module("patternfly.form").directive("pfFormButtons",function(){"use strict";return{replace:!0,require:"^form",templateUrl:"form/form-buttons/form-buttons.html",scope:{pfHandleCancel:"&pfOnCancel",pfHandleSave:"&pfOnSave",pfWorking:"=",pfButtonContainerClass:"@"},link:function(scope,iElement,iAttrs,controller){void 0===scope.pfWorking&&(scope.pfWorking=!1),scope.isInvalid=function(){var invalid=controller.$invalid;return angular.forEach(controller,function(value){value&&value.$error&&value.$error.server&&(invalid=!1)}),invalid}}}}),angular.module("patternfly.form").directive("pfFormGroup",function(){"use strict";function getInput(element){var input=element.find("table");return 0===input.length&&(input=element.find("input"),0===input.length&&(input=element.find("select"),0===input.length&&(input=element.find("textarea")))),input}return{transclude:!0,replace:!0,require:"^form",templateUrl:"form/form-group/form-group.html",scope:{pfLabel:"@",pfField:"@",pfLabelClass:"@",pfInputClass:"@"},link:function(scope,iElement,iAttrs,controller){var field,input=getInput(iElement),type=input.attr("type");iAttrs.pfLabelClass||(iAttrs.pfLabelClass="col-sm-2"),iAttrs.pfInputClass||(iAttrs.pfInputClass="col-sm-5"),scope.pfField||(scope.pfField=input.attr("id")),field=scope.pfField,-1===["checkbox","radio","time"].indexOf(type)&&input.addClass("form-control"),input.attr("required")&&iElement.addClass("required"),controller[field]&&(scope.error=controller[field].$error),scope.hasErrors=function(){return controller[field]&&controller[field].$invalid&&controller[field].$dirty}}}}),angular.module("patternfly.notification",[]).provider("Notifications",function(){"use strict";this.delay=5e3,this.verbose=!0,this.notifications={},this.persist={error:!0,httpError:!0},this.setDelay=function(delay){return this.delay=delay,this},this.setVerbose=function(verbose){return this.verbose=verbose,this},this.setPersist=function(persist){this.persist=persist},this.$get=["$rootScope","$timeout","$log",function($rootScope,$timeout,$log){function createNotifyMethod(mode){return function(message){notifications.message(modes[mode].type,modes[mode].header,message,persist[mode]),verbose&&$log[modes[mode].log](message)}}var delay=this.delay,notifications=this.notifications,verbose=this.verbose,persist=this.persist,scheduleMessagePop=function(){$timeout(function(){var i;for(i=0;i<$rootScope.notifications.data.length;i++)$rootScope.notifications.data[i].isPersistent||$rootScope.notifications.data.splice(i,1)},delay)},modes={info:{type:"info",header:"Info!",log:"info"},success:{type:"success",header:"Success!",log:"info"},error:{type:"danger",header:"Error!",log:"error"},warn:{type:"warning",header:"Warning!",log:"warn"}};return $rootScope.notifications={},$rootScope.notifications.data=[],$rootScope.notifications.remove=function(index){$rootScope.notifications.data.splice(index,1)},$rootScope.notifications||($rootScope.notifications.data=[]),notifications.message=function(type,header,message,isPersistent){$rootScope.notifications.data.push({type:type,header:header,message:message,isPersistent:isPersistent}),scheduleMessagePop()},angular.forEach(modes,function(mode,index){notifications[index]=createNotifyMethod(index)}),notifications.httpError=function(message,httpResponse){message+=" ("+(httpResponse.data.message||httpResponse.data.cause||httpResponse.data.cause||httpResponse.data.errorMessage)+")",notifications.message("danger","Error!",message,persist.httpError),verbose&&$log.error(message)},notifications}]}),angular.module("patternfly.notification").directive("pfNotification",function(){"use strict";return{scope:{pfNotificationType:"=",pfNotificationMessage:"=",pfNotificationHeader:"=",pfNotificationPersistent:"=",pfNotificationIndex:"="},restrict:"E",templateUrl:"notification/notification.html"}}),angular.module("patternfly.notification").directive("pfNotificationList",function(){"use strict";return{restrict:"E",templateUrl:"notification/notification-list.html"}}),angular.module("patternfly.select",[]).directive("pfSelect",function($timeout){"use strict";return{restrict:"A",require:"?ngModel",scope:{selectPickerOptions:"=pfSelect"},link:function(scope,element,attrs,ngModel){var optionCollectionList,optionCollection,$render=ngModel.$render;element.selectpicker(scope.selectPickerOptions),ngModel.$render=function(){$render.apply(this,arguments),$timeout(function(){element.selectpicker("refresh")},0,!1)},attrs.ngOptions&&(optionCollectionList=attrs.ngOptions.split("in "),optionCollection=optionCollectionList[optionCollectionList.length-1],scope.$watchCollection(optionCollection,function(){element.selectpicker("refresh")})),attrs.$observe("disabled",function(){element.selectpicker("refresh")})}}}),angular.module("patternfly.validation",[]).directive("pfValidation",function($timeout){"use strict";return{restrict:"A",require:"ngModel",scope:{pfValidation:"&",pfValidationDisabled:"="},link:function(scope,element,attrs,ctrl){function validate(){var valid,val=scope.inputCtrl.$modelValue,valFunc=scope.pfValidation({input:val});attrs.pfValidation||(valFunc=!0),valid=!val||valFunc||""===val,toggleErrorClass(scope.valEnabled&&!valid?!0:!1)}function toggleErrorClass(add){var messageElement=element.next(),parentElement=element.parent(),hasErrorM=parentElement.hasClass("has-error"),wasHidden=messageElement.hasClass("ng-hide");scope.inputCtrl.$setValidity("pf-validation",!add),add&&(hasErrorM||parentElement.addClass("has-error"),wasHidden&&messageElement.removeClass("ng-hide")),add||(hasErrorM&&parentElement.removeClass("has-error"),wasHidden||messageElement.addClass("ng-hide"))}scope.inputCtrl=ctrl,scope.valEnabled=!attrs.pfValidationDisabled,scope.$watch("pfValidationDisabled",function(newVal){scope.valEnabled=!newVal,newVal?(scope.inputCtrl.$setValidity("pfValidation",!0),toggleErrorClass(!1)):validate()}),attrs.pfValidation?$timeout(function(){validate()},0):!scope.inputCtrl.$valid&&scope.inputCtrl.$dirty&&toggleErrorClass(!0),scope.$watch("inputCtrl.$valid",function(isValid){toggleErrorClass(isValid?!1:!0)}),scope.$watch("inputCtrl.$modelValue",function(){validate()})}}}),angular.module("patternfly.card").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("card/basic/card.html","

{{headTitle}}

{{subTitle}}
")}]),angular.module("patternfly.charts").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("charts/donut/donut-pct-chart.html","
"),$templateCache.put("charts/sparkline/sparkline-chart.html","
"),$templateCache.put("charts/utilization/utilization-chart.html",'
{{config.title}}
{{currentValue}}
{{currentText}}
of {{chartData.total}} {{config.units}}
{{legendLeftText}} {{legendRightText}}
')}]),angular.module("patternfly.form").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("form/datepicker/datepicker.html",'
'),$templateCache.put("form/form-buttons/form-buttons.html",'
'),$templateCache.put("form/form-group/form-group.html",'
  • {{ message }}
')}]),angular.module("patternfly.notification").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("notification/notification-list.html",'
'),$templateCache.put("notification/notification.html",'
{{pfNotificationHeader}} {{pfNotificationMessage}}
')}]); \ No newline at end of file +angular.module("patternfly.card",[]),angular.module("patternfly.charts",[]),angular.module("patternfly.form",[]),angular.module("patternfly",["patternfly.autofocus","patternfly.card","patternfly.form","patternfly.notification","patternfly.select","patternfly.validation"]),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(){newValue&&(element[0].focus(),element[0].select&&element[0].select())})})}}}]),angular.module("patternfly.card").directive("pfCard",function(){"use strict";return{restrict:"A",transclude:!0,templateUrl:"card/basic/card.html",scope:{headTitle:"@",subTitle:"@?",showTopBorder:"@?"}}}),function(){"use strict";angular.module("patternfly.charts").constant("c3ChartDefaults",{getDefaultDonut:function(title){return{title:title,label:{show:!1},width:10}},getDefaultDonutSize:function(){return{height:130}},getDefaultDonutColor:function(){return{pattern:["#0088CE","#D1D1D1"]}},getDefaultDonutTooltip:function(){return{show:!1}},getDefaultDonutLegend:function(){return{show:!1}},getDefaultDonutConfig:function(title){return{donut:this.getDefaultDonut(title),size:this.getDefaultDonutSize(),legend:this.getDefaultDonutLegend(),color:this.getDefaultDonutColor(),tooltip:this.getDefaultDonutTooltip()}},getDefaultSparklineArea:function(){return{zerobased:!0}},getDefaultSparklineSize:function(){return{height:60}},getDefaultSparklineAxis:function(){return{x:{show:!1},y:{show:!1}}},getDefaultSparklineColor:function(){return{pattern:["#0088ce","#00659c","#3f9c35","#ec7a08","#cc0000"]}},getDefaultSparklineLegend:function(){return{show:!1}},getDefaultSparklinePoint:function(){return{r:1,focus:{expand:{r:4}}}},getDefaultSparklineTooltip:function(){return{contents:function(d){return''+d[0].value+" "+d[0].name+""}}},getDefaultSparklineConfig:function(){return{area:this.getDefaultSparklineArea(),size:this.getDefaultSparklineSize(),axis:this.getDefaultSparklineAxis(),color:this.getDefaultSparklineColor(),legend:this.getDefaultSparklineLegend(),point:this.getDefaultSparklinePoint(),tooltip:this.getDefaultSparklineTooltip()}}})}(),function(c3){"use strict";angular.module("patternfly.charts").directive("pfC3Chart",["$timeout",function($timeout){return{restrict:"A",scope:{config:"="},template:'
',replace:!0,link:function(scope,element,attrs){scope.$watch("config",function(){$timeout(function(){var chartData=scope.config;chartData.bindto="#"+attrs.id,c3.generate(chartData)})},!0)}}}])}(c3),angular.module("patternfly.charts").directive("pfDonutPctChart",["c3ChartDefaults","$timeout",function(c3ChartDefaults,$timeout){"use strict";return{restrict:"A",scope:{config:"=",data:"=",centerLabel:"=?"},replace:!0,templateUrl:"charts/donut/donut-pct-chart.html",controller:["$scope",function($scope){var donutTooltip;$scope.donutChartId="donutChart",$scope.config.chartId&&($scope.donutChartId=$scope.config.chartId+$scope.donutChartId),$scope.updateAvailable=function(){$scope.data.available=$scope.data.total-$scope.data.used},void 0===$scope.data.available&&$scope.updateAvailable(),$scope.getStatusColor=function(used,thresholds){var color="#0088CE";return thresholds&&(used>=thresholds.error?color="#CC0000":used>=thresholds.warning&&(color="#EC7A08")),color},$scope.statusDonutColor=function(scope){var color,percentUsed;return color={pattern:[]},percentUsed=scope.data.used/scope.data.total*100,color.pattern[0]=$scope.getStatusColor(percentUsed,scope.config.thresholds),color.pattern[1]="#D1D1D1",color},donutTooltip=function(scope){return{contents:function(d){var tooltipHtml;return tooltipHtml=scope.config.tooltipFn?''+scope.config.tooltipFn(d)+"":''+Math.round(100*d[0].ratio)+"% "+$scope.config.units+" "+d[0].name+""}}},$scope.getDonutData=function(scope){return{columns:[["Used",scope.data.used],["Available",scope.data.available]],type:"donut",donut:{label:{show:!1}},groups:[["used","available"]],order:null}},$scope.updateAll=function(scope){$scope.updateAvailable(),$scope.config.data=$scope.getDonutData($scope),$scope.config.color=$scope.statusDonutColor($scope),$scope.config.tooltip=donutTooltip(scope)},$scope.config=$.extend(!0,c3ChartDefaults.getDefaultDonutConfig(),$scope.config),$scope.updateAll($scope)}],link:function(scope,element){var setupDonutChartTitle=function(){$timeout(function(){var donutChartTitle,bigText,smText;donutChartTitle=element[0].querySelector("text.c3-chart-arcs-title"),scope.config.centerLabelFn?donutChartTitle.innerHTML=scope.config.centerLabelFn(scope):"none"===scope.centerLabel?donutChartTitle.innerHTML="":(bigText=scope.data.used,smText=scope.config.units+" Used","available"===scope.centerLabel?(bigText=scope.data.available,smText=scope.config.units+" Available"):"percent"===scope.centerLabel&&(bigText=Math.round(scope.data.used/scope.data.total*100)+"%",smText="of "+scope.data.total+" "+scope.config.units),donutChartTitle&&(donutChartTitle.innerHTML=''+bigText+''+smText+""))},300)};scope.$watch("config",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("data",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("centerLabel",function(){setupDonutChartTitle()})}}}]),angular.module("patternfly.charts").directive("pfSparklineChart",["c3ChartDefaults",function(c3ChartDefaults){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/sparkline/sparkline-chart.html",controller:["$scope",function($scope){$scope.sparklineChartId="sparklineChart",$scope.config.chartId&&($scope.sparklineChartId=$scope.config.chartId+$scope.sparklineChartId),$scope.getSparklineData=function(chartData){return{x:chartData.xData[0],columns:[chartData.xData,chartData.yData],type:"area"}},$scope.getTooltipTableHTML=function(tipRows){return'
'+tipRows+"
"},$scope.sparklineTooltip=function(){return{contents:function(d){var tipRows,percentUsed;if($scope.config.tooltipFn)tipRows=$scope.config.tooltipFn(d);else switch($scope.config.tooltipType){case"usagePerDay":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+d[0].x.toLocaleDateString()+' '+percentUsed+'%: '+d[0].value+" "+$scope.config.units+" "+d[0].name+"";break;case"valuePerDay":tipRows=' '+d[0].x.toLocaleDateString()+' '+d[0].value+" "+d[0].name+"";break;case"percentage":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+percentUsed+"%";break;default:tipRows=c3ChartDefaults.getDefaultSparklineTooltip().contents(d)}return $scope.getTooltipTableHTML(tipRows)},position:function(data,width,height,element){var center,top,chartBox,graphOffsetX,x;try{return center=parseInt(element.getAttribute("x")),top=parseInt(element.getAttribute("y")),chartBox=document.querySelector("#"+$scope.sparklineChartId).getBoundingClientRect(),graphOffsetX=document.querySelector("#"+$scope.sparklineChartId+" g.c3-axis-y").getBoundingClientRect().right,x=Math.max(0,center+graphOffsetX-chartBox.left-Math.floor(width/2)),{top:top-height,left:Math.min(x,chartBox.width-width)}}catch(e){}}}},void 0===$scope.showXAxis&&($scope.showXAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),void 0===$scope.showYAxis&&($scope.showYAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),$scope.defaultConfig=c3ChartDefaults.getDefaultSparklineConfig(),$scope.defaultConfig.axis={x:{show:$scope.showXAxis===!0,type:"timeseries",tick:{format:function(){return""}}},y:{show:$scope.showYAxis===!0,tick:{format:function(){return""}}}},$scope.defaultConfig.tooltip=$scope.sparklineTooltip(),$scope.chartHeight&&($scope.defaultConfig.size.height=$scope.chartHeight),$scope.defaultConfig.units="",$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.data=$scope.getSparklineData($scope.chartData)}],link:function(scope){scope.$watch("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config)},!0),scope.$watch("chartHeight",function(){scope.config.size.height=scope.chartHeight}),scope.$watch("showXAxis",function(){scope.config.axis.x.show=scope.showXAxis===!0}),scope.$watch("showYAxis",function(){scope.config.axis.y.show=scope.showYAxis===!0}),scope.$watch("chartData",function(){scope.config.data=scope.getSparklineData(scope.chartData)},!0)}}}]),angular.module("patternfly.charts").directive("pfUtilizationChart",function(){"use strict";return{restrict:"A",scope:{chartData:"=",config:"=",centerLabel:"=?",donutConfig:"=",sparklineConfig:"=",sparklineChartHeight:"=?",showSparklineXAxis:"=?",showSparklineYAxis:"=?"},replace:!0,templateUrl:"charts/utilization/utilization-chart.html",controller:["$scope",function($scope){void 0===$scope.centerLabel&&($scope.centerLabel="used"),void 0===$scope.donutConfig.units&&($scope.donutConfig.units=$scope.config.units),void 0===$scope.chartData.available&&($scope.chartData.available=$scope.chartData.total-$scope.chartData.used),$scope.config.units=$scope.config.units||$scope.units}],link:function(scope){var setupCurrentValues=function(){"available"===scope.centerLabel?(scope.currentValue=scope.chartData.used,scope.currentText="Used"):(scope.currentValue=scope.chartData.total-scope.chartData.used,scope.currentText="Available")};scope.$watch("centerLabel",function(){setupCurrentValues()})}}}),angular.module("patternfly.form").directive("pfDatepicker",function(){"use strict";return{replace:!0,restrict:"A",require:"^form",templateUrl:"form/datepicker/datepicker.html",scope:{options:"=",date:"="},link:function($scope,element){element.datepicker($scope.options),element.datepicker("update",$scope.date),element.datepicker($scope.date).on("changeDate",function(elem){$scope.$apply(function(){$scope.date=elem.date})}),$scope.$watch("date",function(newValue,oldValue){oldValue!==newValue&&element.datepicker("update",newValue)})}}}),angular.module("patternfly.form").directive("pfFormButtons",function(){"use strict";return{replace:!0,require:"^form",templateUrl:"form/form-buttons/form-buttons.html",scope:{pfHandleCancel:"&pfOnCancel",pfHandleSave:"&pfOnSave",pfWorking:"=",pfButtonContainerClass:"@"},link:function(scope,iElement,iAttrs,controller){void 0===scope.pfWorking&&(scope.pfWorking=!1),scope.isInvalid=function(){var invalid=controller.$invalid;return angular.forEach(controller,function(value){value&&value.$error&&value.$error.server&&(invalid=!1)}),invalid}}}}),angular.module("patternfly.form").directive("pfFormGroup",function(){"use strict";function getInput(element){var input=element.find("table");return 0===input.length&&(input=element.find("input"),0===input.length&&(input=element.find("select"),0===input.length&&(input=element.find("textarea")))),input}return{transclude:!0,replace:!0,require:"^form",templateUrl:"form/form-group/form-group.html",scope:{pfLabel:"@",pfField:"@",pfLabelClass:"@",pfInputClass:"@"},link:function(scope,iElement,iAttrs,controller){var field,input=getInput(iElement),type=input.attr("type");iAttrs.pfLabelClass||(iAttrs.pfLabelClass="col-sm-2"),iAttrs.pfInputClass||(iAttrs.pfInputClass="col-sm-5"),scope.pfField||(scope.pfField=input.attr("id")),field=scope.pfField,-1===["checkbox","radio","time"].indexOf(type)&&input.addClass("form-control"),input.attr("required")&&iElement.addClass("required"),controller[field]&&(scope.error=controller[field].$error),scope.hasErrors=function(){return controller[field]&&controller[field].$invalid&&controller[field].$dirty}}}}),angular.module("patternfly.notification",[]).provider("Notifications",function(){"use strict";this.delay=5e3,this.verbose=!0,this.notifications={},this.persist={error:!0,httpError:!0},this.setDelay=function(delay){return this.delay=delay,this},this.setVerbose=function(verbose){return this.verbose=verbose,this},this.setPersist=function(persist){this.persist=persist},this.$get=["$rootScope","$timeout","$log",function($rootScope,$timeout,$log){function createNotifyMethod(mode){return function(message){notifications.message(modes[mode].type,modes[mode].header,message,persist[mode]),verbose&&$log[modes[mode].log](message)}}var delay=this.delay,notifications=this.notifications,verbose=this.verbose,persist=this.persist,scheduleMessagePop=function(){$timeout(function(){var i;for(i=0;i<$rootScope.notifications.data.length;i++)$rootScope.notifications.data[i].isPersistent||$rootScope.notifications.data.splice(i,1)},delay)},modes={info:{type:"info",header:"Info!",log:"info"},success:{type:"success",header:"Success!",log:"info"},error:{type:"danger",header:"Error!",log:"error"},warn:{type:"warning",header:"Warning!",log:"warn"}};return $rootScope.notifications={},$rootScope.notifications.data=[],$rootScope.notifications.remove=function(index){$rootScope.notifications.data.splice(index,1)},$rootScope.notifications||($rootScope.notifications.data=[]),notifications.message=function(type,header,message,isPersistent){$rootScope.notifications.data.push({type:type,header:header,message:message,isPersistent:isPersistent}),scheduleMessagePop()},angular.forEach(modes,function(mode,index){notifications[index]=createNotifyMethod(index)}),notifications.httpError=function(message,httpResponse){message+=" ("+(httpResponse.data.message||httpResponse.data.cause||httpResponse.data.cause||httpResponse.data.errorMessage)+")",notifications.message("danger","Error!",message,persist.httpError),verbose&&$log.error(message)},notifications}]}),angular.module("patternfly.notification").directive("pfNotification",function(){"use strict";return{scope:{pfNotificationType:"=",pfNotificationMessage:"=",pfNotificationHeader:"=",pfNotificationPersistent:"=",pfNotificationIndex:"="},restrict:"E",templateUrl:"notification/notification.html"}}),angular.module("patternfly.notification").directive("pfNotificationList",function(){"use strict";return{restrict:"E",templateUrl:"notification/notification-list.html"}}),angular.module("patternfly.select",[]).directive("pfSelect",["$timeout",function($timeout){"use strict";return{restrict:"A",require:"?ngModel",scope:{selectPickerOptions:"=pfSelect"},link:function(scope,element,attrs,ngModel){var optionCollectionList,optionCollection,$render=ngModel.$render;element.selectpicker(scope.selectPickerOptions),ngModel.$render=function(){$render.apply(this,arguments),$timeout(function(){element.selectpicker("refresh")},0,!1)},attrs.ngOptions&&(optionCollectionList=attrs.ngOptions.split("in "),optionCollection=optionCollectionList[optionCollectionList.length-1],scope.$watchCollection(optionCollection,function(){element.selectpicker("refresh")})),attrs.$observe("disabled",function(){element.selectpicker("refresh")})}}}]),angular.module("patternfly.validation",[]).directive("pfValidation",["$timeout",function($timeout){"use strict";return{restrict:"A",require:"ngModel",scope:{pfValidation:"&",pfValidationDisabled:"="},link:function(scope,element,attrs,ctrl){function validate(){var valid,val=scope.inputCtrl.$modelValue,valFunc=scope.pfValidation({input:val});attrs.pfValidation||(valFunc=!0),valid=!val||valFunc||""===val,toggleErrorClass(scope.valEnabled&&!valid?!0:!1)}function toggleErrorClass(add){var messageElement=element.next(),parentElement=element.parent(),hasErrorM=parentElement.hasClass("has-error"),wasHidden=messageElement.hasClass("ng-hide");scope.inputCtrl.$setValidity("pf-validation",!add),add&&(hasErrorM||parentElement.addClass("has-error"),wasHidden&&messageElement.removeClass("ng-hide")),add||(hasErrorM&&parentElement.removeClass("has-error"),wasHidden||messageElement.addClass("ng-hide"))}scope.inputCtrl=ctrl,scope.valEnabled=!attrs.pfValidationDisabled,scope.$watch("pfValidationDisabled",function(newVal){scope.valEnabled=!newVal,newVal?(scope.inputCtrl.$setValidity("pfValidation",!0),toggleErrorClass(!1)):validate()}),attrs.pfValidation?$timeout(function(){validate()},0):!scope.inputCtrl.$valid&&scope.inputCtrl.$dirty&&toggleErrorClass(!0),scope.$watch("inputCtrl.$valid",function(isValid){toggleErrorClass(isValid?!1:!0)}),scope.$watch("inputCtrl.$modelValue",function(){validate()})}}}]),angular.module("patternfly.card").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("card/basic/card.html","

{{headTitle}}

{{subTitle}}
")}]),angular.module("patternfly.charts").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("charts/donut/donut-pct-chart.html","
"),$templateCache.put("charts/sparkline/sparkline-chart.html","
"),$templateCache.put("charts/utilization/utilization-chart.html",'
{{config.title}}
{{currentValue}}
{{currentText}}
of {{chartData.total}} {{config.units}}
{{legendLeftText}} {{legendRightText}}
')}]),angular.module("patternfly.form").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("form/datepicker/datepicker.html",'
'),$templateCache.put("form/form-buttons/form-buttons.html",'
'),$templateCache.put("form/form-group/form-group.html",'
  • {{ message }}
')}]),angular.module("patternfly.notification").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("notification/notification-list.html",'
'),$templateCache.put("notification/notification.html",'
{{pfNotificationHeader}} {{pfNotificationMessage}}
')}]); \ No newline at end of file diff --git a/package.json b/package.json index 29b5b5beb..450c742d3 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dependencies": {}, "devDependencies": { "express": "3.4.4", - "grunt": "0.4.2", + "grunt": "0.4.5", "grunt-angular-templates": "0.5.7", "grunt-available-tasks": "0.4.3", "grunt-contrib-clean": "0.4.1", @@ -21,6 +21,7 @@ "grunt-eslint": "^17.1.0", "grunt-htmlhint": "0.4.1", "grunt-karma": "0.8.3", + "grunt-ng-annotate": "^1.0.1", "grunt-ngdocs": "0.2.9", "karma": "0.12.23", "karma-chrome-launcher": "0.1.4", diff --git a/src/charts/c3/c3-chart.directive.js b/src/charts/c3/c3-chart.directive.js index 7056d7875..b9841e0a4 100644 --- a/src/charts/c3/c3-chart.directive.js +++ b/src/charts/c3/c3-chart.directive.js @@ -13,68 +13,66 @@ * @param {expression} config the c3 configuration options for the chart * * @example - - -
-
-
- Total = {{total}}, Used = {{used}}, Available = {{available}} -
- - -
- -
-
- + + +
+
- +
+ Total = {{total}}, Used = {{used}}, Available = {{available}} +
+ + +
+ +
+
+ -angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { - $scope.used = 950; - $scope.total = 1000; - $scope.available = $scope.total - $scope.used; + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { + $scope.used = 950; + $scope.total = 1000; + $scope.available = $scope.total - $scope.used; - $scope.chartConfig = {"donut": - {"title":"MHz Used", - "label":{"show":false}, - "width":10 - }, - "size":{"height":130}, - "legend":{"show":false}, - "color":{"pattern":["#0088CE","#D1D1D1"]}, - "tooltip":{}, - "data":{"columns":[["Used","950"],["Available",50]], - "type":"donut", - "donut":{ - "label":{"show":false} - }, - "groups":[["used","available"]], - "order":null - } - }; + $scope.chartConfig = { + "donut": { + "title":"MHz Used", + "label":{"show":false}, + "width":10 + }, + "size": {"height":130}, + "legend": {"show":false}, + "color": {"pattern":["#0088CE","#D1D1D1"]}, + "tooltip": {}, + "data": {"columns":[["Used","950"],["Available",50]], + "type": "donut", + "donut": { + "label": {"show":false} + }, + "groups": [["used","available"]], + "order":null + } + }; - $scope.updateAvailable = function (val) { - $scope.available = $scope.total - $scope.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]]; - }; - }]); - + $scope.submitform = function (val) { + $scope.used = val; + $scope.updateAvailable(); + $scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]]; + }; + }); + */ (function (c3) { 'use strict'; - angular.module('patternfly.charts') - .directive('pfC3Chart', ['$timeout', function ($timeout) { - + angular.module('patternfly.charts').directive('pfC3Chart', function ($timeout) { return { restrict: 'A', scope: { @@ -93,5 +91,5 @@ angular.module( 'patternfly.charts' ) }, true); } }; - }]); + }); }(c3)); diff --git a/src/charts/donut/donut-pct-chart-directive.js b/src/charts/donut/donut-pct-chart-directive.js index e1fc935ea..e7f8f352a 100644 --- a/src/charts/donut/donut-pct-chart-directive.js +++ b/src/charts/donut/donut-pct-chart-directive.js @@ -42,327 +42,325 @@ * * @example - - -
- -
-
-
+ + +
-
- Total = {{data.total}}, Used = {{data.used}}, Available = {{data.available}}
- Percent Used = {{(data.used / data.total) * 100;}} %
- Thresholds:
-
- Error:
- Warning:
- Ok: -
-
- {{config.thresholds.error}}% Used (red)
- {{config.thresholds.warning}}% Used (orange)
- Not reached a threshold (blue) +
+
-
-
- -
- - - +
+ Total = {{data.total}}, Used = {{data.used}}, Available = {{data.available}}
+ Percent Used = {{(data.used / data.total) * 100;}} %
+ Thresholds:
+
+ Error:
+ Warning:
+ Ok: +
+
+ {{config.thresholds.error}}% Used (red)
+ {{config.thresholds.warning}}% Used (orange)
+ Not reached a threshold (blue)
- -
-
-
-
+
+
+ +
+ + + +
+
+
-
-
- center-label =
'used' -
-
-
- center-label =
'available' -
-
-
- center-label =
'percent' -
-
-
- center-label =
' none' -
+
+
+
-
-
-
+
+
+ center-label =
'used' +
+
+
+ center-label =
'available' +
+
+
+ center-label =
'percent' +
+
+
+ center-label =
' none' +
-
- Custom Tooltip and Center Label -
+
+
+
+ +
+ Custom Tooltip and Center Label +
+
-
- - - -angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { - $scope.config = { - 'chartId': 'chartA', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; - - $scope.data = { + + + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { + $scope.config = { + 'chartId': 'chartA', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + + $scope.data = { 'used': '950', 'total': '1000' - }; + }; - $scope.newUsed = $scope.data.used; + $scope.newUsed = $scope.data.used; - $scope.$watch('newUsed', function (val) { - $scope.data.used = val; - }); + $scope.$watch('newUsed', function (val) { + $scope.data.used = val; + }); - $scope.usedConfig = { - 'chartId': 'usedChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; + $scope.usedConfig = { + 'chartId': 'usedChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; - $scope.usedData = { - 'used': '350', - 'total': '1000' - }; - $scope.availConfig = { - 'chartId': 'availChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; - - $scope.availData = { + $scope.usedData = { 'used': '350', 'total': '1000' - }; - $scope.pctConfig = { - 'chartId': 'pctChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; - - $scope.pctData = { + }; + + $scope.availConfig = { + 'chartId': 'availChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + + $scope.availData = { + 'used': '350', + 'total': '1000' + }; + + $scope.pctConfig = { + 'chartId': 'pctChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + + $scope.pctData = { 'used': '350', 'total': '1000' - }; - $scope.noneConfig = { - 'chartId': 'noneChart', - 'units': 'GB', - 'thresholds':{'warning':'60','error':'90'} - }; - - $scope.noneData = { + }; + + $scope.noneConfig = { + 'chartId': 'noneChart', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + + $scope.noneData = { 'used': '350', 'total': '1000' - }; - - $scope.custConfig = { - 'chartId': 'custChart', - 'units': 'MHz', - 'thresholds':{'warning':'60','error':'90'}, - "legend":{"show":true}, - 'tooltipFn': function (d) { - return '' + - d[0].value + ' ' + d[0].name + - ''; - }, - 'centerLabelFn': function (scope) { - return '' + - scope.data.available + '' + - '' + - 'Free' + - ''; - } - }; - - $scope.custData = { + }; + + $scope.custConfig = { + 'chartId': 'custChart', + 'units': 'MHz', + 'thresholds':{'warning':'60','error':'90'}, + "legend":{"show":true}, + 'tooltipFn': function (d) { + return '' + + d[0].value + ' ' + d[0].name + + ''; + }, + 'centerLabelFn': function (scope) { + return '' + scope.data.available + '' + + 'Free'; + } + }; + + $scope.custData = { 'used': '670', 'total': '1000' - }; - }]); - + }; + }); + */ -angular.module('patternfly.charts').directive('pfDonutPctChart', ['c3ChartDefaults', '$timeout', - function (c3ChartDefaults, $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; - } +angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3ChartDefaults, $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; - }; + $scope.updateAvailable = function () { + $scope.data.available = $scope.data.total - $scope.data.used; + }; - if ($scope.data.available === undefined) { - $scope.updateAvailable(); - } + if ($scope.data.available === undefined) { + $scope.updateAvailable(); + } - $scope.getStatusColor = function (used, thresholds) { - var color = '#0088CE'; + $scope.getStatusColor = function (used, thresholds) { + var color = '#0088CE'; - if (thresholds) { - if (used >= thresholds.error) { - color = '#CC0000'; - } else if (used >= thresholds.warning) { - color = '#EC7A08'; - } + if (thresholds) { + if (used >= thresholds.error) { + color = '#CC0000'; + } else if (used >= thresholds.warning) { + color = '#EC7A08'; } + } - return color; - }; + return color; + }; - $scope.statusDonutColor = function (scope) { - var color, percentUsed; + $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; - }; + 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 = '' + - scope.config.tooltipFn(d) + - ''; - } else { - tooltipHtml = '' + - Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name + - ''; - } - - return tooltipHtml; + donutTooltip = function (scope) { + return { + contents: function (d) { + var tooltipHtml; + + if (scope.config.tooltipFn) { + tooltipHtml = '' + + scope.config.tooltipFn(d) + + ''; + } else { + tooltipHtml = '' + + Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name + + ''; } - }; - }; - - $scope.getDonutData = function (scope) { - return { - columns: [ - ['Used', scope.data.used], - ['Available', scope.data.available] - ], - type: 'donut', - donut: { - label: { - show: false - } - }, - groups: [ - ['used', 'available'] - ], - order: null - }; - }; - $scope.updateAll = function (scope) { - $scope.updateAvailable(); - $scope.config.data = $scope.getDonutData($scope); - $scope.config.color = $scope.statusDonutColor($scope); - $scope.config.tooltip = donutTooltip(scope); + return tooltipHtml; + } }; + }; - $scope.config = $.extend(true, c3ChartDefaults.getDefaultDonutConfig(), $scope.config); - $scope.updateAll($scope); - } - ], - link: function (scope, element) { - var setupDonutChartTitle = function () { - $timeout(function () { - var donutChartTitle, bigText, smText; - - donutChartTitle = element[0].querySelector('text.c3-chart-arcs-title'); - if (scope.config.centerLabelFn) { - donutChartTitle.innerHTML = scope.config.centerLabelFn(scope); - } else if (scope.centerLabel === 'none') { - donutChartTitle.innerHTML = ''; - } else { - // default to 'used' info. - bigText = scope.data.used; - smText = scope.config.units + ' Used'; - - if (scope.centerLabel === 'available') { - bigText = scope.data.available; - smText = scope.config.units + ' Available'; - } else if (scope.centerLabel === 'percent') { - bigText = Math.round(scope.data.used / scope.data.total * 100.0) + '%'; - smText = 'of ' + scope.data.total + ' ' + scope.config.units; + $scope.getDonutData = function (scope) { + return { + columns: [ + ['Used', scope.data.used], + ['Available', scope.data.available] + ], + type: 'donut', + donut: { + label: { + show: false } - if (donutChartTitle) { - donutChartTitle.innerHTML = - '' + - bigText + - '' + - '' + - smText + - ''; - } - } - }, 300); + }, + groups: [ + ['used', 'available'] + ], + order: null + }; }; - scope.$watch('config', function () { - scope.updateAll(scope); - setupDonutChartTitle(); - }, true); - - scope.$watch('data', function () { - scope.updateAll(scope); - setupDonutChartTitle(); - }, true); + $scope.updateAll = function (scope) { + $scope.updateAvailable(); + $scope.config.data = $scope.getDonutData($scope); + $scope.config.color = $scope.statusDonutColor($scope); + $scope.config.tooltip = donutTooltip(scope); + }; - scope.$watch('centerLabel', function () { - setupDonutChartTitle(); - }); + $scope.config = $.extend(true, c3ChartDefaults.getDefaultDonutConfig(), $scope.config); + $scope.updateAll($scope); } - }; - }]); + ], + link: function (scope, element) { + var setupDonutChartTitle = function () { + $timeout(function () { + var donutChartTitle, bigText, smText; + + donutChartTitle = element[0].querySelector('text.c3-chart-arcs-title'); + if (scope.config.centerLabelFn) { + donutChartTitle.innerHTML = scope.config.centerLabelFn(scope); + } else if (scope.centerLabel === 'none') { + donutChartTitle.innerHTML = ''; + } else { + // default to 'used' info. + bigText = scope.data.used; + smText = scope.config.units + ' Used'; + + if (scope.centerLabel === 'available') { + bigText = scope.data.available; + smText = scope.config.units + ' Available'; + } else if (scope.centerLabel === 'percent') { + bigText = Math.round(scope.data.used / scope.data.total * 100.0) + '%'; + smText = 'of ' + scope.data.total + ' ' + scope.config.units; + } + if (donutChartTitle) { + donutChartTitle.innerHTML = + '' + + bigText + + '' + + '' + + smText + + ''; + } + } + }, 300); + }; + + scope.$watch('config', function () { + scope.updateAll(scope); + setupDonutChartTitle(); + }, true); + + scope.$watch('data', function () { + scope.updateAll(scope); + setupDonutChartTitle(); + }, true); + + scope.$watch('centerLabel', function () { + setupDonutChartTitle(); + }); + } + }; +}); diff --git a/src/charts/sparkline/sparkline-chart.directive.js b/src/charts/sparkline/sparkline-chart.directive.js index d5b2763c1..d093d5426 100644 --- a/src/charts/sparkline/sparkline-chart.directive.js +++ b/src/charts/sparkline/sparkline-chart.directive.js @@ -40,288 +40,286 @@ * @example - - -
-
-
-
-
-
-
-
- -
- - - - -
-
-
-
-
-
- -
- - -
-
-
-
-
-
- -
- -
-
-
-
- + + +
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+ +
+ +
+
+
+
+ +
-
- + - - angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { - $scope.config = { - 'chartId': 'exampleSparkline', - 'tooltipType': 'default' - }; + $scope.config = { + 'chartId': 'exampleSparkline', + 'tooltipType': 'default' + }; - 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))); - } + 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.data = { - 'total': '100', - 'xData': dates, - 'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76'] - }; + $scope.data = { + 'total': '100', + 'xData': dates, + 'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76'] + }; - $scope.custShowXAxis = false; - $scope.custShowYAxis = false; - $scope.custChartHeight = 60; + $scope.custShowXAxis = false; + $scope.custShowYAxis = false; + $scope.custChartHeight = 60; - $scope.addDataPoint = function () { - $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000))); - $scope.data.yData.push(Math.round(Math.random() * 100)); - }; - }]); - + $scope.addDataPoint = function () { + $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000))); + $scope.data.yData.push(Math.round(Math.random() * 100)); + }; + }); + */ -angular.module('patternfly.charts').directive('pfSparklineChart', ['c3ChartDefaults', - function (c3ChartDefaults) { - 'use strict'; - return { - restrict: 'A', - scope: { - config: '=', - chartData: '=', - chartHeight: '=?', - showXAxis: '=?', - showYAxis: '=?' - }, - replace: true, - templateUrl: 'charts/sparkline/sparkline-chart.html', - controller: ['$scope', - function ($scope) { +angular.module('patternfly.charts').directive('pfSparklineChart', function (c3ChartDefaults) { + 'use strict'; + return { + restrict: 'A', + scope: { + config: '=', + chartData: '=', + chartHeight: '=?', + showXAxis: '=?', + showYAxis: '=?' + }, + replace: true, + templateUrl: 'charts/sparkline/sparkline-chart.html', + controller: ['$scope', + function ($scope) { - // Create an ID for the chart based on the chartId in the config if given - $scope.sparklineChartId = 'sparklineChart'; - if ($scope.config.chartId) { - $scope.sparklineChartId = $scope.config.chartId + $scope.sparklineChartId; - } + // Create an ID for the chart based on the chartId in the config if given + $scope.sparklineChartId = 'sparklineChart'; + if ($scope.config.chartId) { + $scope.sparklineChartId = $scope.config.chartId + $scope.sparklineChartId; + } - /* - * Convert the config data to C3 Data - */ - $scope.getSparklineData = function (chartData) { - return { - x: chartData.xData[0], - columns: [ - chartData.xData, - chartData.yData - ], - type: 'area' - }; + /* + * Convert the config data to C3 Data + */ + $scope.getSparklineData = function (chartData) { + return { + x: chartData.xData[0], + columns: [ + chartData.xData, + chartData.yData + ], + type: 'area' }; + }; - $scope.getTooltipTableHTML = function (tipRows) { - return '
' + - ' ' + - ' ' + - tipRows + - ' ' + - '
' + - '
'; - }; + $scope.getTooltipTableHTML = function (tipRows) { + return '
' + + ' ' + + ' ' + + tipRows + + ' ' + + '
' + + '
'; + }; - $scope.sparklineTooltip = function () { - return { - contents: function (d) { - var tipRows; - var percentUsed; + $scope.sparklineTooltip = function () { + return { + contents: function (d) { + var tipRows; + var percentUsed; - if ($scope.config.tooltipFn) { - tipRows = $scope.config.tooltipFn(d); - } else { - switch ($scope.config.tooltipType) { - case 'usagePerDay': - percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); - tipRows = - '' + - ' ' + d[0].x.toLocaleDateString() + '' + - '' + - '' + - ' ' + percentUsed + '%:' + '' + - ' ' + d[0].value + ' ' + $scope.config.units + ' ' + d[0].name + '' + - ''; - break; - case 'valuePerDay': - tipRows = - '' + - ' ' + d[0].x.toLocaleDateString() + '' + - ' ' + d[0].value + ' ' + d[0].name + '' + - ''; - break; - case 'percentage': - percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); - tipRows = - '' + - ' ' + percentUsed + '%' + '' + - ''; - break; - default: - tipRows = c3ChartDefaults.getDefaultSparklineTooltip().contents(d); - } + if ($scope.config.tooltipFn) { + tipRows = $scope.config.tooltipFn(d); + } else { + switch ($scope.config.tooltipType) { + case 'usagePerDay': + percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); + tipRows = + '' + + ' ' + d[0].x.toLocaleDateString() + '' + + '' + + '' + + ' ' + percentUsed + '%:' + '' + + ' ' + d[0].value + ' ' + $scope.config.units + ' ' + d[0].name + '' + + ''; + break; + case 'valuePerDay': + tipRows = + '' + + ' ' + d[0].x.toLocaleDateString() + '' + + ' ' + d[0].value + ' ' + d[0].name + '' + + ''; + break; + case 'percentage': + percentUsed = Math.round(d[0].value / $scope.chartData.total * 100.0); + tipRows = + '' + + ' ' + percentUsed + '%' + '' + + ''; + break; + default: + tipRows = c3ChartDefaults.getDefaultSparklineTooltip().contents(d); } - return $scope.getTooltipTableHTML(tipRows); - }, - position: function (data, width, height, element) { - var center; - var top; - var chartBox; - var graphOffsetX; - var x; + } + return $scope.getTooltipTableHTML(tipRows); + }, + position: function (data, width, height, element) { + var center; + var top; + var chartBox; + var graphOffsetX; + var x; - try { - center = parseInt(element.getAttribute('x')); - top = parseInt(element.getAttribute('y')); - chartBox = document.querySelector('#' + $scope.sparklineChartId).getBoundingClientRect(); - graphOffsetX = document.querySelector('#' + $scope.sparklineChartId + ' g.c3-axis-y').getBoundingClientRect().right; - x = Math.max(0, center + graphOffsetX - chartBox.left - Math.floor(width / 2)); + try { + center = parseInt(element.getAttribute('x')); + top = parseInt(element.getAttribute('y')); + chartBox = document.querySelector('#' + $scope.sparklineChartId).getBoundingClientRect(); + graphOffsetX = document.querySelector('#' + $scope.sparklineChartId + ' g.c3-axis-y').getBoundingClientRect().right; + x = Math.max(0, center + graphOffsetX - chartBox.left - Math.floor(width / 2)); - return { - top: top - height, - left: Math.min(x, chartBox.width - width) - }; - } catch (e) { - } + return { + top: top - height, + left: Math.min(x, chartBox.width - width) + }; + } catch (e) { } - }; + } }; + }; - /* - * Setup Axis options. Default is to not show either axis. This can be overridden in two ways: - * 1) in the config, setting showAxis to true will show both axes - * 2) in the attributes showXAxis and showYAxis will override the config if set - * - * By default only line and the tick marks are shown, no labels. This is a sparkline and should be used - * only to show a brief idea of trending. This can be overridden by setting the config.axis options per C3 - */ + /* + * Setup Axis options. Default is to not show either axis. This can be overridden in two ways: + * 1) in the config, setting showAxis to true will show both axes + * 2) in the attributes showXAxis and showYAxis will override the config if set + * + * By default only line and the tick marks are shown, no labels. This is a sparkline and should be used + * only to show a brief idea of trending. This can be overridden by setting the config.axis options per C3 + */ - if ($scope.showXAxis === undefined) { - $scope.showXAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; - } + if ($scope.showXAxis === undefined) { + $scope.showXAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; + } - if ($scope.showYAxis === undefined) { - $scope.showYAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; - } + if ($scope.showYAxis === undefined) { + $scope.showYAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis; + } - $scope.defaultConfig = c3ChartDefaults.getDefaultSparklineConfig(); - $scope.defaultConfig.axis = { - x: { - show: $scope.showXAxis === true, - type: 'timeseries', - tick: { - format: function () { - return ''; - } + $scope.defaultConfig = c3ChartDefaults.getDefaultSparklineConfig(); + $scope.defaultConfig.axis = { + x: { + show: $scope.showXAxis === true, + type: 'timeseries', + tick: { + format: function () { + return ''; } - }, - y: { - show: $scope.showYAxis === true, - tick: { - format: function () { - return ''; - } + } + }, + y: { + show: $scope.showYAxis === true, + tick: { + format: function () { + return ''; } } - }; - - // Setup the default configuration - $scope.defaultConfig.tooltip = $scope.sparklineTooltip(); - if ($scope.chartHeight) { - $scope.defaultConfig.size.height = $scope.chartHeight; } - $scope.defaultConfig.units = ''; - - // Override defaults with callers specifications - $scope.config = $.extend(true, angular.copy($scope.defaultConfig), $scope.config); + }; - // Convert the given data to C3 chart format - $scope.config.data = $scope.getSparklineData($scope.chartData); + // Setup the default configuration + $scope.defaultConfig.tooltip = $scope.sparklineTooltip(); + if ($scope.chartHeight) { + $scope.defaultConfig.size.height = $scope.chartHeight; } - ], + $scope.defaultConfig.units = ''; - link: function (scope) { - scope.$watch('config', function () { - scope.config = $.extend(true, angular.copy(scope.defaultConfig), scope.config); - }, true); - scope.$watch('chartHeight', function () { - scope.config.size.height = scope.chartHeight; - }); - scope.$watch('showXAxis', function () { - scope.config.axis.x.show = scope.showXAxis === true; - }); - scope.$watch('showYAxis', function () { - scope.config.axis.y.show = scope.showYAxis === true; - }); - scope.$watch('chartData', function () { - scope.config.data = scope.getSparklineData(scope.chartData); - }, true); + // Override defaults with callers specifications + $scope.config = $.extend(true, angular.copy($scope.defaultConfig), $scope.config); + + // Convert the given data to C3 chart format + $scope.config.data = $scope.getSparklineData($scope.chartData); } - }; - } -]); + ], + + link: function (scope) { + scope.$watch('config', function () { + scope.config = $.extend(true, angular.copy(scope.defaultConfig), scope.config); + }, true); + scope.$watch('chartHeight', function () { + scope.config.size.height = scope.chartHeight; + }); + scope.$watch('showXAxis', function () { + scope.config.axis.x.show = scope.showXAxis === true; + }); + scope.$watch('showYAxis', function () { + scope.config.axis.y.show = scope.showYAxis === true; + }); + scope.$watch('chartData', function () { + scope.config.data = scope.getSparklineData(scope.chartData); + }, true); + } + }; +} +); diff --git a/src/charts/utilization/utilization-chart-directive.js b/src/charts/utilization/utilization-chart-directive.js index 8933f80dc..b8e3b9f36 100644 --- a/src/charts/utilization/utilization-chart-directive.js +++ b/src/charts/utilization/utilization-chart-directive.js @@ -40,101 +40,99 @@ * @example - - -
-
-
-
-
-
-
-
-
- -
- - - - + + +
+
+
- -
-
- -
+
+
+
+ +
+ +
-
- -
-
-
+
+ +
+
+ +
+ + + + +
+
+
+
+
+
+ +
+ + +
+
+
+
+
- +
- - +
-
-
-
-
- -
-
-
-
-
- +
+ +
-
- - - - angular.module( 'patternfly.charts' ) - .controller( 'ChartCtrl', ['$scope', function( $scope ) { + + + angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) { $scope.config = { title: 'Memory', units: 'GB' @@ -175,8 +173,8 @@ $scope.data.xData.push(newDate); $scope.data.yData.push(newData); }; - }]); - + }); + */ angular.module('patternfly.charts').directive('pfUtilizationChart', diff --git a/src/form/datepicker/datepicker.directive.js b/src/form/datepicker/datepicker.directive.js index ed19f70e1..7ac8332f3 100644 --- a/src/form/datepicker/datepicker.directive.js +++ b/src/form/datepicker/datepicker.directive.js @@ -10,7 +10,6 @@ * * @example -
@@ -22,19 +21,17 @@ + angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) { + $scope.setToday = function () { + $scope.date = new Date(); + } - angular.module( 'patternfly.form' ) - .controller( 'FormDemoCtrl', ['$scope', function( $scope ) { - $scope.setToday = function () { - $scope.date = new Date(); - } - - $scope.options = { - autoclose: true, - todayBtn: 'linked', - todayHighlight: true - }; - }]); + $scope.options = { + autoclose: true, + todayBtn: 'linked', + todayHighlight: true + }; + }); */ diff --git a/src/form/form-buttons/form-buttons.directive.js b/src/form/form-buttons/form-buttons.directive.js index b1d54caea..3bffe580f 100644 --- a/src/form/form-buttons/form-buttons.directive.js +++ b/src/form/form-buttons/form-buttons.directive.js @@ -31,8 +31,7 @@ - angular.module( 'patternfly.form' ) - .controller( 'FormButtonCtrl', ['$scope', '$timeout', function( $scope, $timeout ) { + angular.module( 'patternfly.form' ).controller( 'FormButtonCtrl', function( $scope, $timeout ) { $scope.status = 'Not yet Saved' $scope.working = false; @@ -49,7 +48,7 @@ $scope.status = 'cancelled'; $scope.input = null; }; - }]); + }); */ diff --git a/src/form/form-group/form-group.directive.js b/src/form/form-group/form-group.directive.js index 0250d5b83..7aefc7891 100644 --- a/src/form/form-group/form-group.directive.js +++ b/src/form/form-group/form-group.directive.js @@ -35,13 +35,12 @@ - angular.module( 'patternfly.form' ) - .controller( 'FormDemoCtrl', ['$scope', function( $scope ) { - $scope.item = { - name: 'Homer Simpson', - description: 'I like donuts and Duff. Doh!' - }; - }]); + angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) { + $scope.item = { + name: 'Homer Simpson', + description: 'I like donuts and Duff. Doh!' + }; + }); */ diff --git a/src/notification/notification.js b/src/notification/notification.js index b913f4950..356a5cde8 100644 --- a/src/notification/notification.js +++ b/src/notification/notification.js @@ -32,51 +32,50 @@ * @example - -
- - - -
- -
- + +
+ + + +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
-
- +
+
+ +
-
- -
- + +
+ - - angular.module( 'patternfly.notification' ) - .controller( 'NotificationDemoCtrl', ['$scope', 'Notifications', function( $scope, Notifications ) { + + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) { - var typeMap = { 'Info': Notifications.info, - 'Success': Notifications.success, - 'Warning': Notifications.warn, - 'Danger': Notifications.error }; + var typeMap = { 'Info': Notifications.info, + 'Success': Notifications.success, + 'Warning': Notifications.warn, + 'Danger': Notifications.error }; - $scope.types = Object.keys(typeMap); + $scope.types = Object.keys(typeMap); - $scope.type = $scope.types[0]; - $scope.message = 'Default notification message.'; + $scope.type = $scope.types[0]; + $scope.message = 'Default notification message.'; - $scope.notify = function () { - typeMap[$scope.type]($scope.message); - } - }]); - + $scope.notify = function () { + typeMap[$scope.type]($scope.message); + } + }); + */ @@ -195,56 +194,54 @@ angular.module('patternfly.notification', []).provider('Notifications', function * @example - -
- - - - -
-
- -
- + +
+ + + + + +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
- -
- + +
+ - + + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) { + $scope.types = ['success','info','danger', 'warning']; + $scope.type = $scope.types[0]; + $scope.isPersistent = false; - angular.module( 'patternfly.notification' ) - .controller( 'NotificationDemoCtrl', ['$scope', 'Notifications', function( $scope, Notifications ) { - $scope.types = ['success','info','danger', 'warning']; - $scope.type = $scope.types[0]; - $scope.isPersistent = false; - - $scope.header = 'Default Header.'; - $scope.message = 'Default Message.'; - }]); - + $scope.header = 'Default Header.'; + $scope.message = 'Default Message.'; + }); + */ @@ -274,53 +271,52 @@ angular.module( 'patternfly.notification' ).directive('pfNotification', function * @example - -
+ +
- + -
-
- -
- + +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
-
- +
+
+ +
-
- -
- + +
+ - - angular.module( 'patternfly.notification' ) - .controller( 'NotificationDemoCtrl', ['$scope', 'Notifications', function( $scope, Notifications ) { - $scope.message = 'Default Message.'; + + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) { + $scope.message = 'Default Message.'; - var typeMap = { 'Info': Notifications.info, - 'Success': Notifications.success, - 'Warning': Notifications.warn, - 'Danger': Notifications.error }; + var typeMap = { 'Info': Notifications.info, + 'Success': Notifications.success, + 'Warning': Notifications.warn, + 'Danger': Notifications.error }; - $scope.types = Object.keys(typeMap); + $scope.types = Object.keys(typeMap); - $scope.type = $scope.types[0]; - $scope.message = 'Default notification message.'; + $scope.type = $scope.types[0]; + $scope.message = 'Default notification message.'; - $scope.notify = function () { - typeMap[$scope.type]($scope.message); - } - }]); - + $scope.notify = function () { + typeMap[$scope.type]($scope.message); + } + }); + */ diff --git a/src/select/select.js b/src/select/select.js index ea7756599..5d7d6cd2e 100644 --- a/src/select/select.js +++ b/src/select/select.js @@ -14,52 +14,51 @@ * @example - -
+ +
-
-
- -
- -
-
+ +
+ +
+ +
+
-
- -
- -
-
+
+ +
+ +
+
-
- -
- -
-
+
+ +
+ +
+
-
+ -

Your preferred pet is {{pet}}.

+

Your preferred pet is {{pet}}.

-
- +
+ - - angular.module( 'patternfly.select' ) - .controller( 'SelectDemoCtrl', ['$scope', function( $scope ) { - $scope.drinks = ['tea', 'coffee', 'water']; - $scope.pets = ['Dog', 'Cat', 'Chicken']; - $scope.pet = $scope.pets[0]; - }]); - + + angular.module( 'patternfly.select' ).controller( 'SelectDemoCtrl', function( $scope ) { + $scope.drinks = ['tea', 'coffee', 'water']; + $scope.pets = ['Dog', 'Cat', 'Chicken']; + $scope.pet = $scope.pets[0]; + }); + */ diff --git a/src/validation/validation.js b/src/validation/validation.js index bd70b89a9..1d7a9ed3a 100644 --- a/src/validation/validation.js +++ b/src/validation/validation.js @@ -13,60 +13,59 @@ * @example - -
-
- -
- -
- - The value you typed is not a number. + +
+ + +
+ +
+ + The value you typed is not a number. +
-
-
- -
- - The value you typed is not a number. +
+ +
+ + The value you typed is not a number. +
-
-
- -
- - The value you typed is not a number. +
+ +
+ + The value you typed is not a number. +
-
-
- -
- +
+ +
+ +
+
- -
- - - - angular.module( 'patternfly.validation' ) - .controller( 'ValidationDemoCtrl', ['$scope', function( $scope ) { - $scope.myValue = "Change this value to be a number"; - $scope.myValueValid = 42; - $scope.isValidationDisabled = false; - - $scope.isNumber = function (value) { - if (isNaN(value)) { - return false; - } - - return true; - } - }]); - + + + + angular.module( 'patternfly.validation' ).controller( 'ValidationDemoCtrl', function( $scope ) { + $scope.myValue = "Change this value to be a number"; + $scope.myValueValid = 42; + $scope.isValidationDisabled = false; + + $scope.isNumber = function (value) { + if (isNaN(value)) { + return false; + } + + return true; + } + }); + */