Skip to content

Commit 0c3bd53

Browse files
author
Eleni Rundle
committed
Merge pull request #32 from dtaylor113/addc3chart
Add patternfly.charts module and c3Chart directive
2 parents 9cc65d3 + eb44d37 commit 0c3bd53

File tree

11 files changed

+252
-6
lines changed

11 files changed

+252
-6
lines changed

‎.jshintrc‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
"trailing": true,
2020
"smarttabs": true,
2121
"globals": {
22-
"angular": false
22+
"angular": false,
23+
"c3": false,
24+
"d3": false
2325
//"$": false
2426
}
2527
}

‎Gruntfile.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,11 @@ module.exports = function(grunt) {
139139
cwd: 'src/',
140140
src: ['card/**/*.html'],
141141
dest: 'templates/card.js'
142+
},
143+
'patternfly.charts': {
144+
cwd: 'src/',
145+
src: ['charts/**/*.html'],
146+
dest: 'templates/charts.js'
142147
}
143148
},
144149
uglify: {

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ You have to install required software before you're able to use grunt:
2121

2222
bower install
2323

24+
Note: The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.
25+
In order to use patternfly charts you must add 'patternfly.charts' as a dependency in your application.
26+
2427
You should have your environment ready now.
2528

2629
Angular-PatternFly can now be built with:

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
},
3131
"dependencies": {
3232
"angular": "1.2.25 - 1.3.*",
33-
"patternfly": "~2.0.0"
33+
"patternfly": "~2.0.0",
34+
"c3": "~0.4.10"
3435
},
3536
"devDependencies": {
3637
"angular-animate": "1.2.25 - 1.3.*",

‎dist/angular-patternfly.js‎

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@
66
*
77
*/
88
angular.module('patternfly.card', []);
9+
;/**
10+
* @name patternfly
11+
*
12+
* @description
13+
* Charts module for patternfly. Must Include d3.js and c3.js to use
14+
*
15+
*/
16+
angular.module('patternfly.charts', []);
17+
918
;/**
1019
* @name patternfly.form
1120
*
@@ -25,7 +34,7 @@ angular.module('patternfly', [
2534
'patternfly.form',
2635
'patternfly.notification',
2736
'patternfly.select',
28-
'patternfly.validation',
37+
'patternfly.validation'
2938
]);
3039

3140
;'use strict';
@@ -124,6 +133,101 @@ angular.module('patternfly.card').directive('pfCard', function() {
124133
});
125134

126135

136+
;/**
137+
* @ngdoc directive
138+
* @name patternfly.charts.directive:pfC3Chart
139+
*
140+
* @description
141+
* Directive for wrapping c3 library
142+
*
143+
* Note: The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.
144+
* In order to use patternfly charts you must add 'patternfly.charts' as a dependency in your application.
145+
*
146+
*
147+
* @param {string} id the ID of the container that the chart should bind to
148+
* @param {expression} config the c3 configuration options for the chart
149+
*
150+
* @example
151+
<example module="patternfly.charts">
152+
<file name="index.html">
153+
<div ng-controller="ChartCtrl">
154+
<div pf-c3-chart id="chartId" config="chartConfig"></div>
155+
156+
<form role="form" style="width:300px">
157+
Total = {{total}}, Used = {{used}}, Available = {{available}}
158+
<div class="form-group">
159+
<label>Used</label>
160+
<input type="text" class="form-control" ng-model="newUsed">
161+
</div>
162+
<input type="button" ng-click="submitform(newUsed)" value="Go" />
163+
</form>
164+
</div>
165+
</file>
166+
167+
<file name="script.js">
168+
function ChartCtrl($scope) {
169+
$scope.used = 950;
170+
$scope.total = 1000;
171+
$scope.available = $scope.total - $scope.used;
172+
173+
$scope.chartConfig = {"donut":
174+
{"title":"MHz Used",
175+
"label":{"show":false},
176+
"width":10
177+
},
178+
"size":{"height":130},
179+
"legend":{"show":false},
180+
"color":{"pattern":["#0088CE","#D1D1D1"]},
181+
"tooltip":{},
182+
"data":{"columns":[["Used","950"],["Available",50]],
183+
"type":"donut",
184+
"donut":{
185+
"label":{"show":false}
186+
},
187+
"groups":[["used","available"]],
188+
"order":null
189+
}
190+
};
191+
192+
$scope.updateAvailable = function(val){
193+
$scope.available = $scope.total - $scope.used;
194+
}
195+
196+
$scope.submitform = function(val){
197+
$scope.used = val;
198+
$scope.updateAvailable();
199+
$scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]];
200+
};
201+
}
202+
</file>
203+
</example>
204+
*/
205+
(function(c3){
206+
'use strict';
207+
208+
angular.module('patternfly.charts')
209+
.directive('pfC3Chart', ['$timeout', function($timeout) {
210+
211+
return {
212+
restrict: 'A',
213+
scope: {
214+
config: '='
215+
},
216+
template: '<div id=""></div>',
217+
replace: true,
218+
link: function(scope, element, attrs) {
219+
scope.$watch('config', function() {
220+
$timeout(function () {
221+
//generate c3 chart data
222+
var chartData = scope.config;
223+
chartData.bindto = '#' + attrs.id;
224+
c3.generate(chartData);
225+
});
226+
},true);
227+
}
228+
};
229+
}]);
230+
}(c3));
127231
;/**
128232
* @ngdoc directive
129233
* @name patternfly.form.directive:pfDatepicker
@@ -990,7 +1094,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function($
9901094
);
9911095

9921096
}]);
993-
;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
1097+
;;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
9941098
'use strict';
9951099

9961100
$templateCache.put('form/datepicker/datepicker.html',

‎dist/angular-patternfly.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/charts/c3/c3-chart.directive.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.charts.directive:pfC3Chart
4+
*
5+
* @description
6+
* Directive for wrapping c3 library
7+
*
8+
* Note: The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.
9+
* In order to use patternfly charts you must add 'patternfly.charts' as a dependency in your application.
10+
*
11+
*
12+
* @param {string} id the ID of the container that the chart should bind to
13+
* @param {expression} config the c3 configuration options for the chart
14+
*
15+
* @example
16+
<example module="patternfly.charts">
17+
<file name="index.html">
18+
<div ng-controller="ChartCtrl">
19+
<div pf-c3-chart id="chartId" config="chartConfig"></div>
20+
21+
<form role="form" style="width:300px">
22+
Total = {{total}}, Used = {{used}}, Available = {{available}}
23+
<div class="form-group">
24+
<label>Used</label>
25+
<input type="text" class="form-control" ng-model="newUsed">
26+
</div>
27+
<input type="button" ng-click="submitform(newUsed)" value="Go" />
28+
</form>
29+
</div>
30+
</file>
31+
32+
<file name="script.js">
33+
function ChartCtrl($scope) {
34+
$scope.used = 950;
35+
$scope.total = 1000;
36+
$scope.available = $scope.total - $scope.used;
37+
38+
$scope.chartConfig = {"donut":
39+
{"title":"MHz Used",
40+
"label":{"show":false},
41+
"width":10
42+
},
43+
"size":{"height":130},
44+
"legend":{"show":false},
45+
"color":{"pattern":["#0088CE","#D1D1D1"]},
46+
"tooltip":{},
47+
"data":{"columns":[["Used","950"],["Available",50]],
48+
"type":"donut",
49+
"donut":{
50+
"label":{"show":false}
51+
},
52+
"groups":[["used","available"]],
53+
"order":null
54+
}
55+
};
56+
57+
$scope.updateAvailable = function(val){
58+
$scope.available = $scope.total - $scope.used;
59+
}
60+
61+
$scope.submitform = function(val){
62+
$scope.used = val;
63+
$scope.updateAvailable();
64+
$scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]];
65+
};
66+
}
67+
</file>
68+
</example>
69+
*/
70+
(function(c3){
71+
'use strict';
72+
73+
angular.module('patternfly.charts')
74+
.directive('pfC3Chart', ['$timeout', function($timeout) {
75+
76+
return {
77+
restrict: 'A',
78+
scope: {
79+
config: '='
80+
},
81+
template: '<div id=""></div>',
82+
replace: true,
83+
link: function(scope, element, attrs) {
84+
scope.$watch('config', function() {
85+
$timeout(function () {
86+
//generate c3 chart data
87+
var chartData = scope.config;
88+
chartData.bindto = '#' + attrs.id;
89+
c3.generate(chartData);
90+
});
91+
},true);
92+
}
93+
};
94+
}]);
95+
}(c3));

‎src/charts/charts.module.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @name patternfly
3+
*
4+
* @description
5+
* Charts module for patternfly. Must Include d3.js and c3.js to use
6+
*
7+
*/
8+
angular.module('patternfly.charts', []);
9+

‎src/patternfly.module.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ angular.module('patternfly', [
1010
'patternfly.form',
1111
'patternfly.notification',
1212
'patternfly.select',
13-
'patternfly.validation',
13+
'patternfly.validation'
1414
]);
1515

‎test/charts/c3/c3.spec.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
describe('Directive: pfC3Chart', function() {
2+
var $scope, $compile, element;
3+
4+
beforeEach(module(
5+
'patternfly.charts'
6+
));
7+
8+
beforeEach(inject(function(_$compile_, _$rootScope_) {
9+
$compile = _$compile_;
10+
$scope = _$rootScope_;
11+
}));
12+
13+
beforeEach(function() {
14+
$scope.myChart = "myChartId";
15+
$scope.chartConfig = {};
16+
element = '<div pf-c3-chart id="myChart" config="chartConfig"></div>';
17+
element = $compile(element)($scope);
18+
$scope.$digest();
19+
});
20+
21+
it("chart should find empty template", function() {
22+
expect(angular.element(element).html()).toBe("");
23+
});
24+
25+
});

0 commit comments

Comments
 (0)