Tabellepflege abgeschlossen, Entwicklung eingebunden, Basiswerte und CSS-Fixes
This commit is contained in:
Hilmer, Carsten
33
www/lib/angular-chart.js/test/fixtures/29-tabs.html
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/29-tabs.html
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts in tabs</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="examples">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="TabsCtrl">
|
||||
<tabset>
|
||||
<tab heading="First tab" active="active">
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Second tab">
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.js"></script>
|
||||
<script src="../../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="29-tabs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
www/lib/angular-chart.js/test/fixtures/29-tabs.js
vendored
Normal file
18
www/lib/angular-chart.js/test/fixtures/29-tabs.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.controller('TabsCtrl', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.active = true;
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
});
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/29-tabs.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/29-tabs.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
35
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.html
vendored
Normal file
35
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.html
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Pie update colors</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="pie" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Charts</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
<p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
|
||||
https://github.com/jtblin/angular-chart.js/issues/51
|
||||
</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="51-pie-update-colours.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.js
vendored
Normal file
34
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.js
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('pie', ['chart.js']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['Series A', 'Series B'];
|
||||
$scope.data = [65, 59];
|
||||
$scope.colors = [{ // red
|
||||
backgroundColor: 'rgba(247,70,74,0.2)',
|
||||
borderColor: 'rgba(247,70,74,1)',
|
||||
pointBackgroundColor: 'rgba(247,70,74,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(247,70,74,0.8)'
|
||||
},
|
||||
{ // green
|
||||
backgroundColor: 'rgba(70,191,189,0.2)',
|
||||
borderColor: 'rgba(70,191,189,1)',
|
||||
pointBackgroundColor: 'rgba(70,191,189,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(70,191,189,0.8)'
|
||||
}];
|
||||
|
||||
$timeout(function () {
|
||||
$scope.data = [49, 65];
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.html
vendored
Normal file
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.html
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Not enough colors</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="pie" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Charts</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-pie" chart-data="data" chart-labels="labels"
|
||||
chart-colors="colors" chart-get-color="chartGetColor"></canvas>
|
||||
</div>
|
||||
<p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
|
||||
https://github.com/jtblin/angular-chart.js/issues/54
|
||||
</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="54-not-enough-colours.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.js
vendored
Normal file
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.js
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('pie', ['chart.js']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.controller('PieCtrl', ['$scope', function ($scope) {
|
||||
var cnt = 0;
|
||||
$scope.colors = [];
|
||||
$scope.labels = ['Series A', 'Series B'];
|
||||
$scope.chartGetColor = function () {
|
||||
return ++cnt % 2 > 0 ?
|
||||
{ // red
|
||||
backgroundColor: 'rgba(247,70,74,0.2)',
|
||||
borderColor: 'rgba(247,70,74,1)',
|
||||
pointBackgroundColor: 'rgba(247,70,74,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(247,70,74,0.8)'
|
||||
}
|
||||
:
|
||||
{ // green
|
||||
backgroundColor: 'rgba(70,191,189,0.2)',
|
||||
borderColor: 'rgba(70,191,189,1)',
|
||||
pointBackgroundColor: 'rgba(70,191,189,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(70,191,189,0.8)'
|
||||
};
|
||||
};
|
||||
$scope.data = [49, 65];
|
||||
}]);
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
35
www/lib/angular-chart.js/test/fixtures/57-hex-colours.html
vendored
Normal file
35
www/lib/angular-chart.js/test/fixtures/57-hex-colours.html
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Hex colors</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="pie" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Charts</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
<p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
|
||||
https://github.com/jtblin/angular-chart.js/issues/57
|
||||
</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="57-hex-colours.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
www/lib/angular-chart.js/test/fixtures/57-hex-colours.js
vendored
Normal file
15
www/lib/angular-chart.js/test/fixtures/57-hex-colours.js
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('pie', ['chart.js']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.controller('PieCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Series A', 'Series B'];
|
||||
$scope.colors = ['#9AFEFF', '#D1D0CE'];
|
||||
$scope.data = [49, 65];
|
||||
}]);
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/57-hex-colours.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/57-hex-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
29
www/lib/angular-chart.js/test/fixtures/bubble.html
vendored
Normal file
29
www/lib/angular-chart.js/test/fixtures/bubble.html
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Bubble chart</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="app">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="BubbleCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bubble chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bubble" chart-data="data"
|
||||
chart-colors="colors" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="bubble.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
787
www/lib/angular-chart.js/test/fixtures/bubble.js
vendored
Normal file
787
www/lib/angular-chart.js/test/fixtures/bubble.js
vendored
Normal file
@@ -0,0 +1,787 @@
|
||||
angular.module('app', ['chart.js'])
|
||||
.config(['ChartJsProvider', function (ChartJsProvider) {
|
||||
'use strict';
|
||||
ChartJsProvider.setOptions({
|
||||
tooltips: { enabled: false }
|
||||
});
|
||||
}])
|
||||
.controller('BubbleCtrl', ['$scope',function ($scope) {
|
||||
'use strict';
|
||||
|
||||
$scope.colors = [
|
||||
{
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: 'rgba(151,187,205,0.8)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(220,220,220,0.2)',
|
||||
pointBackgroundColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBackgroundColor: 'rgba(220,220,220,0.8)',
|
||||
borderColor: 'rgba(220,220,220,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(247,70,74,0.2)',
|
||||
pointBackgroundColor: 'rgba(247,70,74,1)',
|
||||
pointHoverBackgroundColor: 'rgba(247,70,74,0.8)',
|
||||
borderColor: 'rgba(247,70,74,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(247,70,74,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(70,191,189,0.2)',
|
||||
pointBackgroundColor: 'rgba(70,191,189,1)',
|
||||
pointHoverBackgroundColor: 'rgba(70,191,189,0.8)',
|
||||
borderColor: 'rgba(70,191,189,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(70,191,189,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(253,180,92,0.2)',
|
||||
pointBackgroundColor: 'rgba(253,180,92,1)',
|
||||
pointHoverBackgroundColor: 'rgba(253,180,92,0.8)',
|
||||
borderColor: 'rgba(253,180,92,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(253,180,92,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointHoverBackgroundColor: 'rgba(148,159,177,0.8)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||
pointHoverBackgroundColor: 'rgba(77,83,96,0.8)',
|
||||
borderColor: 'rgba(77,83,96,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(151,57,74,0.2)',
|
||||
pointBackgroundColor: 'rgba(151,57,74,1)',
|
||||
pointHoverBackgroundColor: 'rgba(151,57,74,0.8)',
|
||||
borderColor: 'rgba(151,57,74,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,57,74,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(198,232,17,0.2)',
|
||||
pointBackgroundColor: 'rgba(198,232,17,1)',
|
||||
pointHoverBackgroundColor: 'rgba(198,232,17,0.8)',
|
||||
borderColor: 'rgba(198,232,17,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(198,232,17,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(39,249,229,0.2)',
|
||||
pointBackgroundColor: 'rgba(39,249,229,1)',
|
||||
pointHoverBackgroundColor: 'rgba(39,249,229,0.8)',
|
||||
borderColor: 'rgba(39,249,229,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(39,249,229,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(98,128,233,0.2)',
|
||||
pointBackgroundColor: 'rgba(98,128,233,1)',
|
||||
pointHoverBackgroundColor: 'rgba(98,128,233,0.8)',
|
||||
borderColor: 'rgba(98,128,233,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(98,128,233,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(195,99,4,0.2)',
|
||||
pointBackgroundColor: 'rgba(195,99,4,1)',
|
||||
pointHoverBackgroundColor: 'rgba(195,99,4,0.8)',
|
||||
borderColor: 'rgba(195,99,4,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(195,99,4,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(81,204,249,0.2)',
|
||||
pointBackgroundColor: 'rgba(81,204,249,1)',
|
||||
pointHoverBackgroundColor: 'rgba(81,204,249,0.8)',
|
||||
borderColor: 'rgba(81,204,249,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(81,204,249,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(159,197,163,0.2)',
|
||||
pointBackgroundColor: 'rgba(159,197,163,1)',
|
||||
pointHoverBackgroundColor: 'rgba(159,197,163,0.8)',
|
||||
borderColor: 'rgba(159,197,163,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(159,197,163,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(122,68,60,0.2)',
|
||||
pointBackgroundColor: 'rgba(122,68,60,1)',
|
||||
pointHoverBackgroundColor: 'rgba(122,68,60,0.8)',
|
||||
borderColor: 'rgba(122,68,60,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(122,68,60,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(183,199,142,0.2)',
|
||||
pointBackgroundColor: 'rgba(183,199,142,1)',
|
||||
pointHoverBackgroundColor: 'rgba(183,199,142,0.8)',
|
||||
borderColor: 'rgba(183,199,142,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(183,199,142,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(33,125,4,0.2)',
|
||||
pointBackgroundColor: 'rgba(33,125,4,1)',
|
||||
pointHoverBackgroundColor: 'rgba(33,125,4,0.8)',
|
||||
borderColor: 'rgba(33,125,4,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(33,125,4,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(100,33,169,0.2)',
|
||||
pointBackgroundColor: 'rgba(100,33,169,1)',
|
||||
pointHoverBackgroundColor: 'rgba(100,33,169,0.8)',
|
||||
borderColor: 'rgba(100,33,169,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(100,33,169,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(10,128,69,0.2)',
|
||||
pointBackgroundColor: 'rgba(10,128,69,1)',
|
||||
pointHoverBackgroundColor: 'rgba(10,128,69,0.8)',
|
||||
borderColor: 'rgba(10,128,69,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(10,128,69,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(55,144,44,0.2)',
|
||||
pointBackgroundColor: 'rgba(55,144,44,1)',
|
||||
pointHoverBackgroundColor: 'rgba(55,144,44,0.8)',
|
||||
borderColor: 'rgba(55,144,44,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(55,144,44,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(111,248,27,0.2)',
|
||||
pointBackgroundColor: 'rgba(111,248,27,1)',
|
||||
pointHoverBackgroundColor: 'rgba(111,248,27,0.8)',
|
||||
borderColor: 'rgba(111,248,27,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(111,248,27,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(241,104,154,0.2)',
|
||||
pointBackgroundColor: 'rgba(241,104,154,1)',
|
||||
pointHoverBackgroundColor: 'rgba(241,104,154,0.8)',
|
||||
borderColor: 'rgba(241,104,154,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(241,104,154,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(158,253,143,0.2)',
|
||||
pointBackgroundColor: 'rgba(158,253,143,1)',
|
||||
pointHoverBackgroundColor: 'rgba(158,253,143,0.8)',
|
||||
borderColor: 'rgba(158,253,143,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(158,253,143,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(186,25,134,0.2)',
|
||||
pointBackgroundColor: 'rgba(186,25,134,1)',
|
||||
pointHoverBackgroundColor: 'rgba(186,25,134,0.8)',
|
||||
borderColor: 'rgba(186,25,134,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(186,25,134,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(81,34,77,0.2)',
|
||||
pointBackgroundColor: 'rgba(81,34,77,1)',
|
||||
pointHoverBackgroundColor: 'rgba(81,34,77,0.8)',
|
||||
borderColor: 'rgba(81,34,77,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(81,34,77,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(254,6,184,0.2)',
|
||||
pointBackgroundColor: 'rgba(254,6,184,1)',
|
||||
pointHoverBackgroundColor: 'rgba(254,6,184,0.8)',
|
||||
borderColor: 'rgba(254,6,184,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(254,6,184,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(4,230,203,0.2)',
|
||||
pointBackgroundColor: 'rgba(4,230,203,1)',
|
||||
pointHoverBackgroundColor: 'rgba(4,230,203,0.8)',
|
||||
borderColor: 'rgba(4,230,203,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(4,230,203,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(204,31,79,0.2)',
|
||||
pointBackgroundColor: 'rgba(204,31,79,1)',
|
||||
pointHoverBackgroundColor: 'rgba(204,31,79,0.8)',
|
||||
borderColor: 'rgba(204,31,79,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(204,31,79,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(95,152,82,0.2)',
|
||||
pointBackgroundColor: 'rgba(95,152,82,1)',
|
||||
pointHoverBackgroundColor: 'rgba(95,152,82,0.8)',
|
||||
borderColor: 'rgba(95,152,82,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(95,152,82,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(120,249,206,0.2)',
|
||||
pointBackgroundColor: 'rgba(120,249,206,1)',
|
||||
pointHoverBackgroundColor: 'rgba(120,249,206,0.8)',
|
||||
borderColor: 'rgba(120,249,206,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(120,249,206,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(229,137,70,0.2)',
|
||||
pointBackgroundColor: 'rgba(229,137,70,1)',
|
||||
pointHoverBackgroundColor: 'rgba(229,137,70,0.8)',
|
||||
borderColor: 'rgba(229,137,70,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(229,137,70,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(54,98,166,0.2)',
|
||||
pointBackgroundColor: 'rgba(54,98,166,1)',
|
||||
pointHoverBackgroundColor: 'rgba(54,98,166,0.8)',
|
||||
borderColor: 'rgba(54,98,166,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(54,98,166,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(22,81,208,0.2)',
|
||||
pointBackgroundColor: 'rgba(22,81,208,1)',
|
||||
pointHoverBackgroundColor: 'rgba(22,81,208,0.8)',
|
||||
borderColor: 'rgba(22,81,208,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(22,81,208,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(139,248,40,0.2)',
|
||||
pointBackgroundColor: 'rgba(139,248,40,1)',
|
||||
pointHoverBackgroundColor: 'rgba(139,248,40,0.8)',
|
||||
borderColor: 'rgba(139,248,40,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(139,248,40,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(139,221,190,0.2)',
|
||||
pointBackgroundColor: 'rgba(139,221,190,1)',
|
||||
pointHoverBackgroundColor: 'rgba(139,221,190,0.8)',
|
||||
borderColor: 'rgba(139,221,190,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(139,221,190,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(230,218,251,0.2)',
|
||||
pointBackgroundColor: 'rgba(230,218,251,1)',
|
||||
pointHoverBackgroundColor: 'rgba(230,218,251,0.8)',
|
||||
borderColor: 'rgba(230,218,251,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(230,218,251,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(245,21,15,0.2)',
|
||||
pointBackgroundColor: 'rgba(245,21,15,1)',
|
||||
pointHoverBackgroundColor: 'rgba(245,21,15,0.8)',
|
||||
borderColor: 'rgba(245,21,15,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(245,21,15,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(36,166,81,0.2)',
|
||||
pointBackgroundColor: 'rgba(36,166,81,1)',
|
||||
pointHoverBackgroundColor: 'rgba(36,166,81,0.8)',
|
||||
borderColor: 'rgba(36,166,81,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(36,166,81,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(177,41,153,0.2)',
|
||||
pointBackgroundColor: 'rgba(177,41,153,1)',
|
||||
pointHoverBackgroundColor: 'rgba(177,41,153,0.8)',
|
||||
borderColor: 'rgba(177,41,153,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(177,41,153,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(44,173,178,0.2)',
|
||||
pointBackgroundColor: 'rgba(44,173,178,1)',
|
||||
pointHoverBackgroundColor: 'rgba(44,173,178,0.8)',
|
||||
borderColor: 'rgba(44,173,178,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(44,173,178,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(134,50,197,0.2)',
|
||||
pointBackgroundColor: 'rgba(134,50,197,1)',
|
||||
pointHoverBackgroundColor: 'rgba(134,50,197,0.8)',
|
||||
borderColor: 'rgba(134,50,197,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(134,50,197,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(176,188,149,0.2)',
|
||||
pointBackgroundColor: 'rgba(176,188,149,1)',
|
||||
pointHoverBackgroundColor: 'rgba(176,188,149,0.8)',
|
||||
borderColor: 'rgba(176,188,149,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(176,188,149,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(92,9,164,0.2)',
|
||||
pointBackgroundColor: 'rgba(92,9,164,1)',
|
||||
pointHoverBackgroundColor: 'rgba(92,9,164,0.8)',
|
||||
borderColor: 'rgba(92,9,164,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(92,9,164,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(184,93,102,0.2)',
|
||||
pointBackgroundColor: 'rgba(184,93,102,1)',
|
||||
pointHoverBackgroundColor: 'rgba(184,93,102,0.8)',
|
||||
borderColor: 'rgba(184,93,102,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(184,93,102,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(1,235,91,0.2)',
|
||||
pointBackgroundColor: 'rgba(1,235,91,1)',
|
||||
pointHoverBackgroundColor: 'rgba(1,235,91,0.8)',
|
||||
borderColor: 'rgba(1,235,91,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(1,235,91,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(148,100,155,0.2)',
|
||||
pointBackgroundColor: 'rgba(148,100,155,1)',
|
||||
pointHoverBackgroundColor: 'rgba(148,100,155,0.8)',
|
||||
borderColor: 'rgba(148,100,155,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,100,155,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(17,253,128,0.2)',
|
||||
pointBackgroundColor: 'rgba(17,253,128,1)',
|
||||
pointHoverBackgroundColor: 'rgba(17,253,128,0.8)',
|
||||
borderColor: 'rgba(17,253,128,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(17,253,128,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(107,59,91,0.2)',
|
||||
pointBackgroundColor: 'rgba(107,59,91,1)',
|
||||
pointHoverBackgroundColor: 'rgba(107,59,91,0.8)',
|
||||
borderColor: 'rgba(107,59,91,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(107,59,91,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(105,111,203,0.2)',
|
||||
pointBackgroundColor: 'rgba(105,111,203,1)',
|
||||
pointHoverBackgroundColor: 'rgba(105,111,203,0.8)',
|
||||
borderColor: 'rgba(105,111,203,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(105,111,203,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgba(86,123,134,0.2)',
|
||||
pointBackgroundColor: 'rgba(86,123,134,1)',
|
||||
pointHoverBackgroundColor: 'rgba(86,123,134,0.8)',
|
||||
borderColor: 'rgba(86,123,134,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(86,123,134,1)'
|
||||
}
|
||||
];
|
||||
|
||||
$scope.options = {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
max: 125,
|
||||
min: -125,
|
||||
stepSize: 10
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
max: 125,
|
||||
min: -125,
|
||||
stepSize: 10
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
$scope.data = [
|
||||
[
|
||||
{
|
||||
x: -8,
|
||||
y: -72,
|
||||
r: 20.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -14,
|
||||
y: -32,
|
||||
r: 14.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 0,
|
||||
y: 86,
|
||||
r: 15
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -13,
|
||||
y: 58,
|
||||
r: 7.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 22,
|
||||
y: -60,
|
||||
r: 9.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 84,
|
||||
y: -25,
|
||||
r: 15.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 14,
|
||||
y: 85,
|
||||
r: 23.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -2,
|
||||
y: 37,
|
||||
r: 10.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -40,
|
||||
y: 69,
|
||||
r: 0.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -62,
|
||||
y: -46,
|
||||
r: 19.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 4,
|
||||
y: -1,
|
||||
r: 0.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -34,
|
||||
y: 67,
|
||||
r: 17.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -21,
|
||||
y: -88,
|
||||
r: 16.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 90,
|
||||
y: 80,
|
||||
r: 24.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 7,
|
||||
y: 93,
|
||||
r: 20.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 48,
|
||||
y: 39,
|
||||
r: 7.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 99,
|
||||
y: -20,
|
||||
r: 2.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -48,
|
||||
y: 52,
|
||||
r: 4.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -57,
|
||||
y: -39,
|
||||
r: 21
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 31,
|
||||
y: -58,
|
||||
r: 3.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 96,
|
||||
y: 62,
|
||||
r: 10.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 58,
|
||||
y: -54,
|
||||
r: 19.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 8,
|
||||
y: 73,
|
||||
r: 12
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 67,
|
||||
y: 97,
|
||||
r: 8.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -47,
|
||||
y: -57,
|
||||
r: 25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 0,
|
||||
y: -97,
|
||||
r: 23.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -55,
|
||||
y: -27,
|
||||
r: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 68,
|
||||
y: 9,
|
||||
r: 12.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -5,
|
||||
y: 63,
|
||||
r: 20.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 80,
|
||||
y: 31,
|
||||
r: 18.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 47,
|
||||
y: -21,
|
||||
r: 2.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -72,
|
||||
y: 94,
|
||||
r: 1.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 11,
|
||||
y: -90,
|
||||
r: 5.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 45,
|
||||
y: -20,
|
||||
r: 3.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 99,
|
||||
y: 42,
|
||||
r: 8.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -8,
|
||||
y: -65,
|
||||
r: 11
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -30,
|
||||
y: -68,
|
||||
r: 19
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -56,
|
||||
y: 19,
|
||||
r: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -22,
|
||||
y: 46,
|
||||
r: 9
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 8,
|
||||
y: 25,
|
||||
r: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -36,
|
||||
y: -64,
|
||||
r: 0.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 13,
|
||||
y: -6,
|
||||
r: 23.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 41,
|
||||
y: 45,
|
||||
r: 3.75
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -84,
|
||||
y: 39,
|
||||
r: 10.25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 27,
|
||||
y: -96,
|
||||
r: 23.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -14,
|
||||
y: -83,
|
||||
r: 25
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -89,
|
||||
y: -78,
|
||||
r: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: -43,
|
||||
y: -6,
|
||||
r: 2.5
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 3,
|
||||
y: 71,
|
||||
r: 0
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
x: 11,
|
||||
y: 53,
|
||||
r: 4.25
|
||||
}
|
||||
]
|
||||
];
|
||||
}]);
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/bubble.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/bubble.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
77
www/lib/angular-chart.js/test/fixtures/charts.html
vendored
Normal file
77
www/lib/angular-chart.js/test/fixtures/charts.html
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="charts" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Charts</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" id="line-chart" ng-controller="LineCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Line Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-series="series" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Doughnut Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Radar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="area" class="chart chart-radar" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Polar Area Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="polar" class="chart chart-polar-area" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="charts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
68
www/lib/angular-chart.js/test/fixtures/charts.js
vendored
Normal file
68
www/lib/angular-chart.js/test/fixtures/charts.js
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('charts', ['chart.js']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
$timeout(function () {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.data = [
|
||||
[28, 48, 40, 19, 86, 27, 90],
|
||||
[65, 59, 80, 81, 56, 55, 40]
|
||||
];
|
||||
$scope.series = ['Series C', 'Series D'];
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.options = { scaleShowVerticalLines: false };
|
||||
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
$timeout(function () {
|
||||
$scope.options = { scaleShowVerticalLines: true };
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
$scope.data = [0, 0, 0];
|
||||
// TODO: investigate why chart was not showing up without this hack
|
||||
$timeout(function () {
|
||||
$scope.data = [350, 450, 100];
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
$scope.data = [0, 0, 0];
|
||||
$timeout(function () {
|
||||
$scope.data = [350, 450, 100];
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
app.controller('PolarAreaCtrl', function ($scope) {
|
||||
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
});
|
||||
|
||||
app.controller('RadarCtrl', function ($scope) {
|
||||
$scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
});
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/charts.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/charts.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.html
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.html
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Pie update colors</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="line" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Charts</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" ng-controller="LineCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Line Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-line" chart-options="options" chart-data="data"
|
||||
chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="configure-line-chart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.js
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.js
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('line', ['chart.js']);
|
||||
|
||||
app.config(function (ChartJsProvider) {
|
||||
// Configure all charts
|
||||
ChartJsProvider.setOptions({
|
||||
chartColors: ['#FF5252', '#FF8A80']
|
||||
});
|
||||
// Configure all line charts
|
||||
ChartJsProvider.setOptions('line', {
|
||||
showLines: false
|
||||
});
|
||||
});
|
||||
|
||||
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['Series A', 'Series B'];
|
||||
$scope.data = [[15, 23], [59, 80]];
|
||||
|
||||
// Configure only this instance
|
||||
$scope.options = {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
|
||||
$timeout(function () {
|
||||
$scope.data = [[15, 23], [59, 80]];
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/configure-line-chart.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/configure-line-chart.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
9
www/lib/angular-chart.js/test/fixtures/coverage.js
vendored
Normal file
9
www/lib/angular-chart.js/test/fixtures/coverage.js
vendored
Normal file
File diff suppressed because one or more lines are too long
32
www/lib/angular-chart.js/test/fixtures/custom-directive.html
vendored
Normal file
32
www/lib/angular-chart.js/test/fixtures/custom-directive.html
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Pie update colors</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="pie" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Charts</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart my-special-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="custom-directive.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
20
www/lib/angular-chart.js/test/fixtures/custom-directive.js
vendored
Normal file
20
www/lib/angular-chart.js/test/fixtures/custom-directive.js
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('pie', ['chart.js']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.directive('mySpecialPie', function (ChartJsFactory) { return new ChartJsFactory('pie'); });
|
||||
|
||||
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['Series A', 'Series B'];
|
||||
$scope.data = [5, 59];
|
||||
|
||||
$timeout(function () {
|
||||
$scope.data = [5, 65];
|
||||
}, 0);
|
||||
}]);
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/custom-directive.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/custom-directive.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
41
www/lib/angular-chart.js/test/fixtures/dataset-override.html
vendored
Normal file
41
www/lib/angular-chart.js/test/fixtures/dataset-override.html
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts with datasets overrides</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="app">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="page-header">
|
||||
<h1>Dataset overrides</h1>
|
||||
</div>
|
||||
<div class="row" ng-controller="OverrideCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Mixed chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data1" chart-labels="labels1"
|
||||
chart-colors="colors" chart-dataset-override="datasetOverride1"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Doughnut dataset override</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-doughnut" chart-data="data2" chart-labels="labels2"
|
||||
chart-colors="colors" chart-dataset-override="datasetOverride2"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="dataset-override.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
www/lib/angular-chart.js/test/fixtures/dataset-override.js
vendored
Normal file
32
www/lib/angular-chart.js/test/fixtures/dataset-override.js
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
angular.module('app', ['chart.js']).controller('OverrideCtrl', ['$scope', function ($scope) {
|
||||
'use strict';
|
||||
|
||||
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
|
||||
|
||||
$scope.labels1 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.data1 = [
|
||||
[65, -59, 80, 81, -56, 55, -40],
|
||||
[28, 48, -40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.datasetOverride1 = [
|
||||
{
|
||||
label: 'Override Series A',
|
||||
borderWidth: 1,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
label: 'Override Series B',
|
||||
borderWidth: 3,
|
||||
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
|
||||
hoverBorderColor: 'rgba(255,99,132,1)',
|
||||
type: 'line'
|
||||
}
|
||||
];
|
||||
|
||||
$scope.labels2 = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
$scope.data2 = [350, 450, 100];
|
||||
$scope.datasetOverride2 = {
|
||||
hoverBackgroundColor: ['#45b7cd', '#ff6384', '#ff8e72'],
|
||||
hoverBorderColor: ['#45b7cd', '#ff6384', '#ff8e72']
|
||||
};
|
||||
}]);
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/dataset-override.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/dataset-override.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
33
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.html
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.html
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Horizontal Bar Chart</title>
|
||||
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="horizontal" id="top">
|
||||
<div class="container">
|
||||
<section id="charts">
|
||||
<div class="page-header">
|
||||
<h1>Horizontal Bar Chart</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" ng-controller="HorizontalBarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Horizontal Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-horizontal-bar " chart-options="options" chart-data="data"
|
||||
chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../../angular-chart.js"></script>
|
||||
<script src="horizontal-bar-chart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.js
vendored
Normal file
18
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('horizontal', ['chart.js']);
|
||||
Chart.defaults.global.legend = {
|
||||
display: false
|
||||
};
|
||||
|
||||
app.controller('HorizontalBarCtrl', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.active = true;
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
});
|
||||
|
||||
})();
|
||||
BIN
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
31
www/lib/angular-chart.js/test/index.html
Normal file
31
www/lib/angular-chart.js/test/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mocha Tests</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||
</head>
|
||||
<body ng-app="chart.js">
|
||||
<div id="mocha"></div>
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<script src="../node_modules/chai/chai.js"></script>
|
||||
<script src="../node_modules/chai-string/chai-string.js"></script>
|
||||
<script src="../node_modules/sinon/pkg/sinon.js"></script>
|
||||
<script src="../node_modules/sinon-chai/lib/sinon-chai.js"></script>
|
||||
<script>mocha.setup('bdd')</script>
|
||||
<script src="../node_modules/angular-mocks/angular-mocks.js"></script>
|
||||
<script src="../test/fixtures/coverage.js"></script>
|
||||
<script src="../test/test.unit.js"></script>
|
||||
<script>
|
||||
var expect = chai.expect;
|
||||
mocha.checkLeaks();
|
||||
mocha.globals(['angular', 'Chart', 'angular', 'chai', 'expect', 'sinon', 'sinonChai', '__coverage__']);
|
||||
if (window.mochaPhantomJS)
|
||||
mochaPhantomJS.run();
|
||||
else
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
4
www/lib/angular-chart.js/test/mocha.opts
Normal file
4
www/lib/angular-chart.js/test/mocha.opts
Normal file
@@ -0,0 +1,4 @@
|
||||
--slow 20
|
||||
--growl
|
||||
--reporter spec
|
||||
--require test/support/setup
|
||||
11
www/lib/angular-chart.js/test/support/setup.js
Normal file
11
www/lib/angular-chart.js/test/support/setup.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/*jshint node:true*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var chai = require('chai');
|
||||
global.chai = chai;
|
||||
global.should = chai.should();
|
||||
global.expect = chai.expect;
|
||||
global.assert = chai.assert;
|
||||
|
||||
})();
|
||||
75
www/lib/angular-chart.js/test/test.integration.js
Normal file
75
www/lib/angular-chart.js/test/test.integration.js
Normal file
@@ -0,0 +1,75 @@
|
||||
/*jshint node:true*/
|
||||
/*jshint mocha:true*/
|
||||
/*global assert:true*/
|
||||
describe('integration', function () {
|
||||
'use strict';
|
||||
|
||||
var port = 8045; /* teststatic default port 8080 may be occupied on many systems */
|
||||
var webshot = require('webshot'),
|
||||
path = require('path'),
|
||||
gm = require('gm'),
|
||||
tmp = require('tmp-sync'),
|
||||
mkdirp = require('mkdirp').sync,
|
||||
cp = require('cp').sync,
|
||||
imgur = require('imgur-node-api'),
|
||||
server = require('testatic')('./', port),
|
||||
WEBSHOT_OPTIONS = { renderDelay: process.env.DELAY || 2500, windowSize: { width: 1366, height: 768 }},
|
||||
WEBSHOT_FAILED_DIR = path.join('test', 'fixtures', 'shots') + path.sep,
|
||||
dir;
|
||||
|
||||
beforeEach(function () {
|
||||
dir = tmp.in() + path.sep;
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
tmp.clean();
|
||||
});
|
||||
|
||||
after(function () {
|
||||
server.close();
|
||||
});
|
||||
|
||||
mkdirp(WEBSHOT_FAILED_DIR);
|
||||
|
||||
[
|
||||
'bubble',
|
||||
'dataset-override',
|
||||
'horizontal-bar-chart',
|
||||
'29-tabs',
|
||||
'57-hex-colours',
|
||||
'54-not-enough-colours',
|
||||
'51-pie-update-colours',
|
||||
'configure-line-chart',
|
||||
'custom-directive',
|
||||
'charts'
|
||||
].forEach(function (name) {
|
||||
it('compares screenshots for: ' + name, function (done) {
|
||||
var image = dir + name + '.png',
|
||||
url = 'http://localhost:' + port + '/test/fixtures/' + name + '.html',
|
||||
expected = path.join('test', 'fixtures', name + '.png');
|
||||
|
||||
webshot(url, image, WEBSHOT_OPTIONS, function (err) {
|
||||
if (err) return done(err);
|
||||
gm.compare(expected, image, process.env.TOLERANCE || 0.00001, function (err, isEqual) {
|
||||
if (err) return done(err);
|
||||
if (! isEqual) {
|
||||
var failed = WEBSHOT_FAILED_DIR + name + '-failed.png',
|
||||
msg = 'Expected screenshots to be similar. Screenshot saved to ' + failed;
|
||||
cp(image, failed);
|
||||
if (process.env.CI && process.env.IMGUR_ID) {
|
||||
imgur.setClientID(process.env.IMGUR_ID);
|
||||
imgur.upload(image, function (err, res) {
|
||||
if (err) return done(err);
|
||||
assert.fail(isEqual, true, msg + ', uploaded to ' + res.data.link);
|
||||
});
|
||||
} else {
|
||||
assert.fail(isEqual, true, msg);
|
||||
}
|
||||
return;
|
||||
}
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
408
www/lib/angular-chart.js/test/test.unit.js
Normal file
408
www/lib/angular-chart.js/test/test.unit.js
Normal file
@@ -0,0 +1,408 @@
|
||||
/*jshint mocha:true*/
|
||||
/*global module:true*/
|
||||
/*global inject:true*/
|
||||
/*global expect:true*/
|
||||
/*global sinon:true*/
|
||||
|
||||
describe('Unit testing', function () {
|
||||
'use strict';
|
||||
|
||||
var $compile, scope, sandbox, ChartJs, ChartJsProvider;
|
||||
|
||||
beforeEach(module('chart.js', function (_ChartJsProvider_) {
|
||||
ChartJsProvider = _ChartJsProvider_;
|
||||
ChartJsProvider.setOptions({ env: 'test', responsive: false });
|
||||
}));
|
||||
|
||||
beforeEach(inject(function (_$compile_, _$rootScope_, _ChartJs_) {
|
||||
// The injector unwraps the underscores (_) from around the parameter names when matching
|
||||
$compile = _$compile_;
|
||||
scope = _$rootScope_;
|
||||
ChartJs = _ChartJs_;
|
||||
sandbox = sinon.sandbox.create();
|
||||
}));
|
||||
|
||||
afterEach(function () {
|
||||
sandbox.restore();
|
||||
});
|
||||
|
||||
describe('base', function () {
|
||||
describe('chart types', function () {
|
||||
['line', 'bar', 'horizontalBar', 'radar', 'pie', 'doughnut', 'polarArea', 'bubble'].forEach(function (type) {
|
||||
it('creates a ' + type + ' chart using the directive', function () {
|
||||
var markup = '<canvas class="chart chart-' +
|
||||
(type === 'polarArea' ? 'polar-area' : type === 'horizontalBar' ? 'horizontal-bar' : type) +
|
||||
'" chart-data="data" chart-labels="labels"></canvas>';
|
||||
|
||||
if (['line', 'bar', 'horizontalBar', 'radar'].indexOf(type) > - 1) {
|
||||
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
} else {
|
||||
scope.labels = ['Downloads', 'In store', 'Mail orders'];
|
||||
scope.data = [300, 500, 100];
|
||||
}
|
||||
|
||||
var spyChart = sandbox.spy(ChartJs, 'Chart');
|
||||
|
||||
scope.$on('chart-create', function (evt, chart) {
|
||||
expect(chart).to.be.an.instanceOf(Chart.Controller);
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
expect(spyChart).to.have.been.calledWithNew;
|
||||
expect(spyChart).to.have.been.calledWithExactly(
|
||||
sinon.match.any,
|
||||
sinon.match({ type: type, data: sinon.match.object, options: sinon.match.object })
|
||||
);
|
||||
});
|
||||
|
||||
it('creates a ' + type + ' chart using the "chart-type" attribute', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-base" chart-data="data" chart-labels="labels" ' +
|
||||
'chart-type="type"></canvas></div>';
|
||||
|
||||
scope.type = type;
|
||||
|
||||
if (['line', 'bar', 'horizontalBar', 'radar'].indexOf(type) > - 1) {
|
||||
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
} else {
|
||||
scope.labels = ['Downloads', 'In store', 'Mail orders'];
|
||||
scope.data = [300, 500, 100];
|
||||
}
|
||||
|
||||
var spyChart = sandbox.spy(ChartJs, 'Chart');
|
||||
|
||||
scope.$on('chart-create', function (evt, chart) {
|
||||
expect(chart).to.be.an.instanceOf(Chart.Controller);
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
expect(spyChart).to.have.been.calledWithNew;
|
||||
expect(spyChart).to.have.been.calledWithExactly(
|
||||
sinon.match.any,
|
||||
sinon.match({ type: type, data: sinon.match.object, options: sinon.match.object })
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('dataset override', function () {
|
||||
it('overrides the datasets for complex charts', function () {
|
||||
var datasets;
|
||||
var markup = '<canvas class="chart chart-bar" chart-data="data" chart-labels="labels" ' +
|
||||
'chart-dataset-override="datasetOverride"></canvas>';
|
||||
|
||||
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
scope.data = [
|
||||
[65, -59, 80, 81, -56, 55, -40],
|
||||
[28, 48, -40, 19, 86, 27, 90]
|
||||
];
|
||||
scope.datasetOverride = [
|
||||
{
|
||||
label: 'Bar chart',
|
||||
borderWidth: 1,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
label: 'Line chart',
|
||||
borderWidth: 3,
|
||||
type: 'line'
|
||||
}
|
||||
];
|
||||
|
||||
scope.$on('chart-create', function (evt, chart) {
|
||||
datasets = chart.chart.config.data.datasets;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
expect(datasets[0].label).to.equal('Bar chart');
|
||||
expect(datasets[1].label).to.equal('Line chart');
|
||||
expect(datasets[0].borderWidth).to.equal(1);
|
||||
expect(datasets[1].borderWidth).to.equal(3);
|
||||
expect(datasets[0].type).to.equal('bar');
|
||||
expect(datasets[1].type).to.equal('line');
|
||||
});
|
||||
|
||||
it('overrides the dataset for simple charts', function () {
|
||||
var datasets;
|
||||
var markup = '<canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" ' +
|
||||
'chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>';
|
||||
|
||||
scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
|
||||
scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
scope.data = [350, 450, 100];
|
||||
scope.datasetOverride = {
|
||||
hoverBackgroundColor: ['#45b7cd', '#ff6384', '#ff8e72'],
|
||||
hoverBorderColor: ['#45b7cd', '#ff6384', '#ff8e72']
|
||||
};
|
||||
|
||||
scope.$on('chart-create', function (evt, chart) {
|
||||
datasets = chart.chart.config.data.datasets;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
expect(datasets[0].hoverBackgroundColor).to.deep.equal(['#45b7cd', '#ff6384', '#ff8e72']);
|
||||
expect(datasets[0].hoverBorderColor).to.deep.equal(['#45b7cd', '#ff6384', '#ff8e72']);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('lifecycle', function () {
|
||||
it('watches the attributes of the chart', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-type="type"></canvas></div>';
|
||||
|
||||
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
|
||||
var spy = sandbox.spy(scope, '$watch');
|
||||
$compile(markup)(scope);
|
||||
|
||||
// cannot get a hold of the child scope as it isn't created yet
|
||||
// so cannot be more precise on expectations
|
||||
expect(spy.calledThrice).to.be.true;
|
||||
});
|
||||
|
||||
it('creates the chart only once', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels" ' +
|
||||
'chart-series="series"></canvas></div>';
|
||||
var count = 0;
|
||||
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
scope.series = ['Series A', 'Series B'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
scope.$on('chart-create', function () {
|
||||
count++;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
expect(count).to.equal(1);
|
||||
});
|
||||
|
||||
it('updates the chart', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels" ' +
|
||||
'chart-series="series"></canvas></div>';
|
||||
var count = 0;
|
||||
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
scope.series = ['Series A', 'Series B'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
|
||||
scope.$on('chart-update', function () {
|
||||
count++;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
scope.data = [
|
||||
[28, 48, 40, 19, 86, 27, 90],
|
||||
[65, 59, 80, 81, 56, 55, 40]
|
||||
];
|
||||
scope.$digest();
|
||||
|
||||
expect(count).to.equal(1);
|
||||
});
|
||||
|
||||
it('destroy the chart if all data is removed', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels"></canvas></div>';
|
||||
var countCreate = 0, countUpdate = 0, countDestroy = 0;
|
||||
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
|
||||
scope.$on('chart-create', function () {
|
||||
countCreate++;
|
||||
});
|
||||
|
||||
scope.$on('chart-update', function () {
|
||||
countUpdate++;
|
||||
});
|
||||
|
||||
scope.$on('chart-destroy', function() {
|
||||
countDestroy++;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
scope.data = [];
|
||||
scope.$digest();
|
||||
|
||||
expect(countCreate).to.equal(1);
|
||||
expect(countUpdate).to.equal(0);
|
||||
expect(countDestroy).to.equal(1);
|
||||
});
|
||||
|
||||
it('re-create the chart if data added or removed', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels" ' +
|
||||
'chart-series="series"></canvas></div>';
|
||||
var countCreate = 0, countUpdate = 0, countDestroy = 0;
|
||||
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
|
||||
scope.$on('chart-create', function () {
|
||||
countCreate++;
|
||||
});
|
||||
|
||||
scope.$on('chart-update', function () {
|
||||
countUpdate++;
|
||||
});
|
||||
|
||||
scope.$on('chart-destroy', function() {
|
||||
countDestroy++;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
scope.data = [
|
||||
[28, 48, 40, 19, 86, 27, 90],
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[65, 59, 80, 81, 56, 55, 40]
|
||||
];
|
||||
scope.$digest();
|
||||
|
||||
expect(countCreate).to.equal(2);
|
||||
expect(countUpdate).to.equal(0);
|
||||
expect(countDestroy).to.equal(1);
|
||||
});
|
||||
|
||||
it('should allow to set a configuration', function () {
|
||||
ChartJsProvider.setOptions({responsive: false});
|
||||
expect(ChartJs.getOptions().responsive).to.equal(false);
|
||||
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
|
||||
ChartJsProvider.setOptions({responsive: true});
|
||||
expect(ChartJs.getOptions().responsive).to.equal(true);
|
||||
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
|
||||
});
|
||||
|
||||
it('should allow to set a configuration for a chart type', function () {
|
||||
ChartJsProvider.setOptions('Line', {responsive: false});
|
||||
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
|
||||
ChartJsProvider.setOptions('Line', {responsive: true});
|
||||
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
|
||||
});
|
||||
|
||||
['labels', 'colors', 'series', 'options'].forEach(function (attr) {
|
||||
it('re-creates the chart on ' + attr + ' changes', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" ' +
|
||||
'chart-colors="colors" chart-options="options"></canvas></div>';
|
||||
var count = 0;
|
||||
|
||||
scope.options = { scaleShowVerticalLines: false };
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
scope.series = ['Series A', 'Series B'];
|
||||
scope.colors = ['#45b7cd', '#ff6384'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
scope.$on('chart-create', function () {
|
||||
count++;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
switch (attr) {
|
||||
case 'labels':
|
||||
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
break;
|
||||
case 'colors':
|
||||
scope.colors = ['#ff6384', '#ff8e72'];
|
||||
break;
|
||||
case 'series':
|
||||
scope.series = ['Series C', 'Series D'];
|
||||
break;
|
||||
case 'options':
|
||||
scope.options = { scaleShowVerticalLines: true };
|
||||
break;
|
||||
}
|
||||
scope.$digest();
|
||||
|
||||
expect(count).to.equal(2);
|
||||
});
|
||||
});
|
||||
|
||||
['labels', 'colors', 'series', 'options'].forEach(function (attr) {
|
||||
it('does not re-create the chart on ' + attr + ' not changed', function () {
|
||||
var markup = '<div style="width: 250px; height:120px">' +
|
||||
'<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" ' +
|
||||
'chart-colors="colors" chart-options="options"></canvas></div>';
|
||||
var count = 0;
|
||||
|
||||
scope.options = { scaleShowVerticalLines: false };
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
scope.series = ['Series A', 'Series B'];
|
||||
scope.colors = ['#45b7cd', '#ff6384'];
|
||||
scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
scope.$on('chart-create', function () {
|
||||
count++;
|
||||
});
|
||||
|
||||
$compile(markup)(scope);
|
||||
scope.$digest();
|
||||
|
||||
switch (attr) {
|
||||
case 'labels':
|
||||
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
break;
|
||||
case 'colors':
|
||||
scope.colors = ['#45b7cd', '#ff6384'];
|
||||
break;
|
||||
case 'series':
|
||||
scope.series = ['Series A', 'Series B'];
|
||||
break;
|
||||
case 'options':
|
||||
scope.options = { scaleShowVerticalLines: false };
|
||||
break;
|
||||
}
|
||||
scope.$digest();
|
||||
|
||||
expect(count).to.equal(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user