Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-patternfly",
"version": "3.3.1",
"version": "3.3.2",
"authors": [
"Red Hat"
],
Expand Down Expand Up @@ -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.*"
Expand Down
5 changes: 4 additions & 1 deletion dist/docs/css/patternfly-additions.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 6 additions & 1 deletion dist/docs/grunt-scripts/angular-animate.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* @license AngularJS v1.5.2
* @license AngularJS v1.5.3
* (c) 2010-2016 Google, Inc. http://angularjs.org
* License: MIT
*/
Expand Down Expand Up @@ -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;
Expand Down
243 changes: 235 additions & 8 deletions dist/docs/grunt-scripts/angular-patternfly.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
})();
;/**
Expand Down Expand Up @@ -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;
}
}

Expand All @@ -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;
};

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -4470,7 +4690,9 @@ angular
},
mergeDeep: function (source1, source2) {
return mergeDeep({}, angular.copy(source1), angular.copy(source2));
}
},

colorPalette: $.pfPaletteColors
});
})();

Expand Down Expand Up @@ -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>"
);
Expand Down Expand Up @@ -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>"
);

}]);
Expand Down
2 changes: 1 addition & 1 deletion dist/docs/grunt-scripts/angular-sanitize.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* @license AngularJS v1.5.2
* @license AngularJS v1.5.3
* (c) 2010-2016 Google, Inc. http://angularjs.org
* License: MIT
*/
Expand Down
Loading