Merge pull request #219 from patternfly/bump-v3.3.2

Bumped version number to 3.3.2.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-patternfly",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "authors": [
     "Red Hat"
   ],
@@ -39,7 +39,7 @@
     "angular-sanitize": "1.3.0 - 1.5.*",
     "angular-bootstrap": "0.13.x",
     "lodash": "3.x",
-    "patternfly": "~3.3.1"
+    "patternfly": "~3.3.2"
   },
   "devDependencies": {
     "angular-mocks": "1.3.0 - 1.5.*"

dist/docs/grunt-scripts/angular-animate.js

@@ -1,5 +1,5 @@
 /**
- * @license AngularJS v1.5.2
+ * @license AngularJS v1.5.3
  * (c) 2010-2016 Google, Inc. http://angularjs.org
  * License: MIT
  */
@@ -2225,6 +2225,11 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
   });
 
   rules.cancel.push(function(element, newAnimation, currentAnimation) {
+    // cancel the animation if classes added / removed in both animation cancel each other out,
+    // but only if the current animation isn't structural
+
+    if (currentAnimation.structural) return false;
+
     var nA = newAnimation.addClass;
     var nR = newAnimation.removeClass;
     var cA = currentAnimation.addClass;

dist/docs/grunt-scripts/angular-patternfly.js

@@ -573,7 +573,8 @@ angular.module('patternfly.card').directive('pfCard', function () {
     getDefaultSparklineLegend: patternflyDefaults.getDefaultSparklineLegend,
     getDefaultSparklinePoint: patternflyDefaults.getDefaultSparklinePoint,
     getDefaultSparklineTooltip: patternflyDefaults.getDefaultSparklineTooltip,
-    getDefaultSparklineConfig: patternflyDefaults.getDefaultSparklineConfig
+    getDefaultSparklineConfig: patternflyDefaults.getDefaultSparklineConfig,
+    getDefaultLineConfig: patternflyDefaults.getDefaultLineConfig
   });
 })();
 ;/**
@@ -942,14 +943,14 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["pfUtils", "$t
         }
 
         $scope.getStatusColor = function (used, thresholds) {
-          var color = '#0088CE';
+          var color = pfUtils.colorPalette.blue;
 
           if (thresholds) {
-            color = '#3f9c35';
+            color = pfUtils.colorPalette.green;
             if (used >= thresholds.error) {
-              color = '#CC0000';
+              color = pfUtils.colorPalette.red;
             } else if (used >= thresholds.warning) {
-              color = '#EC7A08';
+              color = pfUtils.colorPalette.orange;
             }
           }
 
@@ -962,7 +963,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["pfUtils", "$t
           color = { pattern: [] };
           percentUsed = scope.data.used / scope.data.total * 100.0;
           color.pattern[0] = $scope.getStatusColor(percentUsed, scope.config.thresholds);
-          color.pattern[1] = '#D1D1D1';
+          color.pattern[1] = pfUtils.colorPalette.black300;
           return color;
         };
 
@@ -1463,6 +1464,225 @@ angular.module('patternfly.charts').directive('pfHeatmap', ["$compile", function
     }
   };
 }]);
+;/**
+ * @ngdoc directive
+ * @name patternfly.charts.directive:pfLineChart
+ *
+ * @description
+ *   Directive for rendering a line chart.
+ *   <br><br>
+ *   See http://c3js.org/reference.html for a full list of C3 chart options.
+ *
+ * @param {object} config configuration settings for the line chart:<br/>
+ * <ul style='list-style-type: none'>
+ * <li>.chartId            - the ID of the container that the chart should bind to
+ * <li>.units              - unit label for values, ex: 'MHz','GB', etc..
+ * <li>.tooltipFn          - (optional) override the tooltip contents generation functions. Should take a data point and
+ *                           return HTML markup for the tooltip contents. Setting this overrides the tooltipType value.
+ * <li>.area               - (optional) overrides the default Area properties of the C3 chart
+ * <li>.size               - (optional) overrides the default Size properties of the C3 chart
+ * <li>.axis               - (optional) overrides the default Axis properties of the C3 chart
+ * <li>.color              - (optional) overrides the default Color properties of the C3 chart
+ * <li>.legend             - (optional) overrides the default Legend properties of the C3 chart
+ * <li>.point              - (optional) overrides the default Point properties of the C3 chart
+ * </ul>
+ *
+ * @param {object} chartData the data to be shown as an area chart<br/>
+ * First and second Array elements, xData and yData, must exist, next data arrays are optional.<br/>
+ * <ul style='list-style-type: none'>
+ * <li>.xData      - Array, X values for the data points, first element must be the name of the data
+ * <li>.yData      - Array, Y Values for the data points, first element must be the name of the data
+ * <li>.yData1     - Array, Y Values for the data points, first element must be the name of the data
+ * <li>.[...]      - Array, Y Values for the data points, first element must be the name of the data
+ * </ul>
+ *
+ * @param {boolean=} showXAxis override config settings for showing the X Axis
+ * @param {boolean=} showYAxis override config settings for showing the Y Axis
+ * @param {boolean=} setAreaChart override config settings for showing area type chart
+
+ * @example
+ <example module="patternfly.charts">
+   <file name="index.html">
+     <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
+       <div class="col-md-12">
+         <div pf-line-chart config="config" chart-data="data" set-area-chart="custAreaChart" show-x-axis="custShowXAxis" show-y-axis="custShowYAxis"></div>
+       </div>
+       <hr class="col-md-12">
+       <div class="col-md-12">
+         <div class="row">
+           <div class="col-md-6">
+             <form role="form"">
+               <div class="form-group">
+                 <label class="checkbox-inline">
+                   <input type="checkbox" ng-model="custShowXAxis">X Axis</input>
+                 </label>
+                 <label class="checkbox-inline">
+                   <input type="checkbox" ng-model="custShowYAxis">Y Axis</input>
+                 </label>
+                 <label class="checkbox-inline">
+                   <input type="checkbox" ng-model="custAreaChart">Area Chart</input>
+                 </label>
+               </div>
+             </form>
+           </div>
+           <div class="col-md-3">
+                 <button ng-click="addDataPoint()">Add Data Point</button>
+           </div>
+         </div>
+       </div>
+     </div>
+   </file>
+
+   <file name="script.js">
+     angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope, pfUtils ) {
+
+       $scope.config = {
+         chartId: 'exampleLine',
+         grid: {y: {show: false}},
+         point: {r: 1},
+         color: {pattern: [pfUtils.colorPalette.blue, pfUtils.colorPalette.green]}
+       };
+
+       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 = {
+         xData: dates,
+         yData0: ['Created', 12, 10,10, 62, 17, 10, 15, 13, 17, 10, 12, 10, 10, 12, 17, 16, 15, 13, 17, 10],
+         yData1: ['Deleted', 10, 17, 76,14, 10, 10, 10, 10, 10, 10, 10, 17, 17, 14, 10, 10, 10, 10, 10, 10]
+       };
+
+       $scope.custShowXAxis = false;
+       $scope.custShowYAxis = false;
+       $scope.custAreaChart = false;
+
+       $scope.addDataPoint = function () {
+         $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
+         $scope.data.yData0.push(Math.round(Math.random() * 100));
+         $scope.data.yData1.push(Math.round(Math.random() * 100));
+       };
+     });
+   </file>
+ </example>
+ */
+angular.module('patternfly.charts').directive('pfLineChart', ["pfUtils", function (pfUtils) {
+  'use strict';
+  return {
+    restrict: 'A',
+    scope: {
+      config: '=',
+      chartData: '=',
+      showXAxis: '=?',
+      showYAxis: '=?',
+      setAreaChart: '=?'
+    },
+    replace: true,
+    templateUrl: 'charts/line/line-chart.html',
+    controller: ['$scope',
+      function ($scope) {
+
+        // Create an ID for the chart based on the chartId in the config if given
+        $scope.lineChartId = 'lineChart';
+        if ($scope.config.chartId) {
+          $scope.lineChartId = $scope.config.chartId + $scope.lineChartId;
+        }
+
+        /*
+         * Convert the config data to C3 Data
+         */
+        $scope.getLineData = function (chartData) {
+          var lineData  = {
+            type: $scope.setAreaChart ? "area" : "line"
+          };
+
+          if (chartData && chartData.dataAvailable !== false && chartData.xData) {
+            lineData.x = chartData.xData[0];
+            // Convert the chartData dictionary into a C3 columns data arrays
+            lineData.columns = Object.keys (chartData).map (function (key) {
+              return chartData[key];
+            });
+          }
+
+          return lineData;
+        };
+
+        /*
+         * 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 line 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.showYAxis === undefined) {
+          $scope.showYAxis = ($scope.config.showAxis !== undefined) && $scope.config.showAxis;
+        }
+
+        $scope.defaultConfig = $().c3ChartDefaults().getDefaultLineConfig();
+        $scope.defaultConfig.axis = {
+          x: {
+            show: $scope.showXAxis === true,
+            type: 'timeseries',
+            tick: {
+              format: function () {
+                return '';
+              }
+            }
+          },
+          y: {
+            show: $scope.showYAxis === true,
+            tick: {
+              format: function () {
+                return '';
+              }
+            }
+          }
+        };
+
+        /*
+         * Setup Chart type option. Default is Line Chart.
+         */
+        if ($scope.setAreaChart === undefined) {
+          $scope.setAreaChart = ($scope.config.setAreaChart !== undefined) && $scope.config.setAreaChart;
+        }
+
+        // Convert the given data to C3 chart format
+        $scope.config.data = pfUtils.merge($scope.config.data, $scope.getLineData($scope.chartData));
+
+        // Override defaults with callers specifications
+        $scope.defaultConfig = pfUtils.merge($scope.defaultConfig, $scope.config);
+      }
+    ],
+
+    link: function (scope) {
+      scope.$watch('config', function () {
+        scope.config.data = pfUtils.merge(scope.config.data, scope.getLineData(scope.chartData));
+        scope.chartConfig = pfUtils.merge(scope.config, scope.defaultConfig);
+      }, true);
+      scope.$watch('showXAxis', function () {
+        scope.chartConfig.axis.x.show = scope.showXAxis === true;
+      });
+      scope.$watch('showYAxis', function () {
+        scope.chartConfig.axis.y.show = scope.showYAxis === true;
+      });
+      scope.$watch('setAreaChart', function () {
+        scope.chartConfig.data.type = scope.setAreaChart ? "area" : "line";
+      });
+      scope.$watch('chartData', function () {
+        scope.chartConfig.data = pfUtils.merge(scope.chartConfig.data, scope.getLineData(scope.chartData));
+      }, true);
+    }
+  };
+}]
+);
 ;/**
  * @ngdoc directive
  * @name patternfly.charts.directive:pfSparklineChart
@@ -4470,7 +4690,9 @@ angular
     },
     mergeDeep: function (source1, source2) {
       return mergeDeep({}, angular.copy(source1), angular.copy(source2));
-    }
+    },
+
+    colorPalette: $.pfPaletteColors
   });
 })();
 
@@ -5568,6 +5790,11 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
   );
 
 
+  $templateCache.put('charts/line/line-chart.html',
+    "<span><div pf-c3-chart id={{lineChartId}} config=chartConfig></div></span>"
+  );
+
+
   $templateCache.put('charts/sparkline/sparkline-chart.html',
     "<span><div pf-c3-chart id={{sparklineChartId}} config=chartConfig></div></span>"
   );
@@ -5647,7 +5874,7 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
   'use strict';
 
   $templateCache.put('sort/sort.html',
-    "<div class=sort-pf><form><div class=form-group><div class=\"dropdown btn-group\"><button type=button class=\"btn btn-default dropdown-toggle\" data-toggle=dropdown aria-haspopup=true aria-expanded=false tooltip=\"Sort by\" tooltip-placement=bottom>{{config.currentField.title}} <span class=caret></span></button><ul class=dropdown-menu><li ng-repeat=\"item in config.fields\" ng-class=\"{'selected': item === config.currentField}\"><a class=sort-field role=menuitem tabindex=-1 ng-click=selectField(item)>{{item.title}}</a></li></ul></div><button class=\"btn btn-link\" type=button ng-click=changeDirection()><span class=sort-direction ng-class=getSortIconClass()></span></button></div></form></div>"
+    "<div class=sort-pf><form><div class=form-group><div class=\"dropdown btn-group\"><button type=button class=\"btn btn-default dropdown-toggle\" data-toggle=dropdown aria-haspopup=true aria-expanded=false tooltip=\"Sort by\" tooltip-placement=bottom>{{config.currentField.title}} <span class=caret></span></button><ul class=dropdown-menu><li ng-repeat=\"item in config.fields\" ng-class=\"{'selected': item === config.currentField}\"><a href=javascript:void(0); class=sort-field role=menuitem tabindex=-1 ng-click=selectField(item)>{{item.title}}</a></li></ul></div><button class=\"btn btn-link\" type=button ng-click=changeDirection()><span class=sort-direction ng-class=getSortIconClass()></span></button></div></form></div>"
   );
 
 }]);

dist/docs/grunt-scripts/angular-sanitize.js

@@ -1,5 +1,5 @@
 /**
- * @license AngularJS v1.5.2
+ * @license AngularJS v1.5.3
  * (c) 2010-2016 Google, Inc. http://angularjs.org
  * License: MIT
  */