Skip to content

Commit 7aec7b4

Browse files
Shubham Dhondjtblin
Shubham Dhond
authored and
jtblin
committed
Fix for global configuration overrides (Issue 449) (#498)
* Fix for global configuration overrides (Issue 449)
1 parent 83d4ed5 commit 7aec7b4

6 files changed

Lines changed: 167 additions & 11 deletions

File tree

‎angular-chart.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,13 @@
7878
// If no type was specified set option for the global object
7979
if (! customOptions) {
8080
customOptions = type;
81-
options = angular.extend(options, customOptions);
82-
return;
81+
options = angular.merge(options, customOptions);
82+
} else {
83+
// Set options for the specific chart
84+
options[type] = angular.merge(options[type] || {}, customOptions);
8385
}
84-
// Set options for the specific chart
85-
options[type] = angular.extend(options[type] || {}, customOptions);
86+
87+
angular.merge(ChartJs.Chart.defaults, options);
8688
};
8789

8890
this.$get = function () {

‎test/fixtures/coverage.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/fixtures/options-override.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Charts</title>
6+
<link href="../../examples/bootstrap.css" rel="stylesheet">
7+
</head>
8+
<body ng-app="charts" id="top">
9+
<div class="container">
10+
<section id="charts">
11+
<div class="page-header">
12+
<h1>Charts</h1>
13+
</div>
14+
<div class="row">
15+
<div class="col-lg-4 col-sm-12" id="line-chart" ng-controller="LineCtrl">
16+
<div class="panel panel-default">
17+
<div class="panel-heading">Line Chart</div>
18+
<div class="panel-body">
19+
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
20+
</div>
21+
</div>
22+
</div>
23+
<div class="col-lg-4 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
24+
<div class="panel panel-default">
25+
<div class="panel-heading">Bar Chart</div>
26+
<div class="panel-body">
27+
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
28+
chart-series="series" chart-options="options"></canvas>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="col-lg-4 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
33+
<div class="panel panel-default">
34+
<div class="panel-heading">Doughnut Chart</div>
35+
<div class="panel-body">
36+
<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels"></canvas>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
<div class="row">
42+
<div class="col-lg-4 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
43+
<div class="panel panel-default">
44+
<div class="panel-heading">Radar Chart</div>
45+
<div class="panel-body">
46+
<canvas id="area" class="chart chart-radar" chart-data="data" chart-labels="labels"></canvas>
47+
</div>
48+
</div>
49+
</div>
50+
<div class="col-lg-4 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
51+
<div class="panel panel-default">
52+
<div class="panel-heading">Pie Chart</div>
53+
<div class="panel-body">
54+
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
55+
</div>
56+
</div>
57+
</div>
58+
<div class="col-lg-4 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
59+
<div class="panel panel-default">
60+
<div class="panel-heading">Polar Area Chart</div>
61+
<div class="panel-body">
62+
<canvas id="polar" class="chart chart-polar-area" chart-data="data" chart-labels="labels"></canvas>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
<div class="row">
68+
</div>
69+
</section>
70+
</div>
71+
72+
<script src="../../node_modules/angular/angular.min.js"></script>
73+
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
74+
<script src="../../angular-chart.js"></script>
75+
<script src="options-override.js"></script>
76+
</body>
77+
</html>

‎test/fixtures/options-override.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
(function () {
2+
'use strict';
3+
4+
var app = angular.module('charts', ['chart.js']);
5+
6+
app.config(function (ChartJsProvider) {
7+
ChartJsProvider.setOptions('global', {
8+
legend: {
9+
display: true
10+
}
11+
});
12+
});
13+
14+
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
15+
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
16+
$scope.series = ['Series A', 'Series B'];
17+
$scope.data = [
18+
[65, 59, 80, 81, 56, 55, 40],
19+
[28, 48, 40, 19, 86, 27, 90]
20+
];
21+
$timeout(function () {
22+
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
23+
$scope.data = [
24+
[28, 48, 40, 19, 86, 27, 90],
25+
[65, 59, 80, 81, 56, 55, 40]
26+
];
27+
$scope.series = ['Series C', 'Series D'];
28+
}, 0);
29+
}]);
30+
31+
app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
32+
$scope.options = { scaleShowVerticalLines: false };
33+
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
34+
$scope.series = ['Series A', 'Series B'];
35+
$scope.data = [
36+
[65, 59, 80, 81, 56, 55, 40],
37+
[28, 48, 40, 19, 86, 27, 90]
38+
];
39+
$timeout(function () {
40+
$scope.options = { scaleShowVerticalLines: true };
41+
}, 0);
42+
}]);
43+
44+
app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
45+
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
46+
$scope.data = [0, 0, 0];
47+
// TODO: investigate why chart was not showing up without this hack
48+
$timeout(function () {
49+
$scope.data = [350, 450, 100];
50+
}, 0);
51+
}]);
52+
53+
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
54+
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
55+
$scope.data = [0, 0, 0];
56+
$timeout(function () {
57+
$scope.data = [350, 450, 100];
58+
}, 0);
59+
}]);
60+
61+
app.controller('PolarAreaCtrl', function ($scope) {
62+
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
63+
$scope.data = [300, 500, 100, 40, 120];
64+
});
65+
66+
app.controller('RadarCtrl', function ($scope) {
67+
$scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
68+
$scope.data = [
69+
[65, 59, 90, 81, 56, 55, 40],
70+
[28, 48, 40, 19, 96, 27, 100]
71+
];
72+
});
73+
})();

‎test/fixtures/options-override.png‎

97.6 KB
Loading

‎test/test.unit.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,16 +309,20 @@ describe('Unit testing', function () {
309309
ChartJsProvider.setOptions({responsive: false});
310310
expect(ChartJs.getOptions().responsive).to.equal(false);
311311
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
312+
expect(ChartJsProvider.$get().Chart.defaults.responsive).to.equal(false);
312313
ChartJsProvider.setOptions({responsive: true});
313314
expect(ChartJs.getOptions().responsive).to.equal(true);
314315
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
316+
expect(ChartJsProvider.$get().Chart.defaults.responsive).to.equal(true);
315317
});
316318

317319
it('should allow to set a configuration for a chart type', function () {
318320
ChartJsProvider.setOptions('Line', {responsive: false});
319321
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
320322
ChartJsProvider.setOptions('Line', {responsive: true});
321323
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
324+
ChartJsProvider.setOptions('Line', {responsive: true});
325+
expect(ChartJsProvider.$get().Chart.defaults.Line.responsive).to.equal(true);
322326
});
323327

324328
['labels', 'colors', 'series', 'options'].forEach(function (attr) {

0 commit comments

Comments
 (0)